空间(3d)转换 tramsform: 值 ;
移动 tramsform:translate3d(x,y,z);
- 添加位移属性
transform: translate3d(x轴, y轴, z轴); - 给盒子父元素添加(perspective视距)视距,实现Z轴转换
- 视距
perspective:值;人眼到屏幕的距离,一半约800px-1200px
body {
/* 视距,是屏幕距眼睛的距离,添加到父元素上, 一般是800px-1200px */
perspective: 1000px;
}
.box {
width: 200px;
height: 200px;
background-color: #ccc;
margin: 200px auto;
transition: all 1s;
}
.box:hover {
transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(200px);
/* transform: translate3d(x轴, y轴, z轴); */
transform: translate3d(100px, 100px, 100px);
}
旋转 rotateX() rotateY() rotateZ()
左手法则 ： 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
- 旋转属性:
transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg); - 旋转属性连写:
rotate3d(x,y,z,度数)x,y,z取值0-1
立体呈现
给父元素添加 transform-style:preserve-3d; 使子元素处于3d空间
<head>
<style>
.box {
position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
/* 使子元素处于真正的3d空间,添加到父元素上 */
transform-style: preserve-3d;
transition: all 3s;
}
.box:hover {
transform: rotateY(360deg);
}
.box div {
position: absolute;
width: 100%;
height: 100%;
}
.front {
background-color: skyblue;
}
.back {
background-color: pink;
transform: translateZ(-300px);
}
</style>
</head>
<body>
<div class="box">
<div class="back">后面</div>
<div class="front">前面</div>
</div>
</body>
动画 animation 多个状态间的变化过程,动画过程可控
使用动画
- 定义动画
@keyframes 动画名称 {} - 调用动画
animation : 值 ;
.box {
width: 200px;
height: 200px;
background-color: #f00;
border-radius: 50%;
/* 2.调用动画 */
animation: move 1s infinite;
}
/* 1.定义动画 */
@keyframes move {
/* 可以使用百分比来设置每个时刻的状态
0% { */
from {
transform: translate(0);
}
/* 100% { */
to {
transform: translate(500px);
}
}
动画属性 animation-
animation-name: 值 ;调用动画的名称animation-duration : 值 ;动画播放的时长animation-delay : 值 ;延迟 动画等待多久执行animation-fill-mode : 值 ;forwards停在最后一帧backwards默认值 停在第一帧animation-timing-function : 值 ;linear 匀速 速度曲线animation-iteration-count : 值 ;写数值表示播放次数infinite循环播放animation-direction : 值 ;动画执行方向alternate反向播放 逆播animation-play-state : 值 ;动画暂停paused暂停
动画属性复合写法 (动画属性连写) animation: 名称 时长 延迟...
- 动画名称和时长必须写,其他的不写取默认值
- 出现2个时间,前边的是时长,后边的延迟
animation: move 1s 1s infinite alternate linear;
速度曲线补充 animation-timing-function: 值 ;
steps(N)步长, 动画分成 N 等份, 逐帧动画steps实现逐帧动画， 值等于小图数量,移动的距离是图片宽度
/* 补间动画 */
animation: second 60s infinite;
/* 逐帧动画 steps() 动画步长,动画分成多少份执行 */
animation: second 60s infinite steps(60);
原生 DOM 简易时钟体验逐帧动画代码:https://github.com/jiang-zi
多组动画可以一起写 ,用逗号隔开
animation: 动画名1 1s infinite steps(12), 动画名2 4s linear forwards, 动画名3 ... ;
精灵动画 （逐帧动画配合精灵图实现）
精灵动画制作步骤
-
准备显示区域 ： 设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
-
定义动画 ： 改变背景图的位置（移动的距离就是精灵图的宽
-
使用动画 ：
- 添加速度曲线steps(N)，N与精灵图上小图个数相同
- 添加无限重复效果
.box {
/* 盒子大小是图片的宽度/小图片的数量 */
width: 140px;
height: 140px;
border: 1px solid #000;
background: url(精灵图路径) 0 0;
/* 精灵动画 steps(小图片的数量) */
animation: run 1s infinite steps(12);
}
@keyframes run {
0% {
background-position: 0 0;
}
100% {
/* 背景定位移动的距离是图片的宽度 */
background-position: -1680px 0;
}
}
业务中常用属性3 ：
- 给 html 标签添加
hight :100% ;参考浏览器视口高度 - 逐帧动画：帧动画。业务中，一般配合精灵图实现动画效果。
