代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 140px; height: 140px; background: url(./images/bg.png); /* 调用两个动画 一个动画为一个整体 用逗号隔开 */ animation: move 2s linear forwards,run 2s steps(12) infinite; } /* 动画1 人物移动到右边 */ @keyframes move{ to{ transform: translateX(800px); } } /* 动画2 人物跑起来 */ @keyframes run{ /* 精灵图位置移动 坐标为最后一个动作 */ to{ background-position: -1680px 0; } } </style> </head> <body> <div class="box"></div> </body> </html>
效果图:
移动web-动画-精灵图人物跑步案例
该文章展示了一个HTML和CSS结合创建的动画示例,通过CSS的关键帧动画(@keyframes)技术,将人物移动和跑动的精灵图动画应用到一个div元素上,实现了人物从左向右移动并跑动的效果。背景图片通过改变位置来模拟跑步动作,动画时长和播放模式都在CSS中定义。
摘要由CSDN通过智能技术生成