目录
2 位移 :translate3d translateX translateY translateZ
3:旋转:rotate3d rotateX rotateY rotateZ
4:缩放：scale3d scaleX scaleY scaleZ
一、什么是css动画？
1、使⽤css技术来控制⻚⾯元素
css属性
的变化。
2、css动画优势：不需要⽤js也能写，⽐较流畅，由浏览器去执⾏动画，减少代码量，性能⽐较⾼
3、⼀般兼容到ie10以上浏览器（⼀般没太⼤问题）
二、过渡
1.过渡的理解
过渡（transition）[træn'siʒǝn]
-通过过渡可以指定⼀个属性发⽣变化时的切换⽅式，平滑的过渡
-需要在某种条件下触发，例如hover、active、focus情况下
-⼀次性的效果，不能循环，只能做简单的动画
-只有两帧，设置动画初始值和结束值
-IE10开始兼容，移动端兼容良好
2.过渡的4个属性
1、transition-property
哪些属性要过渡（选 填）
- none 没有属性获得过 渡效果
- all 所有属性都参与过 渡 默认值
- property ⾃定义应⽤ 过渡效果，⼀个或多 个，⽤空格隔开
注意：1、所有 数值类型 的属 性，都可以参与过渡， ⽐如width、height、 left、top、border，radius、opacity等2、从⼀个有效数值 向另⼀个有效数值进⾏ 过渡
2、transition-duration
指定过渡效果的持续时 间（必填）
时间的单位：s和ms ，1s=1000ms
3、 transition-timingfunction
过渡变化曲线（缓动效 果）（选填）
- ease [i:z] 默认值，慢速开始，先加速，然后 再减速
- linear 匀速运动 ease-in 先慢后快 加 速运动 ,ease-out 先快后慢 减 速运动 ,ease-in-out 以慢速开 始和结束的过渡效果
- steps()分布执⾏过渡 效果
- cubic-bezier(n,n,n,n) ⽴⽅⻉塞尔曲线函数， 值是0-1之间的数值
4、transition-delay
过渡效果的延迟，等待 ⼀段时间后执⾏过渡
（选填）
时间的单位：s和ms ,1s=1000ms
5、transition
同时设置过渡相关的所 有属性
（选填，过渡时间 是必写）
只有⼀个要求，如果要 写延迟， 则两个时间中,第⼀ 个写过渡时间，第⼆个 写延迟时间.
三、动画
1.动画的理解
动画和过渡类似，都是可以实现⼀些动态效果，不同的是过渡需要在某个属性发⽣变化时才能触发， 例如hover，acitve时，动画可以⾃动触发动画.
第⼀步：先要设置⼀个关键帧，关键帧设置了动画每⼀个步骤
制定关键帧⽤的是@keyframes属性，指定关键帧主要有两种⽅法：
⽅法⼀：@keyframes 关键帧名称{from{初始状态属性}to{结束状态属性}}⽅法⼆：@keyframes 关键帧名称{0%{初始状态属性}50%（中间还可以再添加关键帧）100%{结束状态属性}
注意：
1、帧的顺序可以更改，不关顺序问题。如果初始帧不写，默认是原始设置，如果结束帧不写， 默认也是原始设置
2、可以同时设置关键帧，⽤逗号（,）隔开就⾏
@keyframes text {
2 /* from表示动画开始位置 也可以使⽤0%*/
3 from {
4 margin-left: 0;
5 }
6 /* to动画的结束位置 也可以使⽤100%*/
7 to {
8 margin-left: 500px;
9 }第⼆步 调⽤关键帧
2.动画属性
1、animation-name
绑定到选择器的关键帧 的名称，告诉系统需要 执⾏哪个动画
(必填)
2、animation-duration
动画的完成时间，告诉 系统动画持续的时长
（必填）
animation-timingfunction
设置动画如何完成一个 周期，告诉系统动画执 行的速度（与过度动画 类型）
3、animation-delay
动画在启动前的延迟间 隔
4、animation-iterationcount
动画的播放次数，告诉 系统动画需要执行几次
5、animation-direction
指定是否应给轮流反向 播放动画
6、animation-fill-mode
规定当动画不播放时 （完成时，延时未开始 播放时），应用到的元 素样式
7、animation-play-state
告诉系统当前动画是否 需要暂停
8、animation
简写，可以写以上任意 属性的可选值
animation:
关键帧的名 称
动画持续的时间
运 动状态(linear(
匀速
))
动 画延迟的时间
动画的循环次数
动画的运动⽅式
(
设置正向或者反向
)
四、变形2D
1、变形的理解
变形属性
transform
：
- 变形不会影响到⻚⾯的布局(只折腾⾃⼰)
- 尽量变形写在⼀个transform⾥，不然下⾯再写⼀个，就会覆盖上⾯
-
可选值：位移 —translate()缩放 —scale()旋转 —rotate()倾斜 —skew()
2、位移 transform:translate();
translate(
参数1，参数2
) 参数
值
1
是指在
x
轴上移动的距离
,
正值，元素向右移动，负值向左移 动，参 数2
是指在
y
轴上移动的距离，正值向下，负值向上，参数
2
默认为
0
translateX()沿着x轴⽅向平移
translateY()沿着y轴⽅向平移
translateZ()沿着z轴⽅向平移
结合视距起作⽤.
不能是百分⽐数值（
3d
变化）
注意：
1、平移元素，可以是数字，可以是百分⽐，百分⽐是相对于
⾃身计算
的,
x
轴往右为正，
y
轴往下为正，反之 为负
2
、位移的参考原点是元素的原来所处的位置
3
、如果是通过
active
进⾏位移，执⾏完毕后会还原
4
、 不会影响别的元素
5
、对于⾏内元素是没有效果的
//垂直⽔平居中的效果
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transform: translateX(-50%) translateY(-50%);3、旋转 transform: rotate();
- 默认情况下是绕着中⼼点进⾏转动的；
- 默认的单位是deg，⽐如rotate（45deg）
- 如果这个值为正值，则是元素对原点中⼼顺时针旋转； 反之如果这个值为负值，元素对原点中⼼进⾏逆时针旋转。
- 可以单独对x轴y轴z轴进⾏设置：这⾥的X/Y/Z也是是需要⼤写的。
rotateX() ，指元素围绕其 X 轴以设定的度数进⾏旋转
rotateY() ，元素围绕其 Y 轴以设定的度数进⾏旋转
rotateZ() ,
元素围绕其 Y 轴以设定的度数进⾏旋转
4、缩放 transform:scale();
- 缩放属性是让元素根据中⼼原点对对象进⾏缩放。
- 默认值是1，这⾥的参数没有单位，1以下的任何值，使⼀个元素缩⼩，0则是消失；⽽任何⼤于1的值，会让元素 变得更⼤。
- 缩放属性的属性值和位移属性的属性值是类似的语法，可以是⼀个值，也可以有两个属性值： 只有⼀个值的时候第⼆个值和第⼀个值是相等的； 两个值的时候，属性值1是指在x轴上缩放元素，属性值2是指在y轴上缩放元素。
- 单独对x轴y轴进⾏设置：同样这⾥的X/Y/Z也是是需要⼤写的。
transform:scaleX();
元素只在
x
轴上缩放元素
transform:scaleY();
元素只在
y
轴上缩放元素
5.也不会影响其他盒⼦
5、倾斜 transform:skew()
- 倾斜skew()是指通过设定的⻆度以其中⼼位置围绕着X轴和Y轴按照⼀定的⻆度倾斜显示。
- ⼀个参数时：表示x轴的倾斜x⻆度,y轴默认为0；
- 两个参数时：第⼀个参数表示x轴的倾斜⻆度，第⼆个参数表示y轴的倾斜⻆度。
- 变形的单位是deg
x值：为正则向左变形，为负则向右变形y值：为正则向上变形，为负则向下变形以上是以左上⻆为参照向左向右，向上，向下变形
- 可单独对x轴y轴进⾏设置：这⾥的X/Y也是是需要⼤写的。
transform:skewX() ；transform:skewY()；
6、 变形原点 transform-origin
- 原点就是元素的中⼼，通过 transform-origin 改变原点的位置
- ⽤变形原点 transform-origin属性，该属性只有在设置了transform属性的时候会起作⽤
- 设置偏移量值都是从元素左上⻆开始的
- transform-origin也有两个属性值：
transform-origin:（⽔平⽅向 垂直⽅向），默认值 transform-origin:（center center）值可以为⽅向值（left、center、top、right、bottom等），也可以是以px、%为单位的数值
变形3D
1.⽗元素样式：
3D变化需要⽗元素设置样式才能保留3d的变化效果
保留3d变化：
transform-style：preserve-3d;
默认值flat
设置视⻆深度 （景深）：
perspective
[pǝ'spektiv] 设置当前⽹⻚的视距为800px，⼈眼距离⽹⻚的距离，⼀般不⼩于600px
有的浏览器 html{perspective: 800px; },
⼤多浏览器直接设置在
⽗元素
上，例如：perspective：800-1200px；⼀般为900px-1000px
2 位移 :translate3d translateX translateY translateZ
translate3d(x,y,z):必须传递三个参数
translateX(x)
translateY(y) translateZ(z) 参数单位为px
x值：沿着x轴向右，为正；沿着x轴向左，为负
y值：沿着y轴向下，为正；沿着y轴向上，为负
z值：沿着z轴向屏幕外，为正；沿着z轴向屏幕内，为负
3:旋转:rotate3d rotateX rotateY rotateZ
rotateX(⻆度) rotateY(⻆度) rotateZ(⻆度) 沿着元素中⼼点穿过的某个轴旋设置的⻆度
参数⻆度单位为deg
⻆度值：
rotateX 为正则顺时针旋转，为负则为逆时针旋转
rotateY 为正则逆时针旋转，为负则顺时针旋转
rotateZ 为正则顺时针旋转，为负则为逆时针旋转
可以通过transform-origin：left来设置，⽐如绕着元素的左边框旋转
rotate3d（x,y,z,deg）:沿着⾃定义轴旋转deg为⻆度()
backface-visibility属性定义当元素旋转到背⾯向屏幕时，是否可⻅
visible 背⾯可⻅
hidden 背⾯不可⻅
4:缩放：scale3d scaleX scaleY scaleZ
scale3d(num,num,num):必须要传三个参数
scaleX(x)
scaleY(y) scaleZ(z) ,分别代表x和y轴⽅向缩放相应的倍数
小练习
1、过渡
<!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: 200px;
height: 200px;
background-color: #bfa;
margin: 50px auto;
/* 设置过渡 */
/* 设置过渡的元素属性 */
/* transition-property: height background-color width; */
/* transition-property: all; */
/* 设置过渡的时间 */
/* transition-duration: 1s; */
/* 设置过渡的延迟 */
/* transition-delay: 2s; */
/* 设置过渡的变化曲线 */
/* transition-timing-function:ease ; */
transition:1s;
}
.box:hover{
width: 300px;
height: 300px;
background-color: orange;
opacity: 0;
border-radius: 50%;
}
</style>
</head>
<body>
<!-- 需求：鼠标移入，盒子高度变成300px -->
<div class="box"></div>
</body>
</html>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>Document</title>
<style>
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
}
ul {
width: 500px;
height: 400px;
border: 10px solid red;
}
li {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: blueviolet;
text-align: center;
line-height: 50px;
color: orange;
margin: 5px 0px;
/* 设置过渡 */
transition-property: margin-left;
transition-duration: 1s;
}
/* 设置不同的过渡曲线 */
li:nth-child(1) {
transition-timing-function: ease;
}
li:nth-child(1) {
transition-timing-function: linear;
}
li:nth-child(2) {
transition-timing-function: ease-in;
}
li:nth-child(3) {
transition-timing-function: ease-out;
}
li:nth-child(4) {
transition-timing-function: ease-in-out;
}
li:nth-child(5) {
transition-timing-function: steps(5);
}
li:nth-child(2n) {
background-color: aquamarine;
}
ul:hover > li {
margin-left: 450px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
3、米兔练习
<!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>
div{
width: 155px;
height: 170px;
background-image: url(./米兔照片.jpg);
background-position: 0 0;
transition: steps(4) 2s;
}
div:hover{
background-position: -630px 0;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
4、行走的小雪人
<!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>
.box1 {
width: 126px;
height: 180px;
background-image: url(./111.jpeg);
animation: xueren 1s steps(4) infinite reverse ;
}
@keyframes xueren {
from {
background-position: 0 0;
}
to {
background-position: -487px 0;
}
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
5、西游记动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 500px;
background-image: url(./images/bg.jpg);
margin: 100px auto;
position: relative;
animation: shun 15s infinite linear both;
}
.text {
position: absolute;
/* border: 2px solid red; */
left: 0;
bottom: 0;
}
.shun {
width: 200px;
height: 180px;
background-image: url(./images/1.png);
animation: shun 1s steps(8) infinite reverse both;
}
.zhu {
width: 200px;
height: 180px;
background-image: url(./images/2.png);
animation: zhu 1s steps(8) infinite reverse both;
}
.tang {
width: 150px;
height: 200px;
background-image: url(./images/3.png);
animation: tang 1s steps(8) infinite reverse both;
}
.sa {
width: 210px;
height: 200px;
background-image: url(./images/4.png);
animation: sa 1s steps(8) infinite reverse both;
}
.box div {
float: left;
margin-right: 100px;
}
@keyframes box {
from {
background-position: 0%;
}
to {
background-position: 100%;
}
}
@keyframes shun {
from {
background-position: 0 0;
}
to {
background-position: -1600px 0;
}
}
@keyframes zhu {
from {
background-position: 0 0;
}
to {
background-position: -1600px 0;
}
}
@keyframes tang {
from {
background-position: 0 0;
}
to {
background-position: -1360px 0;
}
}
@keyframes sa {
from {
background-position: 0 0;
}
to {
background-position: -1680px 0;
}
}
</style>
</head>
<body>
<div class="box">
<div class="text">
<div class="shun"></div>
<div class="zhu"></div>
<div class="tang"></div>
<div class="sa"></div>
</div>
</div>
</body>
</html>
扫一扫
1849
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
