空间转换与动画
空间转换主要是利用transform属性进行的在空间层次的位移旋转以及缩放效果,也成为3D转换
位移:
语法 :transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
取值（正负均可）: 像素单位数值 |百分比
透视:[perspective]
主要是改变了视觉感受,视觉上感觉物体距离眼睛有所不同,利用了近小远大概念.一般取值800-1200
旋转:
语法
transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值)
旋转可根据以下法则进行:
但是立体呈现是不可以利用透视的,可以利用 transform-style: preserve-3d呈现3D图形
空间缩放:
语法
transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z)
动画:[由帧构成]
动画和过渡是看似一致的,但是差别很大,动画是可以实现多个状态间的过渡的,过渡过程可控.
动画的应用过程如下:
(1)首先要定义动画
主要有这两种效果
(2)使用动画(调用)
animation:动画名称 动画花费时长;
动画调用其实有很多属性,不过常用的是上面的两个:具体如下:
animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态
动画时长/延迟时间:要加时间单位s
速度曲线:linear:速度从头到尾时间一样 | ease:默认速度变化为低高低 | ease-in:低速开始 | ease-out:低速结束 | ease-in-out:低速开始和结束
重复次数:infinite为无限循环
动画方向:alternate按照定义动画步骤反方向进行
执行完毕时状态:animation-play-state:paused一般和hover一起使用,可以暂停动画
在速度曲线[animation-timing-function]中可以利用steps(数字)进行逐帧动画取值(一般配合精灵图使用,主要是将动画分为了几等份)
如以下案例:实现该人物在原地跑步
实现代码:
<!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>Document</title>
<style>
.box {
width: 140px;
height: 140px;
background-image: url(./06-素材/images/bg.png);
animation: move 10s steps(12);
}
@keyframes move {
from {
background-position: 0 0;
}
to {
background-position: -1680px 0;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
而如果想要不在原地,是向前跑步的话,可以再次定义一个动画并调用
@keyframes move1 {
from {
transform: translate(0px, 0px);
}
to {
transform: translate(600px, 0);
}
}
animation: move 1s steps(12) infinite,
move1 3s ease backwards;(两次调用需要写在一起,不然会发生覆盖)
心形跳动案例:
boby内设置:
<div class="box1">
<div class="left"></div>
<div class="right"></div>
</div>
利用子绝父相进行定位,box1旋转45度,然后left和right为两个圆[box1必须为父亲,不然心形跳动时,形状会更改]
动画定义:
@keyframes xin {
0% {
/* transform: rotateZ(145px); */
}
25% {
transform: rotateZ(45deg) scale(0.8);
}
50% {
transform: rotateZ(45deg) scale(0.5);
}
75% {
transform: rotateZ(45deg) scale(0.8);
}
100% {
transform: rotateZ(45deg) scale(1);
}
}
然后box1中进行调用
animation: xin .5s infinite;
transform: rotateZ(45deg);