admin管理员组

文章数量:1616033

效果图：

背景图是自己另外找的，北极熊在奔跑的同时，背景图也在向它身后移动。

素材：

实现思路：

1 先定义一个盒子来“装”北极熊，因为素材是 1600 x 100 px，包含8张北极熊动作图，所以盒子的宽高定为 200 x 100px，这样一来盒子每次只会显示“一只”北极熊了。

2 然后把北极熊素材作为上述盒子的背景图，然后配合animation动画，通过修改该盒子的 background-position ，来控制北极熊素材图的移动，然后我们看到展示出来的效果就会是北极熊的移动。

3 同理，也可以给背景设置一个类似的盒子，来控制背景图的移动。

4 盒子的嵌套关系为 body>背景图div>北极熊div

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body>div {
            position: relative;
            width: 100%;
            height: 1000px;
            background: url("../../网页素材/建筑背景图.jpg") no-repeat;
            animation: background_move 15s linear infinite;
        }

        body>div>div {
            position: absolute;
            width: 200px;
            height: 100px;
            margin: 600px 0;
            background: url("../images/bear.png") no-repeat;
            animation: bear 1s steps(8) infinite, move forwards 3s;
        }

        @keyframes bear {
            0% {}

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

        @keyframes move {
            0% {
                left: 0;
            }

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

        @keyframes background_move {
            0% {}

            100% {
                background-position: -2000px 0;
            }
        }
    </style>
    <title>Document</title>
</head>

<body>
    <div>
        <div>

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

</html>

 

本文标签： 北极熊官网如何用浏览器动画

版权声明：本文标题：如何用CSS实现百度浏览器官网的北极熊奔跑动画 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1728734510a1170769.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。