效果图
css
<style type="text/css">
#snowbanner {
position: fixed;top: 0;left: 0;z-index:1;
width: 100%;height: 100vh;overflow: hidden;pointer-events: none;
/*background-image: url("../img/mountains.svg");*/background-size: cover;background-position: center bottom;background-repeat: repeat no-repeat;
}
#snowbanner .snow {
background-image: url(img/snow.png);
background-repeat: repeat;width: 100%;height: 100%;
position: absolute;top: 0;left: 0;
-webkit-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear;
transition: opacity 3s;
}
#snowbanner .snow.snow-1 {-webkit-animation-name: animateone;-ms-animation-name: animateone;animation-name: animateone;background-size: 500px 500px;}
#snowbanner .snow.snow-2 {-webkit-animation-name: animatetwo;-ms-animation-name: animatetwo;animation-name: animatetwo;background-size: 300px 300px;}
@-webkit-keyframes animateone {
0% {background-position: 0px 0px;}
100% {background-position: 500px 500px;}
}
@-ms-keyframes animateone {
0% {background-position: 0px 0px;}
100% {background-position: 500px 500px;}
}
@keyframes animateone {
0% {background-position: 0px 0px;}
100% {background-position: 500px 500px;}
}
@-webkit-keyframes animatetwo {
0% {background-position: 0px 0px;}
100% {background-position: 300px 900px;}
}
@-ms-keyframes animatetwo {
0% {background-position: 0px 0px;}
100% {background-position: 300px 900px;}
}
@keyframes animatetwo {
0% {background-position: 0px 0px;}
100% {background-position: 300px 900px;}
}
.snow-speed-wrapper {position: fixed;width: 100%;bottom: 20px;z-index:999;}
.snow-speed-wrapper .snow-speed-range {width: calc(100% - 40px);margin: auto;max-width: 500px;padding: 10px 30px;background: rgba(0, 0, 0, 0.3);transition: background 0.5s ease;border-radius: 5px;box-sizing: border-box;}
.snow-speed-wrapper .snow-speed-range:hover {background: rgba(0, 0, 0, 0.5);}
#range-slider {-webkit-appearance: none;width: 100%;height: 10px;border-radius: 5px;background: #d7dcdf;outline: none;padding: 0;margin: 0;cursor: pointer;}
#range-slider::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 20px;height: 20px;border-radius: 100%;background-color: #fff;}
</style>
html
<section id="snowbanner" style="position:fixed;">
<div class="snow snow-1" style="animation-duration: 18s; animation-iteration-count: infinite; opacity: 1;"></div>
<div class="snow snow-2" style="animation-duration: 18s; animation-iteration-count: infinite; opacity: 1;"></div>
</section>
<div class="snow-speed-wrapper" style="display: none;">
<div class="snow-speed-range">
<input id="range-slider" type="range" value="10" />
</div>
</div>
JS
<script>
let speedSlider = document.querySelector("#range-slider");
let speedValue = speedSlider.value;
let snow = document.querySelectorAll("#snowbanner .snow");
let snowSwitch = true;
speedSlider.addEventListener("input", function() {
speedValue = speedSlider.value;
setSeconds();
});
function setSeconds() {
let seconds = (100 - speedValue) * 0.2;
if (seconds < 0.5) {
seconds = 0.5;
}
seconds >= 20 ? (snowSwitch = false) : (snowSwitch = true);
snow.forEach(element => {
element.style.WebkitAnimationDuration = `${seconds}s`;
element.style.animationDuration = `${seconds}s`;
if (snowSwitch) {
element.style.WebkitAnimationIterationCount = "infinite";
element.style.animationIterationCount = "infinite";
element.style.opacity = "1";
} else {
element.style.WebkitAnimationIterationCount = "1";
element.style.animationIterationCount = "1";
element.style.opacity = "0";
}
});
}
setSeconds();
</script>
雪花图
(图片地址):https://img-blog.csdnimg.cn/20200422143656638.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzg0NjE1MA==,size_16,color_FFFFFF,t_70