highlight: a11y-dark
主要使用了动画效果,精灵图的载在展示框中移动,展示框在可视屏幕上移动,就产生了在奔跑的假象
制作动画分为两步︰ 1.先定义动画 2.再使用(调用)动画
我通过例题向大家展示一下动画是什么: style标签里的内容, javascript div{ width: 20px; height: 20px; background-color: green; animation: changeswidth 6s infinite steps(14);alternate; } @keyframes changesbig{ //这个0%表示开始状态 0%{ width:20px; } //这个100%表示结束状态 100%{ width: 300px; } }
body标签里的内容, javascript
运行出来的效果GIF展示如下
| 属性 | 描述 | |--|--| |@keyframes|规定动画| |animation |所有动画属性的简写属性,除了animation-play-state属性| |animation-name| 规定@keyframes动画的名称。(必须的) |animation-duration| 规定动画完成—个周期所花费的秒或毫秒,默认是0。(必须的)| |animation-timing-function |规定动画的速度曲线,默认是“ease” | |animation-delay |规定动画何时开始,默认是0| |animation-iteration-count |规定动画被播放的次数,默认是1,还有infinite(无线| |animation-direction| 规定动画是否在下一周期逆向播放,默认是“normal ",“alternate”逆播放| |animation-fill-mode| 规定动画结束后状态,保持当前状态forwards 回到起始backwards|
根据上面属性我们写一个熊的奔跑效果,
其实就是在雪碧图上面进行跳动,来显示一定范围大小的图片,
拆分功能:
```javascript
Document