CSS动画奔跑的小熊

晨汜

已于 2023-07-25 09:23:09 修改

阅读量75

点赞数

文章标签： css 前端 css3

于 2023-07-25 00:45:06 首次发布

本文链接：https://blog.csdn.net/m0_60030646/article/details/131907386

版权

效果（背景可无缝衔接循环）

素材

通过百度网盘分享的文件：media
链接:https://pan.baidu.com/s/17uPWHlNcXUaoAr60SIG-5g?pwd=bear
提取码:bear
复制这段内容打开「百度网盘APP 即可获取」

<!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>
    <link rel="stylesheet" href="奔跑的熊熊.css">
</head>
<body>    
    <div class="bg1"></div>
    <div class="bg2"></div>
    <div class="bear"></div>   
</body>
</html>

* {
    padding: 0;
    margin: 0;
}

body,
html {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.bg1,
.bg2 {
    height: 100%;
    width: 11220px; 
}

body {
    position: relative;
    background-color: rgba(140, 143, 183, 0.599);
}

.bg1 {
    position: absolute;
    z-index: 2;
    background: url(../media/bg1.png) repeat-x bottom;
    animation: bg1 25s linear infinite;   
}
.bg2 {
    position: absolute;
    z-index: 1;
    background: url(../media/bg2.png) repeat-x bottom;
    animation: bg2 40s linear infinite;
}

.bear {
    position: absolute;
    bottom: 30px;
    margin-left: -100px;
    z-index: 3;
    height: 100px;
    width: 200px;
    background: url(../media/bear.png) no-repeat;
    animation: bearMove linear 5s forwards,
               bear 1s steps(8) infinite ;
    
}

@keyframes bearMove {
    0% {
        left: 0;
    }
    100% {
        left: 50%;
    }
}

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

@keyframes bg1 {
    0% {
        left: 0;
    }
    100% {
        left: -3840px;
    }
}

@keyframes bg2 {
    0% {
        left: 0;
    }
    100% {
        left: -3840px;
    }
}

遇到的问题

雪山背景的宽度用百分比表示，动画播放一次卡顿一下，衔接不流畅。