目录
一、空间转换
1、空间转换介绍
- 空间:是从坐标角度定义的。x、y和z三条坐标轴构成了一个立体空间,z轴位置与实现方向相同
- 空间转换也叫3D转换
2、空间位移
语法:
- transform:translate3d(x,y,z);
- transform:translateX(值);
- transform:translateY(值);
- transform:translateZ(值);
3、透视
语法:
- perspective:值;
- 取值:像素单位数值,数值一般在800-1200之间
- 透视距离也称为视距,所谓的视距就是人的眼睛到屏幕的距离
注意点:
- 属性(添加给父级)
作用:
- 空间转换时,为元素添加近大远小、近实远虚的视距效果
4、空间旋转
语法:
- 按X轴进行旋转:transform:rotataX(值);
- 按Y轴进行旋转:transform:rotataY(值);
- 按Z轴进行旋转:transform:rotataZ(值);
小技巧:
- 左手法则:判断旋转方向:左手握住旋转轴,木质只想正值方向,手指弯曲方向为旋转正值方向
5、立体呈现
实现方法:
- 添加transform-style:preserve-3d;
- 使子元素处于真正的3d空间
- 默认值flat,表示子元素处于2D平面内呈现
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>立体呈现</title>
<style>
/* 默认盒子没有移动的时候, 盒子处于立方体的中间的 */
.cube {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
/* background-color: pink; */
transition: all 2s;
transform-style: flat; /* 2D平面呈现 */
/* 让子级处于真正的3d空间呈现 */
transform-style: preserve-3d;
}
.cube div {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
}
.front {
background-color: orange;
transform: translateZ(100px);
}
.back {
background-color: green;
transform: translateZ(-100px);
}
/* 旋转, 看效果 */
.cube:hover {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="cube">
<div class="front">前面</div>
<div class="back">后面</div>
</div>
</body>
</html>
展示效果:当我们鼠标放在图像上面的时候就可以看到对应的立体效果了
6、空间缩放
语法:
- transform:scaleX(倍数);
- transform:scaleY(倍数);
- transform:scaleZ(倍数);
- transform:scale3d(x,y,z);
注意点:
- 空间缩放是基于立方体的
二、动画
1、动画的介绍
- 动画的本质是快速切换大量图片时在人脑中形成的具有连续性的动画
- 构成动画的最小单元:帧或动画帧
过渡和动画的使用场景:
- 过渡只能实现2个状态间的变化过程
- 动画可以实现多个状态间的变化过程,动画过程可控(重复播放、最终画面、是否暂停)
2、动画的使用
实现步骤:
(1)定义动画
定义动画有2种方式
- 2个动画
- 多个动画(其中百分比代表动画总时长的比例)
(2)使用动画
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画实现步骤</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: pink;
animation: change 1s;
}
/* 一. 定义动画:从200变大到600 */
/* @keyframes change {
from {
width: 200px;
}
to {
width: 600px;
}
} */
/* 二. 定义动画:200 到 500*300 到 800*500 */
/* 百分比表示的是占用动画时长的百分比 */
@keyframes change {
0% {
width: 200px;
}
30% {
width: 500px;
height: 300px;
}
100% {
width: 800px;
height: 500px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
3、动画属性
使用animation相关属性控制动画执行过程
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation复合属性</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: skyblue;
/* linear 速度曲线: 匀速 */
animation: change 1s linear;
/* 第二个时间表示延迟时间 */
animation: change 1s 2s;
/* 3:播放次数; infinite: 无限循环 */
animation: change 1s 3;
animation: change 1s infinite;
/* alternate: 反向 */
animation: change 1s infinite alternate;
/* 播放完毕时的状态, 删除掉infinite alternate */
/* backwards: 默认值, 动画停留在开始的状态 */
animation: change 1s backwards;
/* forwards: 动画停留在结束的状态 */
animation: change 1s forwards;
}
@keyframes change {
from {
width: 200px;
}
to {
width: 600px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
注意:
- 动画名称和动画时长必须赋值
- 取值不分先后顺序
- 如果有2个时间值,第一个时间表示动画时长,第二个时间表示延迟时间
拆分属性:(一般直接写上面的复合属性)
其中animation-timing-function:step(N);代表的是逐帧动画,在开发中一般配合精灵图来使用,可以将动画等分成N份
精灵动画制作步骤:
1.准备显示区域
- 设置盒子尺寸是一张小图的尺寸,背景图为当前精灵图
2.定义动画
- 改变背景图的位置(移动的距离就是精灵图的宽度)
3.使用动画
- 添加速度曲线steps(N),N与精灵图上小图的个数相同
- 添加无线重复效果
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>精灵动画</title>
<style>
.box {
/* 1680/12 */
/***** 盒子的尺寸和一个精灵小图的尺寸是一样 */
width: 140px;
height: 140px;
/* border: 1px solid #000; */
background-image: url(./images/精灵图.png);
/* steps(10) : 数字和精灵小图的个数是一样的 */
animation:
run 2s steps(10) infinite,
move 3s forwards
;
/* animation: ; */
}
/* 定义动画: 让背景图向左移动 */
@keyframes run {
from {
background-position: 0 0;
}
to {
background-position: -1680px 0;
}
}
/* 定义动画: 位移 */
@keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(600px);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>