admin管理员组

文章数量:1026989

雪花+切换背景图片

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

<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(.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>

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

雪花+切换背景图片

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

<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(.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>

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

本文标签： 雪花切换背景图片

版权声明：本文标题：雪花+切换背景图片 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/IT/1694664020a254759.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。