奔跑的小熊动画css

超、凢脫俗 2022-09-07 14:38 230阅读 0赞

![在这里插入图片描述][5c75738a2c8140beaa5048ad878cee55.png]![在这里插入图片描述][90f5e4fa02a144efb0e204e062320921.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][c91d60212907420a8f1f9654d6f17d63.png]

![eb7d13783e784ca69aa329db6e9a666b.png][]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 1]

<!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>
            body {
                background-color: blue;
            }
            div {
                position: absolute;
                width: 140px;
                height: 69px;
                background: url(../img/xiong.png) no-repeat;
                /* infinite无限循环的意思 */
                /* 我们元素可以添加多个动画，用逗号分隔就好了 */
                /* forwards停留在结束的状态 */
                animation: bear 1s steps(8) infinite,move 10s forwards;
            }
    
            @keyframes bear {
                0% {
                    background-position: 0 0;
                }
    
                100% {
                    background-position: -1127px 0;
                }
            }
    
            @keyframes move {
                0% {
                    left: 0;
                }
    
                100% {
                    left: 50%;
                    /* margin-left: -70px; */
                    transformX: (-50%) ;
                }
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
    </html>

[5c75738a2c8140beaa5048ad878cee55.png]: https://img-blog.csdnimg.cn/5c75738a2c8140beaa5048ad878cee55.png
[90f5e4fa02a144efb0e204e062320921.png]: /images/20220829/d2c4d7326e4f445581fc5997b57e5f7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70]: /images/20220829/0e98d06d3e3741e381b22c88de75a381.png
[c91d60212907420a8f1f9654d6f17d63.png]: /images/20220829/f7f12c3027314a5d9864ea1abb966017.png
[eb7d13783e784ca69aa329db6e9a666b.png]: https://img-blog.csdnimg.cn/eb7d13783e784ca69aa329db6e9a666b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/b0a6e64d044d45bcb9bccf4f71875cf7.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWxhbmc2OA==,size_16,color_FFFFFF,t_70