css实现动态熊熊奔跑

用户8247415

发布于 2021-04-13 16:15:46

8470

发布于 2021-04-13 16:15:46

代码如下

    <style>
        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(picture/bear.png) no-repeat;
            /* 多个动画用，分隔 */
            animation: bear .4s steps(8) infinite, move 3s forwards;
        }
        
        body {
            background-color: #ccc;
        }
        
        @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>

<body>
    <div></div>
</body>

用代码实现这种效果图有许多好处，我们可以更改熊奔跑的速度（十分搞笑），做出更加有趣的添加，动态图片较为死板。 css动画可以实现多个，在animation中加上逗号可以实现。熊的奔跑我们注意要用steps()来实现写代码时候要不断地优化，注意代码的可以更改性，灵活使用，如果代码不可以迁移或者动态改变就比较糟糕，程序员在修改的时候工作量是巨大的。效果图