动画
/* 1. 定义的动画 */
@keyframes dance {
from {
transform: scale(1)
}
to {
transform: scale(1.5)
}
}
或者是
/* 1. 定义的动画 */
@keyframes dance {
0% {
transform: scale(1)
}
100% {
transform: scale(1.5)
}
}
调用
img {
width: 200px;
/* 2. 使用动画 animation: 动画名称 执行时间; infinite 循环*/
animation: dance .5s infinite;
}
动画属性
-
动画名字参照css类选择器命名
-
动画时长和延迟时间别忘了带单位 s
-
infinate 无限循环动画(重复次数)
-
alternate 为反向 就是左右来回执行动画(跑马灯)
-
forwards 动画结束停留在最后一帧状态, 不循环状态使用
-
linear 让动画匀速执行
鼠标经过动画暂停效果
/* 鼠标经过box, 则 ul 停止动画 */
.box:hover ul {
animation-play-state: paused;
}
3D
一定要记住3个坐标轴取值的正反:
X 轴 往右越大,是正值, 否则反之
Y 轴 往下越大,是正值,否则反之
Z轴 (指向我们)越大,是正值,否则反之
3D位移
transform: translate3d(x, y, z);
transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);
透视
透视的作用: 空间转换时,为元素添加近大远小、近实远虚的视觉效果
perspective: 800px;
透视注意事项:
-
取值范围经常在 800px ~ 1200px 之间。
-
一定给父亲添加
-
透视距离也称为视距,所谓的视距就是人的眼睛到屏幕的距离。
-
其中 d 为透视的距离
-
z 是
translateZ
的距离, 这个距离靠近我们,盒子越大
-
3D旋转
rotateX
body {
/* 父级添加透视 */
perspective: 400px;
}
img {
transition: all 1s;
}
img:hover {
transform: rotateX(360deg);
}
rotateY
body {
perspective: 400px;
}
img {
transition: all 1s;
}
img:hover {
transform: rotateY(360deg);
}
左手法则
规则:
-
大拇指指向X轴正向方(右), 则四指指向的方向是旋转的方向
-
大拇指指向Y轴正向方(下), 则四指指向的方向是旋转的方向