前端动画案例：百度网页中奔跑的小熊

最新推荐文章于 2022-12-26 10:30:43 发布

黄丫丫07

最新推荐文章于 2022-12-26 10:30:43 发布

阅读量572

点赞数

文章标签：前端 css css3

本文链接：https://blog.youkuaiyun.com/m0_51495354/article/details/128108478

版权

本文介绍了如何使用CSS动画和关键帧定义div元素的平移效果，同时展示了HTML和JavaScript结合图片轮播的实现。通过`@keyframes`规则，创造出熊图片的无缝滚动效果。

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

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        body {

            background-color: skyblue;

        }

        div {
            position: absolute;
            bottom: 60px;
            width: 200px;
            height: 100px;
            /* 我们的元素可以添加多个动画，用逗号分隔 */

            animation: d 4s forwards, xiongda 1s steps(8) infinite;
        }



        @keyframes xiongda {
            0% {
                background: url(images/bear.png) no-repeat 0 0;
            }

            100% {
                background: url(images/bear.png) no-repeat -1600px 0;
            }
        }

        @keyframes d {
            0% {

                left: 0px;
            }

            100% {
                transform: translateX(-50%);
                left: 50%;
            }
        }

        .pic {
            position: absolute;
            bottom: 0px;
            width: 1280px;
            height: 569px;

            animation: black 6s steps(3) backwards infinite;
        }

        .pic1 {
            position: absolute;
            bottom: 0;
            width: 1280px;
            height: 336px;
            animation: white 3s steps(3) infinite;

        }



        @keyframes white {
            0% {
                background: url(images/bg1.png) no-repeat 0 0;


            }

            100% {
                background: url(images/bg1.png) no-repeat -3840px 0;


            }

        }

        @keyframes black {
            0% {
                background: url(images/bg2.png) no-repeat 0 0;
            }

            100% {
                background: url(images/bg2.png) no-repeat -3840px 0;
            }
        }
    </style>
</head>

<body>
    <div class="pic"></div>
    <div class="pic1"></div>

    <div>

    </div>
</body>

</html>