HTML+CSS如何实现奔跑的小熊的动画？

最新推荐文章于 2024-01-19 15:11:36 发布

微滑低

最新推荐文章于 2024-01-19 15:11:36 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： javaweb 文章标签： css html

本文链接：https://blog.youkuaiyun.com/weixin_49092628/article/details/109486609

javaweb 专栏收录该内容

51 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现奔跑小熊动画的方法。通过设置关键帧动画，使小熊背景图片在水平方向上平移，同时让div元素自身在页面中从左至右移动，营造出小熊奔跑的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML+ CSS如何实现奔跑的小熊的动画

<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    
<style>       
 body {         
    background-color: #ccc;      
      }               
 div {           
   position: absolute;           
    width: 200px;            
    height: 100px;            
    background: url(media/bear.png) no-repeat;            
    /* 我们元素可以添加多个动画， 用逗号分隔 */            
    animation: bear .4s steps(8) infinite, move 3s forwards;       
   }                
     @keyframes bear {            
     0% {               
     	 background-position: 0 0;          
        }            
    100% {                
        background-position: -1600px 0;           
        }       
       }                
     @keyframes move {            
       0% {                
          left: 0;           
          }           
      100% {                
          left: 50%;               
          /* margin-left: -100px; */               
          transform: translateX(-50%);           
       }        
}    
</style>
</head>
<body>    
<div></div>
</body>
</html>