-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2019-06-12
来源 ：
阅读 839
评论 0
摘要：本篇文章探讨了HTML5+CSS3从入门到精通之神奇的CSS3（2）动画，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。
本篇文章探讨了HTML5+CSS3从入门到精通之神奇的CSS3（2）动画，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。
<
四、Css3 2D动画
1、2D 转换方法
函数
描述
matrix(n,n,n,n,n,n)
定义 2D 转换，使用六个值的矩阵。
translate(x,y)
定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)
定义 2D 转换，沿着 X 轴移动元素。
translateY(n)
定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)
定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)
定义 2D 缩放转换，改变元素的宽度。
scaleY(n)
定义 2D 缩放转换，改变元素的高度。
rotate(angle)
定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)
定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)
定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)
定义 2D 倾斜转换，沿着 Y 轴。
2、转换属性
Property
描述
CSS
transform
适用于2D或3D转换的元素
3
transform-origin
允许您更改转化元素位置
3
3、形状变换transform
可以实现元素的形状、角度、位置等的变化。
1）rotate(); 以x/y/z为轴进行旋转，默认为z
rotatex(), rotatey(), rotatez(), rotate3d(x, y, z, angle) x, y, z --->矢量
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrapper {
width: 1000px;
height: 200px;
border: 1px solid black;
margin: 100px auto;
}
.item {
margin-right: 30px;
display: inline-block;
width: 200px;
height: 200px;
background: red;
}
.item1 {
/* 沿着X轴旋转45度 */
transform: rotateX(45deg);
}
.item2 {
/* 沿着Y轴旋转45度 */
transform: rotateY(45deg);
}
.item3 {
/* 沿着Z轴旋转45度。默认z轴 */
transform: rotate(45deg);
}
</style>
</head>
<body>
<div>
<div>未旋转</div>
<div class="item item1">沿着X轴旋转45度</div>
<div class="item item2">沿着Y轴旋转45度</div>
<div class="item item3">沿着Z轴旋转45度</div>
</div>
</body>
</html>
实例：钟表摆盘
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.wrapper {
position: relative;
width: 200px;
height: 200px;
border: 1px solid black;
margin: 100px auto;
border-radius: 50%;
}
li{
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
display: inline-block;
transform-origin: 0 100px;
}
span{
/* 必须先改成行级块元素 */
display: inline-block;
}
li:nth-of-type(2){
transform: rotate(30deg);
}
li:nth-of-type(2) span{
transform: rotate(-30deg);
}
li:nth-of-type(3){
transform: rotate(60deg);
}
li:nth-of-type(3) span{
transform: rotate(-60deg);
}
li:nth-of-type(4){
transform: rotate(90deg);
}
li:nth-of-type(4) span{
transform: rotate(-90deg);
}
li:nth-of-type(5){
transform: rotate(120deg);
}
li:nth-of-type(5) span{
transform: rotate(-120deg);
}
li:nth-of-type(6){
transform: rotate(150deg);
}
li:nth-of-type(6) span{
transform: rotate(-150deg);
}
li:nth-of-type(7){
transform: rotate(180deg);
}
li:nth-of-type(7) span{
transform: rotate(-180deg);
}
li:nth-of-type(8){
transform: rotate(210deg);
}
li:nth-of-type(8) span{
transform: rotate(-210deg);
}
li:nth-of-type(9){
transform: rotate(240deg);
}
li:nth-of-type(9) span{
transform: rotate(-240deg);
}
li:nth-of-type(10){
transform: rotate(270deg);
}
li:nth-of-type(10) span{
transform: rotate(-270deg);
}
li:nth-of-type(11){
transform: rotate(300deg);
}
li:nth-of-type(11) span{
transform: rotate(-300deg);
}
li:nth-of-type(12){
transform: rotate(330deg);
}
li:nth-of-type(12) span{
transform: rotate(-330deg);
}
</style>
</head>
<body>
<div>
<ul>
<li><span>12</span></li>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
<li><span>10</span></li>
<li><span>11</span></li>
</ul>
</div>
</body>
</html>
2）scale(); 以x/y为轴进行缩放
scale(x, y) 接受两个值，如果第二参数未提供，则第二个参数使用第一个参数的值
scalex(),scaley()值是数字表示倍数，不加任何单位，scale3d()，scale3d(sx,sy,sz)
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrapper {
width: 800px;
height: 100px;
border: 1px solid black;
margin: 100px auto;
}
.item {
display: inline-block;
width: 100px;
height: 100px;
background: red;
border: 1px solid black;
margin-right:50px;
}
.item1 {
/* 沿着X轴缩放1倍 */
transform: scaleX(2);
}
.item2 {
/* 沿着Y轴缩放1倍 */
transform: scaleY(2);
}
.item3 {
/* x、y轴都缩放1倍 */
transform: scale(2);
}
</style>
</head>
<body>
<div>
<div>未缩放</div>
<div class="item item1">沿着X轴缩放1倍</div>
<div class="item item2">沿着Y轴缩放1倍</div>
<div class="item item3">scale(2),x、y轴都缩放1倍</div>
</div>
</body>
</html>
3）skew(); 对元素进行倾斜扭曲
skew(x, y);接受两个值，第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewx(), skewy()
4）translate(); 可以移动距离,相对于自身位置。
translate(x, [y])
translatex(),translatey(),translatez(),translate3d(x, y, z)
实例：
.item1{
transform: translateX(100px);
}
.item2{
transform: translateY(100px);
}
实例：块元素水平垂直居中显示，元素宽高未知
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrapper{
position: relative;
width: 1000px;
height: 600px;
margin: 0 auto;
border: 1px solid black;
}
.box{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<div>你好</div>
</div>
</body>
</html>
4、transform-origin 变换原点
任何一个元素都有一个中心点，默认情况下，其中心点是居于元素x轴和y轴的50%处，如图：
也可以取下述值：
5、transition：过渡动画
语法：transition：ele time function delay；
transition 属性是css3的一个复合属性，主要包括一下几个子属性
transition-property:指定过渡或动态模拟的css属性
transition-duration:指定过渡所需要的时间
transition-timing-function:指定过渡函数
transition-delay:指定开始出现的延迟时间
下列为过渡动画可以参与过渡的属性：
transition 速录函数可以选择的值:
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
width: 800px;
height: 100px;
border: 1px solid black;
margin: 100px auto;
}
.item {
display: inline-block;
width: 100px;
height: 100px;
background: red;
border: 1px solid black;
margin-right: 50px;
transition: 3s linear;
}
span:hover + div{
transform: rotate(45deg)
}
</style>
</head>
<body>
<div>
<span>hover此处 ，动画开始:</span>
<div>带有过渡的动画</div>
</div>
</body>
</html>
实例：点击具体item切换显示图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.wrapper {
position: relative;
width: 600px;
height: 300px;
border: 1px solid black;
margin: 0 auto;
}
.wrapper .item {
width: 50px;
background: deeppink;
padding: 3px;
text-align: center;
margin-top: 50px;
margin-left: 10px;
border-radius: 10px;
box-shadow: 2px 3px 8px 3px #666;
}
.wrapper img {
position: absolute;
top: 0;
left: 50px;
width: 400px;
height: 300px;
opacity: 0;
transition: all 1s linear;
border-radius: 20px;
}
.item1:hover + img {
left: 100px;
opacity: 1;
}
.item2:hover + img {
left: 130px;
opacity: 1;
}
.item3:hover+img {
left: 130px;
opacity: 1;
}
</style>
</head>
<body>
<div>
<div class="item item1">dog1</div>
<img src="./dog1.jpg">
<div class="item item2">dog2</div>
<img src="./dog2.jpg">
<div class="item item3">dog3</div>
<img src="./dog3.jpg">
</div>
</body>
</html>
6、动画animation
animation 属性为css3的复合属性，主要包括以下子属性
1)animation-name: 此属性为执行动画的 keyframe 名
2)animation-duration: 此属性为动画执行的时间
3)animation-timing-function: 指定过渡函数速率
4)animation-delay: 执行延迟时间
5)animation-direction: normal/reverse/alternate/alternate-reverse;
（要用来设置动画播放方向：normal：默认值。动画按正常播放。reverse：动画反向播放。alternate：动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。alternate-reverse：动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。）
6)animation-iteration-count:infinite/number;
（主要用来定义动画的播放次数。n 播放次数，infinite 无限次）
7)animation-fill-mode: none/forwards/backwards;
（定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none:默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处。forwards: 表示动画在结束后继续应用最后的关键帧的位置。backwards:会在向元素应用动画样式时迅速应用动画的初始帧。both:元素动画同时具有forwards和backwards效果）
8)animation-play-state:runing/pasued;
（主要用来控制元素动画的播放状态。running 播放，paused 暂停）
7、关键帧@keyframes
animation 动画会按照keyframes 关键帧里面指定的帧状态而过渡执行。
0% - 100% 代表动画的时间过渡
@keyframes demoMove{
0%{ background-color:red;}
10%{ background-color:green;}
20%{ background-color:white;}
50%{ width:200px;}
100%{ height:200px;}
}
帧频里面如果只有 0% 和 100%两个关键帧，那么可以用 from to 代替
@keyframes demoMove{
from{ background-color:red;}
to{ height:200px;}
}
实例：方块运动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrapper {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
border: 1px solid black;
}
.demo {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: red;
animation: move 4S linear infinite;
}
@keyframes move {
25% {
left: 200px;
top: 0;
background: green;
}
50% {
left: 200px;
top: 200px;
background: pink;
}
75% {
left: 0;
top: 200px;
background: blue;
}
100% {
left: 0;
top: 0;
background: red;
}
}
</style>
</head>
<body>
<div>
<div id="demo"></div>
</div>
</body>
</html>
实例：网页云音乐转盘
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
/* border: 1px solid black; */
}
button{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 150px;
color: #fff;
font-size: 20px;
padding: 15px;
background: red;
}
.table{
width: 200px;
height: 200px;
border: 50px solid black;
border-radius: 50%;
animation: turn 5s linear infinite paused;
background: url('./dog1.jpg');
background-size: 100% 100%;
}
.pian{
position: absolute;
left: 50%;
top: -70px;
transform: translateX(-50%);
width: 10px;
height: 150px;
background: orchid;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
transform-origin: top;
transform: rotate(-60deg);
}
.active{
transform: rotate(-30deg);
}
@keyframes turn{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<button id = "btn">播放/停止</button>
<div>
<div></div>
<div></div>
</div>
<script>
var oTable = document.getElementsByClassName('table')[0];
var oPian = document.getElementsByClassName('pian')[0];
var flag = true;
btn.onclick = function(){
if(flag){
flag = false;
oTable.style.animationPlayState = "running";
oPian.className = "pian active"
}else{
oTable.style.animationPlayState = "paused";
oPian.className = "pian"
flag = true;
}
}
</script>
</body>
</html>
五、Css3 3D动画
1、3D转换方法
函数
描述
matrix3d(n,n, n,n,n,n ,
n,n,n ,n,n,n, n,n,n,n )
定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)
定义 3D 转化。
translateX(x)
定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)
定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)
定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)
定义 3D 缩放转换。
scaleX(x)
定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)
定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)
定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)
定义 3D 旋转。
rotateX(angle)
定义沿 X 轴的 3D 旋转。
rotateY(angle)
定义沿 Y 轴的 3D 旋转。
rotateZ(angle)
定义沿 Z 轴的 3D 旋转。
perspective(n)
定义 3D 转换元素的透视视图。
2、转换属性
属性
描述
CSS
transform
向元素应用 2D 或 3D 转换。
3
transform-origin
允许你改变被转换元素的位置。
3
transform-style
规定被嵌套元素如何在 3D 空间中显示。
3
perspective
规定 3D 元素的透视效果。
3
perspective-origin
规定 3D 元素的底部位置。
3
backface-visibility
定义元素在不面对屏幕时是否可见。
3
3、transform-style
transform-style: flat|preserve-3d;
flat: 默认，子元素将不保留其 3D 位置
preserve-3d : 子元素将保留其 3D 位置。
注意：transform-style 属性需要设置在父元素中, 高于任何嵌套的变形元素。设置了transform-style:preserve-3d的元素，就不能防止子元素溢出设置overflow：hidden；否则会导致preserve-3d失效。
4、perspective——景深
以简单的把perspective理解成人距离显示器的距离，此值越大的效果越差，越小效果越好。假设你距离100米和1米的距离去看一个边长一米的正方体。
重点记住perspective的值要大于3d物体的值。
①perspective: 600px ;默认值none：物体距离人眼的距离是600px;
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrapper{
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px solid #333;
transform-style: preserve-3d;
/* perspective: 600px; */
}
.item{
width: 200px;
height: 200px;
background: red;
transform: rotateX(45deg);
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>
没有景深：
有景深：
perspective: 600px;
②perspective-origin:默认值是50% 50%
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrapper{
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px solid #333;
transform-style: preserve-3d;
perspective: 600px;
/* 改变视角 */
perspective-origin: top;
}
.item{
width: 200px;
height: 200px;
background: red;
transform: rotateX(90deg);
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>
当有多个变形元素时，把景深设置到父元素上时，只有一个透视点；把景深设置到子元素上时，每一个变形元素都有一个透视点。
实例：父元素设置景深
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrapper{
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px solid #333;
transform-style: preserve-3d;
perspective: 600px;
/* 改变视角 */
perspective-origin: top;
}
.item{
width: 200px;
height: 200px;
background: red;
transform: rotateX(75deg);
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
实例：子元素设置景深
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrapper{
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px solid #333;
transform-style: preserve-3d;
/* 改变视角 */
perspective-origin: top;
}
.item{
width: 200px;
height: 200px;
background: red;
transform: perspective(600px) rotateX(75deg);
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
5、backface-visibility: visible | hidden
在元素运动过程中，能否展示元素的背面
实例：可见
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrapper{
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px solid #333;
transform-style: preserve-3d;
/* 改变视角 */
perspective-origin: top;
}
.item{
width: 200px;
height: 200px;
background: red;
transform: perspective(600px) rotateX(100deg);
backface-visibility: visible;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>
实例：不可见
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrapper{
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px solid #333;
transform-style: preserve-3d;
/* 改变视角 */
perspective-origin: top;
}
.item{
width: 200px;
height: 200px;
background: red;
transform: perspective(600px) rotateX(100deg);
backface-visibility: hidden;
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</body>
</html>
6、3d变化是二人转：元素在转，坐标轴其实也在转
两个相同的元素, 其中一个设置了rotateX(90deg), 另一个设置rotateX(-90deg)，然后同时设置translateZ(100px)；这时, 他们在空间的距离是200px, 而不是0;
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrapper {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px solid #333;
transform-style: preserve-3d;
perspective-origin: center;
perspective: 600px;
}
.item1 {
position: absolute;
top: 0;
width: 200px;
height: 200px;
background: red;
transform: rotateX(90deg) translateZ(100px);
}
.item2 {
position: absolute;
top: 0;
width: 200px;
height: 200px;
background: green;
transform: rotateX(-90deg) translateZ(100px);
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
</div>
</body>
</html>
实例：旋转照片墙
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrapper{
position: relative;
transform-style: preserve-3d;
width: 200px;
height: 200px;
margin: 200px auto;
animation: turn 4s linear reverse infinite;
}
.wrapper div{
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 180px;
line-height: 200px;
opacity: 0.5;
text-align: center;
color: #fff;
font-size: 30px;
background: red;
}
.wrapper .item1{
background: red;
transform: rotateY(0deg) translate3d(0,0,200px);
}
.wrapper .item2{
background: green;
transform: rotateY(60deg) translate3d(0,0,200px);
}
.wrapper .item3{
background: orange;
transform: rotateY(120deg) translate3d(0,0,200px);
}
.wrapper .item4{
background: deepskyblue;
transform: rotateY(180deg) translate3d(0,0,200px);
}
.wrapper .item5{
background: deeppink;
transform: rotateY(240deg) translate3d(0,0,200px);
}
.wrapper .item6{
background: purple;
transform: rotateY(300deg) translate3d(0,0,200px);
}
@keyframes turn{
0%{
transform: rotateX(-20deg) rotateY(0deg);
}
100%{
transform: rotateX(-20deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
六、Css 3 动画性能优化
1. 尽可能多的利用硬件能力，如使用3D变形来开启GPU加速
注意：如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack：
如下面一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性:
注：3D变形会消耗更多的内存与功耗，应确实有性能问题时才去使用它，兼在权衡
2. 尽可能少的使用box-shadows与gradients, 这两个都是页面性能杀手，能避免尽量避免。
3. 尽可能的让动画元素不在文档流中，以减少重排。
4. 优化 DOM reflow
实例：立方体旋转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.wrapper{
position: relative;
transform-style: preserve-3d;
width: 200px;
height: 200px;
margin: 200px auto;
animation: turn 5s linear infinite;
}
.wrapper div{
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
line-height: 200px;
opacity: 0.5;
text-align: center;
color: #fff;
font-size: 30px;
background: red;
}
.wrapper .item1{
background: red;
transform: rotateX(0deg) translate3d(0,0,100px);
}
.wrapper .item2{
background: deepskyblue;
transform: rotateX(180deg) translate3d(0,0,100px);
}
.wrapper .item3{
background: green;
transform: rotateY(90deg) translate3d(0,0,100px);
}
.wrapper .item4{
background: orange;
transform: rotateY(-90deg) translate3d(0,0,100px);
}
.wrapper .item5{
background: deeppink;
transform: rotateX(90deg) rotateZ(90deg) translate3d(0,0,100px);
}
.wrapper .item6{
background: purple;
transform: rotateX(-90deg) rotateZ(90deg) translate3d(0,0,100px);
}
@keyframes turn{
0%{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
25%{
transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
}
50%{
transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);
}
75%{
transform: rotateX(270deg) rotateY(270deg) rotateZ(270deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
</style>
</head>
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
