利用CSS3动画让图片动起来

最新推荐文章于 2025-04-10 23:09:59 发布

gxhlh

最新推荐文章于 2025-04-10 23:09:59 发布

阅读量5.5k

点赞数 3

分类专栏： HTML5+CSS3

本文链接：https://blog.csdn.net/qq_44721831/article/details/104055289

版权

HTML5+CSS3 专栏收录该内容

13 篇文章

订阅专栏

利用CSS3动画让图片动起来

原材料：一张png图片
在这里插入图片描述
实现原理：利用了两个动画bear、move，bear动画让小熊奔跑起来，就是通过控制背景图片的位置让每张小熊图片依次闪过，从而看上去就像跑起来一样，而且可以控制奔跑速度。

move动画的作用是让小熊从屏幕边缘跑到屏幕中央的位置。

实现代码：

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

 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%);
        }
    }