css实现动态熊熊奔跑

最新推荐文章于 2022-07-08 09:22:01 发布

秃了秃噜头

最新推荐文章于 2022-07-08 09:22:01 发布

阅读量450

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/weixin_54719957/article/details/115406552

版权

在这里插入图片描述
代码如下

    <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()来实现
写代码时候要不断地优化，注意代码的可以更改性，灵活使用，如果代码不可以迁移或者动态改变就比较糟糕，程序员在修改的时候工作量是巨大的。
效果图
在这里插入图片描述

秃了秃噜头

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
css实现动态熊熊奔跑

代码如下 <style> div { position: absolute; width: 200px; height: 100px; background: url(picture/bear.png) no-repeat; /* 多个动画用，分隔 */ animation: bear .4s steps(8) infinite.
复制链接

扫一扫