雪花+切换背景图片

最新推荐文章于 2022-12-23 21:07:58 发布

Ctrl Alt Shift

最新推荐文章于 2022-12-23 21:07:58 发布

阅读量206

点赞数 3

分类专栏： Web 前端

本文链接：https://blog.csdn.net/weixin_42676530/article/details/86709628

版权

Web 前端专栏收录该内容

31 篇文章 1 订阅

订阅专栏

这里我加入的是通过鼠标点击事件来实现切换图片效果，以白皑皑的雪花为点缀，实现一种简单的视觉效果。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>L O V E</title>
    <link rel="shortcut icon" href="favicon.ico" type="images/x-icon" />
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-image: url("img/6-.jpg");
        }

        #mask {
            background-color: rgba(255, 255, 255, 0.3);
            height: 200px;
            text-align: center;
        }

        #mask img {
            width: 200px;
            margin-top: 35px;
            cursor: pointer;
        }

        .snow-container {
            position: absolute;
            height: 100%;
            width: 100%;
            max-width: 100%;
            top: 0;
            overflow: hidden;
            z-index: 2;
            pointer-events: none;
            /*background-color: red;*/
        }

        .snow {
            display: block;
            position: absolute;
            z-index: 2;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            pointer-events: none;
            -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
            -webkit-animation: snow linear infinite;
            animation: snow linear infinite;
        }
        .snow.foreground {
            background-image: url("img/snow1.png");
            -webkit-animation-duration: 15s;
            animation-duration: 15s;
        }
        .snow.foreground.layered {
            -webkit-animation-delay: 7.5s;
            animation-delay: 7.5s;
        }
        .snow.middleground {
            background-image: url("img/snow2.png");
            -webkit-animation-duration: 20s;
            animation-duration: 20s;
        }
        .snow.middleground.layered {
            -webkit-animation-delay: 10s;
            animation-delay: 10s;
        }
        .snow.background {
            background-image: url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png);
            -webkit-animation-duration: 30s;
            animation-duration: 30s;
        }
        .snow.background.layered {
            -webkit-animation-delay: 15s;
            animation-delay: 15s;
        }

        @-webkit-keyframes snow {
            0% {
                -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0);
            }
            100% {
                -webkit-transform: translate3d(15%, 100%, 0);
                transform: translate3d(15%, 100%, 0);
            }
        }
        @keyframes snow {
            0% {
                -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0);
            }
            100% {
                -webkit-transform: translate3d(15%, 100%, 0);
                transform: translate3d(15%, 100%, 0);
            }
        }

    </style>

</head>
<body id="bd">
<audio autoplay controls loop>  //音频插入
    <source src="Angel.mp3"/>
</audio>
<div id="mask">
    <img src="img/6-.jpg" alt="">
    <img src="img/7.jpg" alt="">
    <img src="img/11.jpg" alt="">
    <img src="img/5.jpg" alt="">
    <img src="img/6.jpg" alt="">
</div>
<div class="snow-container">
    <div class="snow foreground"></div>
    <div class="snow foreground layered"></div>
    <div class="snow middleground"></div>
    <div class="snow middleground layered"></div>
    <div class="snow background"></div>
    <div class="snow background layered"></div>
</div>


<script src="common.js"></script>
<script>
    var imgObjs=my$("mask").children;//获取的所有的子元素
    //循环遍历所有img,注册点击事件
    for(var i=0;i<imgObjs.length;i++){
        imgObjs[i].onclick=function () {
            document.body.style.backgroundImage="url("+this.src+")";
        };
    }
</script>

</body>
</html>

有不足之处还请大家多多指点。

Ctrl Alt Shift

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
雪花+切换背景图片

这里我加入的是通过鼠标点击事件来实现切换图片效果，以白皑皑的雪花为点缀，实现一种简单的视觉效果。&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;L O V E&lt;/title&gt; &lt;link rel="shortcut ic
复制链接

扫一扫

专栏目录