先看实例：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<title>html5雨滴掉落背景特效</title>
<link href="/css/demo.css" rel="stylesheet" media="all">
<script src="https://hm.baidu.com/hm.js?382f81c966395258f239157654081890"></script>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.qrcode.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
function fixHeight() {
var headerHeight = $("#switcher").height();
$("#iframe").attr("height", $(window).height()-54+ "px");
}
$(window).resize(function () {
fixHeight();
}).resize();
$('.icon-monitor').addClass('active');
$(".icon-mobile-3").click(function () {
$("#by").css("overflow-y", "auto");
$('#iframe-wrap').removeClass().addClass('mobile-width-3');
$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
$(this).addClass('active');
return false;
});
$(".icon-mobile-2").click(function () {
$("#by").css("overflow-y", "auto");
$('#iframe-wrap').removeClass().addClass('mobile-width-2');
$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
$(this).addClass('active');
return false;
});
$(".icon-mobile-1").click(function () {
$("#by").css("overflow-y", "auto");
$('#iframe-wrap').removeClass().addClass('mobile-width');
$('.icon-tablet,.icon-mobile,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
$(this).addClass('active');
return false;
});
$(".icon-tablet").click(function () {
$("#by").css("overflow-y", "auto");
$('#iframe-wrap').removeClass().addClass('tablet-width');
$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
$(this).addClass('active');
return false;
});
$(".icon-monitor").click(function () {
$("#by").css("overflow-y", "hidden");
$('#iframe-wrap').removeClass().addClass('full-width');
$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
$(this).addClass('active');
return false;
});
});
</script>
<script type="text/javascript">
function Responsive($a) {
if ($a == true) $("#Device").css("opacity", "100");
if ($a == false) $("#Device").css("opacity", "0");
$('#iframe-wrap').removeClass().addClass('full-width');
$('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
$(this).addClass('active');
return false;
};
</script>
</head>
<body id="by">
<!--https://www.17sucai.com/preview/11/2020-12-10/yd/-->
<div id="iframe-wrap">
<iframe id="iframe" src="demo.html" width="100%" height="890px" frameborder="0" style="background-color: rgba(0,0,0,0.1)"></iframe>
</div>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?382f81c966395258f239157654081890";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</body>
</html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Canvas下雨</title> <style> body { background: #0c0c0c; } </style> </head> <body> <script> (function (window, document) { var Vector2 = (function () { function Vector2(x, y) { this.x = x || 0; this.y = y || 0; } return Vector2; })(); Vector2.prototype.add = function (addend) { this.x += addend.x; this.y += addend.y; }; var RainDrop = (function () { function RainDrop(parent) { this.size = 2; this.parent = parent; this.init(); } return RainDrop; })(); RainDrop.prototype.init = function () { this.life = 0; this.ttl = Math.random() * 500 + 300; this.position = new Vector2(Math.random() * window.innerWidth, 0); this.velocity = new Vector2( 0.5 - Math.random() * 1, Math.random() * 1 + 0.2 ); this.terminalVelocity = 8; }; RainDrop.prototype.update = function () { if ( this.position.x > window.innerWidth || this.position.x < -this.size || this.life > this.ttl ) this.init(); if (this.position.y > this.parent.floor) { this.position.y = this.parent.floor - this.size; this.velocity.y *= -0.2 - Math.random() * 0.2; } this.life++; this.position.add(this.velocity); this.velocity.y += 0.1; }; var Rain = (function () { function Rain(args) { this.props = args; this.rainDrops = []; this.init(); } return Rain; })(); Rain.prototype.init = function () { this.createCanvas(); this.resize(); this.loop(); }; Rain.prototype.resize = function () { var attr = "position: absolute; z-index: 0; top: 0; left: 0; height: 100vh; 100vw;"; this.canvas.setAttribute("style", attr); this.dimensions = { window.innerWidth, height: window.innerHeight }; this.canvas.width = this.dimensions.width; this.canvas.height = this.dimensions.height; this.floor = this.dimensions.height * 0.7; }; Rain.prototype.createCanvas = function () { this.canvas = document.createElement("canvas"); this.ctx = this.canvas.getContext("2d"); document.body.appendChild(this.canvas); }; Rain.prototype.draw = function () { this.ctx.fillStyle = this.props.backgroundColor; this.ctx.fillRect(0, 0, this.dimensions.width, this.floor); for (var i = 0, len = this.rainDrops.length; i < len; i++) { var rainDrop = this.rainDrops[i]; rainDrop.update(); this.ctx.fillStyle = this.props.rainColor; this.ctx.fillRect( rainDrop.position.x, rainDrop.position.y, rainDrop.size, rainDrop.size ); } this.reflect(); }; Rain.prototype.reflect = function () { var grad = this.ctx.createLinearGradient( this.dimensions.width / 2, this.floor * 0.6, this.dimensions.width / 2, this.floor ); grad.addColorStop(0, "rgba(20,30,40,1)"); grad.addColorStop(1, "rgba(20,30,40,0)"); this.ctx.save(); this.ctx.scale(1, -1); this.ctx.translate(0, this.floor * -2); this.ctx.filter = "blur(2px) saturate(150%)"; this.ctx.drawImage( this.canvas, 0, 0, this.dimensions.width, this.floor, 0, 0, this.dimensions.width, this.floor ); this.ctx.fillStyle = grad; this.ctx.fillRect(0, 0, this.dimensions.width, this.floor); this.ctx.restore(); }; Rain.prototype.loop = function () { var timeout, self = this; if (self.rainDrops.length < self.props.rainDropCount) { timeout = window.setTimeout(function () { self.rainDrops.push(new RainDrop(self)); }, Math.random() * 200); } else if (timeout) { timeout = null; window.clearTimeout(timeout); } self.draw(); window.requestAnimationFrame(self.loop.bind(self)); }; window.onload = function () { var args = { rainDropCount: 500, rainColor: "rgba(150,180,255,0.8)", backgroundColor: "rgba(10,10,10,0.5)" }; var rain = new Rain(args); window.onresize = function () { rain.resize(); }; }; window.requestAnimationFrame = (function () { return ( window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); } ); })(); })(this, document); </script> </body> </html>