- CSS3 2D转换:
1.translate() 移动
transform:translate(300px,200px);
transform:translateX(200px); 水平向右偏移
transform:translateY(300px); 垂直向下偏移
2.rotate() 旋转
transform:rotate(50deg); 正值:顺时针旋转(一个值)
3.scale(X,Y) 缩放:0~1 缩小,>1 放大。
transform:scale(2); 水平和垂直方向同时放大2倍,无单位
4.skew() 倾斜 / 扭曲
transform:skew(30deg,45deg); 水平:沿x轴转,垂直:沿y轴转
5.transform-origin 参考点
transform-origin:right bottom; 以右下角的点为参考点旋转
transform-origin:80% 50%; 以某个点为参考点旋转
6.transition 过渡效果
transition:transform 1s linear; 在1s时间内匀速移动
过渡属性:
transition-property 规定应用过渡的 CSS 属性的名称,即进行过渡的对象;
transition-duration 定义过渡效果花费的时间;
transition-timing-function 规定过渡频率,默认是 “ease”;
属性值:linear 匀速过渡;ease 慢-快-慢;ease-in 开始慢;ease-out 结束慢;ease-in-out 开始慢,结束慢。
transition-delay 规定过渡效果何时开始,即延时,默认是 0。
- transition可以是div中所有属性的过渡。
transion:all 1s linear 1s;
transion:1s; (简写)
CSS3 3D转换:
rotateX(deg)沿x轴旋转,rotateY(deg)沿y轴旋转。
自定义动画:
@keyframes chbg(自定义名称){
from {background: red;}
to {background: yellow;}
} /*从起始到结束均匀变化*/
@keyframes chbg{
0% {background: green;}
25% {background: yellow;}
50% {background: pink;}
100% {background: blue;}
}
调用: animation:动画名称 执行时间 动画频率 延迟 循环 第二遍是否反向 /以反向开始(eg:从右往左走)
div:hover{
animation: chbg 36s linear 1s infinite alternate/reverse;
}
多媒体查询:(多套CSS)
(1)html:
<link rel="stylesheet" href="phone.css" media="all and (max-width:768px)"/>
<link rel="stylesheet" href="ipad.css" media="all and (min-width:769px) and (max-width:991px)"/>
<link rel="stylesheet" href="pc.css" media="all and (min-width:992px)"/>
/* and 前后一定要用空格隔开!*/
(2) html:
<link rel="stylesheet" href="css.css"/>
css:
@media all and (max-width:768px){
body{
background: yellowgreen;
}
}
@media all and (min-width:769px) and (max-width:992px){
body{
background: pink;
}
}
@media all and (min-width:993px) {
body {
background: blue;
}
}
自定义属性 / 扩展属性:“data-”开头
提取自定义属性:
attr(data-)
CSS3 弹性盒子
具体语法见 : W3Cschool CSS3弹性盒子