Document

--- highlight: a11y-dark theme: cyanosis --- # 利用CSS让精灵图动起来主要使用了动画效果，精灵图的载在展示框中移动，展示框在可视屏幕上移动，就产生了🐻在奔跑的假象下面做出来是这个效果： ![请添加图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/922c299309874d16b7454c8d2eea7905~tplv-k3u1fbpfcp-zoom-1.image) # CSS的动画animation ## 1、动画的基本使用制作动画分为两步︰ 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

``` 效果图： ![请添加图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/614a7ce0113c46b19d57e1807b800ce8~tplv-k3u1fbpfcp-zoom-1.image) ### 实现功能：向右侧移动 ```javascript Document

``` ![请添加图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/af1a9a9bbe5441ff8bcc694858a10f06~tplv-k3u1fbpfcp-zoom-1.image) ### 实现功能：综合 ```javascript Document

``` ![请添加图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/69671ea379fc47e2ac7aa8c04bcfd267~tplv-k3u1fbpfcp-zoom-1.image)