目录JAVA全系列 教程
3762个小节阅读：7092.4k
目录
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本，未来主流的版本
人工智能 教程
顺势而为，AI创新未来
大厂算法 教程
算法，程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
动画是使元素从一种样式逐渐变化为另一种样式的效果
您可以改变任意多的样式任意多的次数
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%
0% 是动画的开始，100% 是动画的完成。
使用@keyframes规则，你可以创建动画
xxxxxxxxxx@keyframes name { from|0%{ css样式 } percent{ css样式 } to|100%{ css样式 }}name：动画名称，开发人员自己命名；
percent：为百分比值，可以添加多个百分比值；
xxxxxxxxxxanimation: name duration timing-function delay iteration-count direction;| 值 | 描述 |
|---|---|
| name | 设置动画的名称 |
| duration | 设置动画的持续时间 |
| timing-function | 设置动画效果的速率（如下） |
| delay | 设置动画的开始时间（延时执行） |
| iteration-count | 设置动画循环的次数，infinite为无限次数的循环 |
| direction | 设置动画播放的方向（如下） |
| animation-play-state | 控制动画的播放状态：running代表播放，而paused代表停止播放 |
| timing-function值 | 描述 |
|---|---|
| ease | 逐渐变慢（默认） |
| linear | 匀速 |
| ease-in | 加速 |
| ease-out | 减速 |
| ease-in-out | 先加速后减速 |
| direction值 | 描述 |
|---|---|
| normal | 默认值为normal表示向前播放 |
| alternate | 动画播放在第偶数次向前播放，第奇数次向反方向播放 |
切换背景颜色
xxxxxxxxxx<div class="animation"></div>xxxxxxxxxx.animation { width: 300px; height: 300px; background-color: red; animation: anima 5s linear 5s infinite;}.animation:hover { animation-play-state: paused;}@keyframes anima { 0% { background-color: red; } 50% { background-color: green; } 100% { background-color: blueviolet; }}呼吸效果
xxxxxxxxxx<div class="box"></div>xxxxxxxxxx.box { width: 500px; height: 400px; margin: 40px auto; background-color: #2b92d4; border-radius: 5px; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); animation: breathe 2700ms ease-in-out infinite alternate;}@keyframes breathe { 0% { opacity: .2; box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1) } 50% { opacity: .5; box-shadow: 0 1px 2px rgba(18, 190, 84, 0.76) } 100% { opacity: 1; box-shadow: 0 1px 30px rgba(59, 255, 255, 1) }}实时效果反馈
1.动画属性中，iteration-count: infinite属性的作用是：
A 设置动画效果时间
B 设置动画效果速率
C 设置动画的开始时间
D 设置动画无限循环
答案
1=>D