下雪js特效源码,网页下雪源码,圣诞节下雪代码,下雪代码,下雪特效源码
效果图
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
下雪js特效源码,网页下雪源码,圣诞节下雪代码,下雪代码,下雪特效源码相关推荐
- vb.net图书管理系统VS开发sqlserver数据库web结构vb编程源码网页
一.源码特点 vb.net 图书管理系统 是一套完善的web设计管理系统,系统具有完整的源代码和数据库,系统主要采用B/S模式开发. 下载地址: vb.net图书管理系统VS开发sql ...
- htmlunit抓取js执行后的网页源码
上次我不是写了一个自动抓取博客访问量吗 (点击打开链接) 可是昨天晚上我又运行的时候,发现不能用了.. 运行了几次 发现使用URLConnection 得到的网页源码和浏览器直接查看的不同. URLC ...
- HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码...
HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML ...
- HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码
HTML5汽车网页设计成品_学生DW汽车静态网页设计代做_web课程设计网页制作_宽屏大气汽车自驾游网站模板html源码 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML ...
- HTML源码-网页123算数题小游戏源码
介绍: HTML源码-网页数学小游戏-123算数题小游戏源码 网盘下载地址: http://kekewangLuo.net/RVZo8EC4yKu0 图片:
- java在线客服系统源码 springboot客服聊天源码 网页客服源码 netty通信技术，java源码
ava在线客服系统源码 springboot客服聊天源码 网页客服源码 netty通信技术,java源码 Java在线客服系统源码 企业网站客服聊天源码 网页客服源码 开发环境:Java + Spri ...
- 优化Recorder H5录音：可边录边转码上传服务器，支持微信提供Android IOS Hybrid App源码
文章目录 一.Recorder H5录音库的特性 (1)浏览器支持 (2)功能支持 二.使用预览截图 (1)移动端H5 (2)IOS Hybrid App (3)Android Hybrid App ...
- animation基础练习源码_用vue简单写一个音乐播放组件「附源码」
作者:vipbic 转发链接:https://segmentfault.com/a/1190000022980992 前言 上次小编也分享一个关于Vue 开发过音乐播放对项目: 基于 electron ...
- react相关代码库以及框架的源码解析
持续更新中react相关库源码浅析, react ts3 项目 ???对react相关代码库以及框架的源码进行了一定的分析 ?react16.6 View contents 源码实例分析:可见runl ...
- Eatting外卖基于瑞吉外卖代码全功能优化含源码
Eatting外卖基于瑞吉外卖代码全功能优化含源码 文章目录 项目的最终部署 源码地址 github:[源码地址](https://github.com/yangxingyue0623/Eating_ ...
最新文章
- Beep()之我迷糊了……
- mongoose 使用总结
- 【正一专栏】读《摆渡人》——原来你在这里
- linux复制文件命令cat ,Linux学习之四(复制移动文件命令cp等及查看文本命令cat等)2017-03-28...
- openssl漏洞怎么处理_以太坊UDP流量放大反射DDOS漏洞
- logstash的使用教程
- linux如何查看桌面环境变量,如何设置和查看Linux系统的环境变量
- 通过命令行创建MAVEN多模块项目
- 25个超有用的 AngularJS Web 开发工具
- Java视频教程（自学必备）
- 微信公众平台二次开发技术文档
- 【Dll调试】DLL调试方法
- 计算机快速格式化u盘启动,制作启动盘格式化u盘
- python扩展包怎么安装_Python中扩展包的安装方法详解
- 今日恐慌与贪婪指数为23，恐慌程度有所下降
- 大数据基础数据之中国法定节假日API
- 数仓建模之声明粒度 一文读懂什么是粒度 看完保证通透！
- SpringBoot响应式编程（整理一）
- 泰课在线android,泰课在线rollaball
- c语言中a的作用是什么意思,在c语言中* a是什么意思