明天你会感谢今天奋力拼搏的你。
ヾ(o◕∀◕)ﾉヾ
之前在一些博客上发现有飘雪的特效，鼠标放上面还会把周围的雪花弹开。哎呦，好好玩的样子，就又去扒拉了两下。
实现效果也非常简单，只要引用css和js文件，同时在body中放入一个<canvas id="Snow"></canvas>即可。demo如下所示。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>飘雪demo</title>
<link type="text/css" rel="stylesheet" href="./snow.css"/>
</head>
<body style='background:black'>
<div class="Snow">
<canvas id="Snow"></canvas>
</div>
</body>
<script src="./snow.js"></script>
</html>而具体飘雪的源码是通过抓取页面所得，不知为哪位大佬所创，在此发出只做学习研究所用。
snow.css:
#Snow{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
background: rgba(125,137,95,0.1);
pointer-events: none;
}
.feedbackCon img:hover {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
.feedbackCon img {
border-radius: 100px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#back-to-top {
background-color: #00CD00;
box-shadow: 0 0 6px #00CD00;
color: #444444;
padding: 10px 10px;
position: fixed;
right: 50px;
cursor: pointer;
}
#div_digg{
position:fixed;
bottom:0px;
width:120px;
margin-right:60px;
right:60px;
margin-bottom:1px;
border:2px solid #085;
padding:10px;
background-color:#fff;
opacity:0.3;
border-radius:5px 5px 5px 5px !important;
box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
transition-duration: 0.5s;
}
#div_digg:hover{
opacity:1;
}snow.js:
(function() {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
window.requestAnimationFrame = requestAnimationFrame;
})();
(function() {
var flakes = [],
canvas = document.getElementById("Snow"), //画布ID，与上一步创建的画布对应
ctx = canvas.getContext("2d"),
flakeCount = 200, //雪花数量，数值越大雪花数量越多
mX = -100,
mY = -100;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
function snow() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < flakeCount; i++) {
var flake = flakes[i],
x = mX,
y = mY,
minDist = 150, //雪花距离鼠标指针的最小值，小于这个距离的雪花将受到鼠标的排斥
x2 = flake.x,
y2 = flake.y;
var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)),
dx = x2 - x,
dy = y2 - y;
if (dist < minDist) {
var force = minDist / (dist * dist),
xcomp = (x - x2) / dist,
ycomp = (y - y2) / dist,
deltaV = force / 2;
flake.velX -= deltaV * xcomp;
flake.velY -= deltaV * ycomp;
} else {
flake.velX *= .98;
if (flake.velY <= flake.speed) {
flake.velY = flake.speed
}
flake.velX += Math.cos(flake.step += .05) * flake.stepSize;
}
ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")"; //雪花颜色
flake.y += flake.velY;
flake.x += flake.velX;
if (flake.y >= canvas.height || flake.y <= 0) {
reset(flake);
}
if (flake.x >= canvas.width || flake.x <= 0) {
reset(flake);
}
ctx.beginPath();
ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2);
ctx.fill();
}
requestAnimationFrame(snow);
};
function reset(flake) {
flake.x = Math.floor(Math.random() * canvas.width);
flake.y = 0;
flake.size = (Math.random() * 3) + 2; //加号后面的值，雪花大小，为基准值，数值越大雪花越大
flake.speed = (Math.random() * 1) + 0.5; //加号后面的值，雪花速度，为基准值，数值越大雪花速度越快
flake.velY = flake.speed;
flake.velX = 0;
flake.opacity = (Math.random() * 0.5) + 0.3; //加号后面的值，为基准值，范围0~1
}
function init() {
for (var i = 0; i < flakeCount; i++) {
var x = Math.floor(Math.random() * canvas.width),
y = Math.floor(Math.random() * canvas.height),
size = (Math.random() * 3) + 2, //加号后面的值，雪花大小，为基准值，数值越大雪花越大
speed = (Math.random() * 1) + 0.5, //加号后面的值，雪花速度，为基准值，数值越大雪花速度越快
opacity = (Math.random() * 0.5) + 0.3; //加号后面的值，为基准值，范围0~1
flakes.push({
speed: speed,
velY: speed,
velX: 0,
x: x,
y: y,
size: size,
stepSize: (Math.random()) / 30 * 1, //乘号后面的值，雪花横移幅度，为基准值，数值越大雪花横移幅度越大，0为竖直下落
step: 0,
angle: 180,
opacity: opacity
});
}
snow();
};
document.addEventListener("mousemove", function(e) {
mX = e.clientX,
mY = e.clientY
});
window.addEventListener("resize", function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
init();
})();
全部评论