|
首先上效果
Document - Google Chrome 2021-11-21 20-35-49
我们第一步就是把上次的代码给它Ctrl+c / Ctrl+v (这里严重声明一下，我们能当裁缝就当裁缝，不像某些牛天天卷)然后把里面的星星图案给他换成雪花
这里我们用了一个函数来执行这个效果，使参数为元素数量，通过改变x的值就可以直接改变元素数量。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@import url(https://at.alicdn.com/t/font_2949316_52on5r8j54b.css);
body{
background: #1ec7c7;
}
</style>
</head>
<body>
<script>
function getRandom(x,y){
return Math.random() * (y-x) + x;
}
function snowFlake(x){
for(var i=0; i<x; i++){
var Snowflake = document.createElement('Snowflake');
Snowflake.className = 'iconfont icon-012-snowflake';
Snowflake.style.fontSize = getRandom(10,30) + 'px';
Snowflake.style.color = 'rgb('+ 255 +',' + 255 + ',' + 255 +')';
Snowflake.style.position = 'absolute';
Snowflake.style.top = getRandom(0,window.innerHeight) + 'px';
Snowflake.style.left = getRandom(0,window.innerWidth) + 'px';
Snowflake.style.opacity = getRandom(0.2,0.8);
document.body.appendChild(Snowflake);
}
}
(童靴们可以对比下星星的代码就可以详细知道有什么变化了)就像这样，但是还缺点什么，音乐吗？并不是 是落下的效果，这才是雪花的灵魂
那么我们先声明一个运动函数，
function snowRun(){
}
让一片雪花动起来，那么所有雪花就都可以动起来了
首先获取我们的每一个雪花(这里的每一个雪花都是我们上面的SnowFlake元素)
var SnowFlakeS = document.getElementsByTagName('SnowFlake');
这里通过定义一个数组SnowFlakeS来获取元素
然后对每个元素进行遍历（说到这个又想到那个被各种树的遍历支配的恐惧）
for(var i=0; i<SnowFlakeS.length; i++){
var SnowFlake = SnowFlakeS[i];
}
然后使元素的top属性每次加一实现移动
for(var i=0; i<SnowFlakeS.length; i++){
var SnowFlake = SnowFlakeS[i];
var top = parseInt(getComputedStyle(SnowFlake).top);
top++;
SnowFlake.style.top = top + 'px';
}
但是这样会出现一个问题-------雪花不会再次生成
移动的雪花下去就消失了，所以我们要让元素下去以后重新从网页最顶端出现
if(top>=window.innerHeight){
SnowFlake.style.top = 0;
}
当元素的top属性大于网页的高度(也就是离开网页之后)使top的值为0，让雪花再次从顶端落下，
if(top>=window.innerHeight){
SnowFlake.style.top = 0;
SnowFlake.style.fontSize = getRandom(10,30);
SnowFlake.style.left = getRandom(0,window.innerWidth) + 'px';
SnowFlake.style.opacity = getRandom(0.2,0.8);
}
并且我们重新使元素的大小、移动轨迹以及透明度发生变化
这个全部操作我们把它放在一个定时器中实现
setInterval(function(){},x);
这里的 x 可以设置时间的快慢，在这里也就是我们元素下落的速度快慢
最后我们执行这两个函数
snowFlake(300);
snowRun();
|