Day10_CSS过度动画
背景 : PC和APP项目我们已经开发完毕, 但是再真正开发的时候有些有些简易的动态效果我们可以使用CSS完成 ; 本节课我们来使用CSS完成基础的动画效果
今日学习目标
- CSS3过度
- CSS3平面动态效果
- CSS3动画效果
- 案例
1. CSS3过渡
含义 :过渡指的是元素从一种状态向另外一种状态进行缓慢的改变, 这种缓慢的效果被称之为过度 ; 过度属于动画的一种, 但是这种动画需要通过鼠标事件才能触发 , 没有鼠标事件是不能触发该属性的;
基本语法 : transition : all 3s linear 5s ;
释义 : transition代表的是过度属性 ( 复合属性 )
all : 代表的是所有能参与过度动画的属性 ;
3s : 代表的是过度动画执行需要花费的时间 ;
linear : 代表的是过度动画的动画类型;
5s : 代表的是过渡到动画的延迟执行;
案例 :
<style>
div:hover{
width:500px;
height:500px;
border-radius:50%;
backhground-color:green;
}
div{
width:300px;
height:300px;
background-color:red;
border:10px solid gray;
/*在这里过度动画放在初始效果里面, 能实现缓慢开始, 缓慢结束, 如果把过度属性放在鼠标事件属性中, 只有缓慢开始没有缓慢结束*/
transition:all 3s linear 5s;
}
</style>
<div></div>
单一属性 :
transition-property : 所有能参与过度的动画属性; 如果使用单一属性的话, 后面多个属性之间使用逗号隔开, 但是多个属性可以直接使用all代替; 需要注意的是 : display, visibility , 渐变不参与过度 ;
transition-duration : 过度动画需要花费的时间 ;
transition-timing-function : 过度动画执行的类型
取值 :
a) ease : 平滑过渡
b) ease-in : 由慢到快
c) ease-out : 由快到慢
d) ease-in-out : 由慢到快再到慢
e) linear : 线性过渡 , 匀速直线运动
f) steps() : 按照步骤执行
g) 贝塞尔曲线 : cubic-bezier(, , , )
transition-delay: 过度动画的延迟执行 ;
2. CSS3平面动态交互
含义 : CSS3平面动态效果, 其实就是平面上面的平移 , 旋转 , 缩放 , 倾斜等高级函数 ; 接下来我们要学习四个高级函数 , 但是四个高级函数 , 共用一个属性 : transform属性 ;
注意 : transform也是动画的一种, 这种动画也需要配合鼠标事件才能完成, 如果想要实现缓慢的改变, 则需要配合transition过度动画;
1)平移函数
含义 : 指的是, 平面X轴和Y轴上面的移动动画
基本语法 : transform : translateX(number) / translateY(number) / translate(x,y)
释义 :
translateX(number) : 代表的是水平平移; 取值+向右平移, 取值-向左平移
translateY(number) : 代表的是垂直平移; 取值+向下平移, 取值-向上平移
translate(x,y) : 代表的是水平和垂直方向平移, 如果取值为一个值, 则只能实现一个方向
案例 :
<style>
div:hover{
transform:translateX(200px)
}
div{
width:200px;
height:200px;
border:10px solid gray;
background-color:red;
/*如果想要实现缓慢的移动, 则需要讲过度属性方法初始效果中*/
transition:all linear 3s
}
</style>
<div></div>
2)旋转函数
含义 : 指的是 元素能在平面上面进行旋转的动画
基本属性 : transform : rotateX(deg) / rotateY(deg) / rotate(deg)
释义 :
rotateX() : 元素绕着X轴进行旋转 ; 类似于 : 烤全羊 , 水井上面的辘辘
rotateY() : 元素绕着Y轴进行旋转 ; 类似于 : 吊炉烤鸭 ;
rotate() : 元素绕着中心点进行旋转 ; 中心点 ( 位于元素正中心位置 )
问题 : 元素默认是绕着中心点进行旋转, 如果调整旋转中心?
属性 : transform-origin : x y; x代表的是水平位置, y代表的是垂直位置; 旋转中心可以再元素内部, 也可以位于元素外边
注意 : 旋转中心一般需要放在初始效果中 ;
案例 :
<style>
div{
width:200px;
height:300px;
background-color:red;
margin:100px auto;
/*默认的旋转中心再元素正中心位置*/
/*调增旋转中心*/
transform-origin: -20px -20px;
}
div:hover{
transform:rotate(30deg)
}
</style>
<div></div>
3)缩放函数
含义 : 通过平面上面的缩放函数, 来实现元素的缩小和放大
基本语法 : transform : scaleX() / scaleY() / scale()
释义 :
scaleX() : 元素沿着X轴进行缩小放大 : 取值+为x轴方向放大 , 取值-为x轴方向缩小
scaleY() : 元素沿着Y轴进行缩小放大 : 取值+为y轴方向放大 , 取值-为y轴方向缩小
scale() : 元素沿着中心点进行缩小放大 , 取值为一个值的时候, 代表了水平和垂直两个方向, 取值为两个值的时候, 第一个值代表的水平方向, 第二个值代表的是垂直方向;
案例 :
<style>
div{
width:300px;
height:300px;
border:10px solid gray;
/*如果想要实现缓慢的缩放, 需要配合过度属性*/
transition:all 3s linear;
}
div:hover{
/*鼠标放在上面的时候, 元素*/
transform:scale(2)
}
</style>
<div></div>
4)倾斜函数
含义 : 倾斜效果类似于旋转 , 但是意义不一样 , 倾斜是沿着都一个轴线进行倾斜 , 就像是军训的时候教官让我们站军姿 , 身体向前倾斜一样 ; 倾斜的时候会与X轴或者是Y轴形成一个夹角
基本语法 : transform : skew() / skewX() / skewY()
释义 :
skew(参数1, 参数2) : 代表的是沿着x轴和y轴进行倾斜, 参数1和参数2代表的是对应倾斜度数
skewX(参数) : 代表的是沿着x轴进行倾斜; 与y轴形成夹角
skewY(参数) : 代表的是沿着Y轴进行倾斜; 与x轴形成夹角
在这里插入图片描述
案例 :
<style>
div{
width:300px;
height:300px;
border:10px solid gray;
/*如果想要实现缓慢的倾斜, 需要配合过度属性*/
transition:all 3s linear;
}
div:hover{
/*鼠标放在上面的时候, 元素*/
transform:skewX(30deg)
}
</style>
<div></div>
3. CSS3动画
含义 : CSS3里面的动画指的是animation动画 , animation动画是真整意义上的动画, 不依靠鼠标事件就能完成动画的执行 ;
基本语法 : animation : name 5s linear 3s infinite alternate 注意 : animation属性是一个复合属性; 后面的取值均有对应的单一属性
基本释义 :
animation : 是触发动画的属性 , 一般哪里需要调用动画
name : 调用动画 , 声明动画的名字 , 想要使用animation属性必须得声明动画;
5s : 动画执行的时间
linear : 动画执行的类型
3s : 动画延迟执行
infinite : 动画制定的次数, 可以为数值, 数值代表执行多少次, infinite代表的无穷尽的一直执行;
声明动画 :
@keyframes mymove{
from{
初始状态属性
}
to{
结束状态属性
}
}
或
@keyframes mymove{
0%{
初始状态属性
}
100%{
结束状态属性
}
}（中间再可以添加关键帧）
单一属性 :
animation-name 检索或设置对象所应用的动画名称
animation-duration 检索或设置对象动画的持续时间
animation-timing-function 检索或设置对象动画的过渡类型
linear 动画从头到尾的速度是相同的。 测试
ease 默认。动画以低速开始，然后加快，在结束前变慢。 测试
ease-in 动画以低速开始。 测试
ease-out 动画以低速结束。 测试
ease-in-out 动画以低速开始和结束。 测试
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
animation-delay 检索或设置对象动画延迟的时间
animation-iteration-count 检索或设置对象动画的循环次数
animation-direction 检索或设置对象动画在循环中是否反向运动
normal：正常方向
reverse：反方向运行
alternate：动画先正常运行再反方向运行，并持续交替运行
alternate-reverse：动画先反运行再正方向运行，并持续交替运行
animation-play-state 检索或设置对象动画的状态
running:运动
paused: 暂停
4. 案例
<style>
*{margin:0;padding:0}
div{
width:300px;
height:300px;
background-color:red;
/*2)调用动画*/
animation:change 3s linear 5s 5 alternate
}
/*1)声明动画*/
@keyframes change{
/*初始样式*/
0%{
/*如果初始样式和默认样式一模一样, 则可以省略不写*/
width:300px;
height:300px;
background-color:red;
}
/*中间可以添加更多的关键帧;增加多处百分比*/
/*结束样式*/
100%{
width:500px;
hieght:500px;
background-color:green;
border-radius:50%;
}
}
/*鼠标悬停的时候,能让动画停止;*/
div:hover{
animation-play-state:paused
}
</style>
<div></div>
5. 综合案例
案例1 : 平移案例
案例2 : 旋转案例
案例3 : 缩放案例
案例4 : 动画案例
案例5 : 关键帧动画
