动画
没有动画之前遗留很多的问题
如:
- 需要重复过渡效果时无法实现
- 只能通过hover等方式才能出发
1.1动画
- 通过@keyframs定义动画。
- .在指定元素中,通过animation属性来调用动画。
定义动画
格式:
@keyframes 动画名 {
from{
/* 初始帧 */
}
to{
/* 结束帧 */
}
}
【注】动画名不要起关键字,最好见名知意。
1.2动画的调用
通过animation属性来调用动画。
animation-name:动画名称(名称为自己起的)
animation-duration 执行一次动画的完成时间
animation-iteration-count: 动画的执行次数 infinite 表示无数次。
animation-delay: 动画延迟执行的时间。
animation-fill-mod
- forwards:在动画结束后,盒子保持结束帧状态。
- backwards 在动画开始时,包含延迟时间,让盒子保持初始帧状态
- both backwards forwards都生效
- none(默认值,动画结束后,直接返回到初始点)
animation-direction: 动画的执行方式
alternate:交替执行。
normal 正常(默认)
reverse 反向 从结束帧开始到初始帧结束
【注】alternate 反向也会算一次执行时间。
animation-timing-function:
- linear 匀速
- ease-in 加速
- ease-out 减速
- ease-in-out 先加速后减速
animation-play-state 动画运行状态 - paused:暂停
- running 运行
【注】动画属性要有中间状态,一般是数值型。
复合写法:名称 执行时间 这两个必须按照此顺序写在前边,后面不需要遵守,可以随意写属性要空格隔开
滤镜
filter: opacity 透明度
filter: grayscale()灰度
filter: invert()反色
只有0和1,0为关闭1为开启
filter: brightness(1);亮度
filter: saturate()饱和度
filter: sepia();褐色
filter: blur();模糊使用频繁
filter: hue-rotate();色相反转
filter: contrast()对比度
filter: drop-shadow();阴影