验证中...
Languages: HTML/CSS
Categories: CSS 技巧
Latest update 2019-03-23 11:04
gistfile1.txt
Raw Copy
#2D
transform属性(IE9+)
#平移
transform:translate(20px); /* 向右平移20px */
transform:translate(20px,30px); /* 向右平移20px,向下平移30px */
transform:translate(20px,-5px); /* 向右平移20px,向上平移5px */
#旋转
transform:rotate(30deg); /* 顺时针旋转30度 */
transform:rotate(-30deg); /* 逆时针旋转30度 */
transform:rotate(3turn); /* 顺时针旋转3圈 */
#缩放
transform:scale(1.5); /*原始宽度乘以1.5*/
transform:scale(1.5,0.5); /*原始宽乘以1.5,原始高乘以0.5*/
#倾斜
transform:skewX(45deg); /*水平方向倾斜45度*/
transform:skewY(45deg); /*垂直方向倾斜45度*/
#旋转基点
transform-origin:20% 100%; /*基点在水平方向20%,垂直方向100%*/
#过渡
transition(IE10+)
transition-property:属性名 or all; /*过渡属性,all表示全部属性*/
transition-duration: 20s or 20ms; /*执行时间,秒和毫秒单位*/
transition-delay:3s; /*等待时间,秒和毫秒单位*/
transition-timing-function:ease; /* 时间曲线 */
linear: 线性过渡。
ease: 平滑过渡(默认)
ease-in: 由慢到快。
ease-out: 由快到慢。
ease-in-out: 由慢到快再到慢。
transition: 属性名 20ms 3s ease; /*组合写法*/
#3D
分3层:
<div class="camera">
<div class="space">
<div class="box"></div>
</div>
</div>
.camera{
perspective:800px; /* 视点到元素的距离,500-1200 */
perspective-origin:center center; /*视点看元素的位置*/
}
.space{
transform-style:preserve-3d; /*指定子元素定位在三维空间内 */
}
.box{
transform:rotateX(30deg); /*横轴旋转(正数顺时针)*/
transform:rotateZ(30deg); /*Z轴旋转(正数顺时针)*/
transform:rotateY(30deg); /*Y轴旋转(负数顺时针)*/
transform:translateZ(30px); /*Z轴平移(数字越大,离我们越近)*/
}
#动画
1. 定义关键帧
@keyframes WC{
from{width:100px;}
40%{width:200px;}
to{width:300px;}
}
2. 给元素设置关键帧动画
div{
animation-name:WC;
animation-duration:30s; /*时长*/
animation-timing-function: ease; /* 时间曲线(ease,linear,ease-in,ease-out,ease-in-out)*/
animation-delay:2s; /*等待时间*/
animation-iteration-count: infinite; /* 执行动画次数,infinite代表无限次 */
animation-direction:normal; /*normal(正常顺序);reverse(倒序);alternate(先正后倒);alternate-reverse(先倒后正)*/
}
div:hover{
animation-play-state:paused; /*暂停动画*/
}

Comment list( 0 )

You need to Sign in for post a comment

Help Search