百度浏览器首页动画仿写

最新推荐文章于 2024-09-06 18:18:08 发布

努力的前端小陈

最新推荐文章于 2024-09-06 18:18:08 发布

阅读量278

点赞数

分类专栏：前端页面练手文章标签： css css3 html5

本文链接：https://blog.csdn.net/qq_41509696/article/details/104901754

版权

前端页面练手专栏收录该内容

3 篇文章 0 订阅

订阅专栏

图片资源可以直接在百度浏览器下载
预览效果
在这里插入图片描述


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: #333;
        }
        
        .bg {
            position: relative;
            height: 100vh;
            width: 100vw;
            background: url(media/bg-space.png) no-repeat;
        }
        
        div[class^="mountain"] {
            position: absolute;
            bottom: 0;
            width: 100%;
        }
        /* 使背景图一直无衔接循坏的关键点在于不给背景图平铺属性
        the key is backgroundimag repeat */
        
        .mountain1 {
            z-index: 3;
            height: 336px;
            background: url(media/bg1.png);
            animation: mountains 100s linear infinite;
        }
        
        .mountain2 {
            z-index: 2;
            height: 384px;
            background: url(media/bg-mountain-2.png);
            animation: mountains 160s linear infinite;
        }
        
        .mountain3 {
            z-index: 1;
            height: 569px;
            background: url(media/bg-mountain-3.png);
            animation: mountains 260s linear infinite;
        }
        
        @keyframes mountains {
            0% {}
            100% {
                background-position: -3840px 0;
            }
        }
        
        .bear {
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 4;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            animation: bear_running 1s steps(8) infinite, bear_move 3s linear forwards;
        }
        
        @keyframes bear_running {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        
        @keyframes bear_move {
            0% {}
            100% {
                left: 50%;
                transform: translateX(-50%);
            }
        }
    </style>
</head>

<body>
    <div class="bg">
        <div class="mountain1"></div>
        <div class="mountain2"></div>
        <div class="mountain3"></div>
    </div>
    <div class="bear"></div>
</body>

</html>

努力的前端小陈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度浏览器首页动画仿写

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
复制链接

扫一扫

专栏目录