CSS3动画实现小熊奔跑_css3动画狗熊在爬-CSDN博客

本文链接：https://blog.csdn.net/weixin_44173943/article/details/119671555

一、需要注意的

小熊、冰山和冰山黑影定位为绝对定位，有层级关系index。
冰山和冰山黑影必须水平方向重复repeat-x，否则会中断卡壳。

二、效果图

在这里插入图片描述

三、代码

<!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>小熊奔跑</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background-color: #ccc;
        }

        .bear {
            position: absolute;
            z-index: 2;
            width: 200px;
            height: 100px;
            background: url(img/bear.png) no-repeat;
            animation: bearRun 1s steps(8) infinite, bearMove 1s forwards;
        }

        .whiteHill {
            position: absolute;
            z-index: 1;
            bottom: 0;
            width: 100%;
            height: 336px;
            /* 必须水平方向重复，不然会中断 */
            background: url(img/bg1.png) repeat-x;
            animation: hillMove 30s linear infinite;
        }

        .blackHill {
            position: absolute;
            z-index: 0;
            bottom: 0;
            width: 100%;
            height: 569px;
            background: url(img/bg2.png) repeat-x;
            animation: hillMove 30s linear infinite;
            opacity: 0.7;
        }

        @keyframes bearRun {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -1600px 0;
            }
        }

        @keyframes bearMove {
            0% {
                top: 80%;
                left: 0;
            }

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

        @keyframes hillMove {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -3840px 0;
            }
        }
    </style>

</head>

<body>

    <div class="bear"></div>
    <div class="whiteHill"></div>
    <div class="blackHill"></div>
</body>

</html>