一、过渡（transition）
1.1 transition-property：指定要执行过渡的属性
1.2 transition-duration: 指定过渡效果的特效时间
1.3 transition-timing-function 过渡的时序函数
1.4 transition-delay：过渡前需等待的时间
1.5 例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>过渡</title> <style> *{ margin: 0; padding: 0; } .box1{ width: 800px; height: 600px; background-color: silver; } .box1 div{ width: 100px; height: 100px; } .box2{ background-color: orange; margin-bottom: 100px; /* 过渡（transition） - 通过过渡可以指定一个属性发生变化时的切换方式 - 通过位移可以创建一些非常好的效果，提升用户的体验 */ /* transition: all 2s; */ /* transition-property：指定要执行过渡的属性 多个属性（height，width...）间用","隔开 如果所有属性都需要过渡，则使用all 大部分属性都支持过渡效果，注意：过渡时必须从一个有效数值 到另一个有效数值 */ transition-property: all; /* transition-duration: 指定过渡效果的特效时间 */ transition-duration: 2s; /* transition-timing-function 过渡的时序函数 - 指定过渡的执行方式 可选值： case：默认值，慢速开始，先加速，再减速 linear：匀速运动 ease-in：加速运动 ease-out：减速运动 ease-in-out：先加速，后减速 cubic-bezier()：未指定时序函数(贝塞尔曲线) https://cubic-bezier.com steps()：分步执行过渡效果 可以设置第二个值： end：在时间结束时执行过渡（默认值） start：在时间开始时执行过渡 */ transition-timing-function: cubic-bezier(.32,1.6,.69,-1.05); /* transition-timing-function: steps(2, start); */ /* transition-delay：过渡前需等待的时间 */ transition-delay: 1s; } .box3{ background-color: #bfa; transition: all 2s; } .box1:hover div{ /* 200px; height: 200px; background-color: skyblue; */ margin-left: 700px; } </style> </head> <body> <div class="box1"> <div class="box2"></div> <div class="box3"></div> </div> </body> </html>
注：以上的效果只有在鼠标移入的时候才会发生，不符合用户预期使用，所以我们需要动画来制作。
二、动画（animation）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动画</title> <style> .box1{ width: 800px; height: 600px; background-color: silver; } .box2{ width: 100px; height: 100px; background-color: orange; /* 设置box2的动画 */ /* animation-name：要对当前元素生效的关键帧的名字 */ animation-name: test; /* animation-duration：动画执行时间 */ animation-duration: 3s; /* animation-delay：动画延迟时间 */ animation-delay: 2s; animation-timing-function: ease-in-out; /* animation-iteration-count：动画执行的次数 - 次数 - infinite 无限执行 */ animation-iteration-count: 2; /* animation-direction：指定动画运行方向 normal：默认值，从 from 向 to 运行，每次如此 reverse：从 to 向 from 运行，每次如此 alternate：从 from 向 to 运行，重复执行动画时反向执行 alternate-reverse：从 to 向 from 运行，重复执行动画时反向执行 */ /* animation-direction: alternate; */ /* animation-play-state：设置动画的执行状态 - running：默认值，动画执行 - paused：动画暂停 */ /* animation-play-state: paused; */ /* animation-fill-mode：动画填充模式 - none：默认值，动画执行完毕，元素回到原来位置 - forwards：动画执行完毕，元素会停止在动画结束的位置 - backwards：动画延时等待时，元素就会处于开始位置 - both：结合了forwards和backwards */ animation-fill-mode: both; } /* 动画： 动画和过渡类似，都可以实现一些动态效果 - 不同：过渡需要在某个属性发生变化时才会触发 动画可以自动触发动态效果 设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行的每个步骤 */ @keyframes test{ /* from表示动画的开始位置，也可以使用0% */ from{ margin-left: 0; } /* to表示动画的结束位置，也可以使用100% */ to{ margin-left: 700px; } } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>
2.1 动画（sprite animation——>搜图）
2.2 小球运动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ball</title> <style> .outer{ height: 700px; border-bottom: 10px solid black; /* 由于父子元素相邻的外边距，子元素的会传递给父元素（上边距） 导致垂直外边距重叠 可以开启BFC */ overflow: hidden; } .outer div{ width: 50px; height: 50px; background-color: red; border-radius: 50%; float: left; margin: 0 5px; animation: ball 2s ease-in forwards infinite alternate; } /* .ball2权重比 .outer div 低，故不能覆盖，得增加权重 */ div.ball2{ background-color: lawngreen; animation-delay: .1s; } div.ball3{ background-color: rgb(210, 255, 255); animation-delay: .2s; } div.ball4{ background-color: orange; animation-delay: .3s; } div.ball5{ background-color: skyblue; animation-delay: .4s; } div.ball6{ background-color: pink; animation-delay: .5s; } div.ball7{ background-color: purple; animation-delay: .6s; } div.ball8{ background-color: hotpink; animation-delay: .1s; } div.ball9{ background-color: yellow; animation-delay: .2s; } div.ball10{ background-color: rgba(0, 130, 252, 0.753); animation-delay: .3s; } div.ball11{ background-color: rgba(235, 252, 0, 0.521); animation-delay: .4s; } div.ball12{ background-color: rgba(252, 151, 0, 0.753); animation-delay: .5s; } @keyframes ball{ from{ margin-top: 0; } 20%, 60%, to{ margin-top: 650px; animation-timing-function: ease-in; } 40%{ margin-top: 80px; } 80%{ margin-top: 200px; } } </style> </head> <body> <div class="outer"> <div class="ball"></div> <div class="ball2"></div> <div class="ball3"></div> <div class="ball4"></div> <div class="ball5"></div> <div class="ball6"></div> <div class="ball7"></div> <div class="ball8"></div> <div class="ball9"></div> <div class="ball10"></div> <div class="ball11"></div> <div class="ball12"></div> </div> </body> </html>
三、变形（transform）
3.1 平移translate（不占位）
① translateX()：沿着x轴方向平移
② translateY()：沿着y轴方向平移
③ translateZ()：沿着z轴方向平移
使用z轴需要设置网页的视距
/* 设置当前网页的视距为800px，人眼距离网页的距离 */
perspective: 800;
百分比：相对于自身移动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>变形——平移</title> <style> html{ /* 视距 */ perspective: 800px; } .box1{ width: 200px; height: 200px; background-color: teal; margin: 100px auto; /* transform: translateX(200px); */ /* transform: translateY(100%); */ /* transform: translate(200px, 100%); */ /* z轴平移，调整元素在z轴的位置 正常情况：调整元素和人眼间的距离，距离越大，元素离人越近 z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视， 故需要设置视距 */ transform: translateZ(200px); } .box2{ width: 230px; height: 300px; background-color: orange; /* 过渡效果，显得更加自然 */ transition: all .2s; } .box2:hover{ /* box-shadow: 水平方位 垂直方位 模糊程度 颜色 */ box-shadow: 8px 4px 10px #999; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
3.2 旋转（rotate）
① rotateX(xxdeg)
② rotateY(xxtturn)
③ rotateZ(xxdeg)
单位：deg、turn
3.2.1 钟表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>钟表</title> <style> .clock{ width: 400px; height: 400px; /* border: 8px solid black; */ border-radius: 50%; /* 设置背景图片 */ background-image: url("./img/clock.jpg"); background-size: contain; margin: 0 auto; margin-top: 100px; position: relative; } /* 居中代码 */ .sec-wrapper, .min-wrapper, .hour-wrapper{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } /* 时针 */ .hour-wrapper{ width: 60%; height: 60%; animation: run 7200s linear infinite; } .hour{ width: 6px; height: 50%; background-color: black; margin: 0 auto; } /* 分针 */ .min-wrapper{ width: 70%; height: 70%; animation: run 600s steps(60) infinite; } .min{ width: 4px; height: 50%; background-color: black; margin: 0 auto; } /* 秒针 */ .sec-wrapper{ width: 88%; height: 88%; /* background-color: #fba; */ animation: run 10s steps(60) infinite; } .sec{ width: 2px; height: 50%; background-color: red; margin: 0 auto; } @keyframes run { from{ transform: rotateZ(0); } to{ transform: rotateZ(1turn); } } </style> </head> <body> <div class="clock"> <!-- 由于旋转默认是中心旋转，而钟表的旋转点不是中心点 解决： ① 在表针外添加一个div，让其进行旋转（推荐） ② 设置旋转原点(原点不好控制) ③ 遮住表针的一半（不推荐） --> <div class="hour-wrapper"> <div class="hour"></div> </div> <div class="min-wrapper"> <div class="min"></div> </div> <div class="sec-wrapper"> <div class="sec"></div> </div> </div> </body> </html>
3.2.2 立方体
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>cube</title> <style> /* 设置视距，一般800-1000px */ html{ perspective: 800px; } .cube{ width: 200px; height: 200px; /* background-color: green; */ margin: 150px auto; position: relative; /* 设置3d效果 */ transform-style: preserve-3d; animation: turn 4s linear alternate infinite; } @keyframes turn{ to{ transform: rotateY(1.5turn) rotateZ(82deg) rotateX(60deg); } } .cube img{ width: 200px; height: 200px; position: absolute; top: 0; left: 0; opacity: .7; } .cube_01{ transform: rotateY(90deg) translateZ(-100px); } .cube_02{ transform: rotateY(-90deg) translateZ(-100px); } .cube_03{ transform: rotateX(-90deg) translateZ(-100px); } .cube_04{ transform: rotateX(90deg) translateZ(-100px); } .cube_05{ transform: translateZ(-100px); } .cube_06{ transform: translateZ(100px); } </style> </head> <body> <div class="cube"> <img class="cube_01" src="./img/cube_01.jpg"> <img class="cube_02" src="./img/cube_02.jpg"> <img class="cube_03" src="./img/cube_03.jpg"> <img class="cube_04" src="./img/cube_04.jpg"> <img class="cube_05" src="./img/cube_05.jpg"> <img class="cube_06" src="./img/cube_06.jpg"> </div> </body> </html>
3.3 缩放（scale）
① scaleX()：水平方向的缩放
② scaleY()：垂直方向的缩放
③ scale()：双方向的缩放
填的是倍数
以上的操作都是在二维下进行的，如果要弄3D的，需要设置3d变形：
/* 设置3d变形效果 */
transform-style: preserve-3d;
3.4 变形原点（transform-origin）：默认值为center
transform-origin: 20px 20px;