CSS动画奔跑的小熊案例

Poppy_01

已于 2022-05-24 11:20:12 修改

阅读量1.2k

点赞数 2

于 2022-05-22 17:16:42 首次发布

本文链接：https://blog.csdn.net/weixin_46466212/article/details/124913291

版权

CSS动画背景滚动关键帧图片动画前端开发

关键词由CSDN通过智能技术生成

CSS动画奔跑的小熊案例

资源

bg1
在这里插入图片描述 bear

个人学习代码

<!DOCTYPE html>
<html lang="zh-CN">

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

        body {
            background-color: #004;
        }

        .bg1 {
            position: relative;
            top: 105px;
            height: 569px;
            background: url(./bg2.png);
            animation: scroll 12s infinite linear;
        }

        .bg2 {
            position: relative;
            top: 280px;
            height: 336px;
            background: url(./bg1.png);

            animation: scroll 14s infinite linear;
        }

        .bear {
            position: absolute;
            bottom: 50px;
            width: 200px;
            height: 100px;
            background: url(./bear.png);

            animation: bear 1s steps(8) infinite,move 5s forwards linear;
        }



        @keyframes scroll {
            0% {}

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

        @keyframes bear {
            0% {}

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

        @keyframes move {
            0%{
                left: -200px;
            }

            100%{
                left: 50%;
                transform: translate(-50%);
            }
        }
    </style>
</head>

<body>
    <div class="bg1">
        <div class="bg2">
            <div class="bear"></div>
        </div>
    </div>
</body>

</html>

Poppy_01

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS动画奔跑的小熊案例

CSS奔跑的小熊案例资源个人学习代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.
复制链接

扫一扫