雪花飞舞随机性的处理
<style>.mybox {
margin: auto;
position: relative;
width: 700px;
height: 500px;
display: block;
background: #000;
}
.snow {
position: absolute;
width: 15px;
height: 15px;
left: 0; top: 0;
color: #eee;
opacity: 0.2;
animation: fly 10s linear infinite, xie 10s linear infinite;
}
@keyframes fly {
0% { opacity: 0.4; }
90% { top: 100%; opacity: 0.6}
100% { top: 100%; opacity: 0; }
}
@keyframes xie {
100% { transform: translateX(var(--kk))rotate(360deg); }
}
</style>
<div id="mybox" class="mybox"></div>
<script language="javascript">
function addsnow() {
var o = document.getElementById('mybox');
for(i=0; i<600; i++) {
var snow = document.createElement('span');
var text = document.createTextNode('*');
var fsize = Rnd(5,60);
snow.appendChild(text);
snow.style.setProperty('--kk', (Rnd(-300,300) + "px"));
snow.className = "snow";
snow.style.left = Rnd(-10,100) + "%";
snow.style.top = Rnd(-600,-40) + "px";
snow.style.fontSize = fsize + "px";
snow.style.animationDelay = Rnd(0,10) + "s";
snow.style.animation.duration = Rnd( 5,12) + "s";
o.appendChild(snow);
}
}
function Rnd(min, max){ return Math.floor(Math.random() * (max - min + 1) + min); }
addsnow();
</script>
一楼，没有cut掉多余的部分，所以雪花是从页面顶部倾斜而下，并从黑色窗体的左右和下边溢出。防止溢出，只需在父元素加入一句：
overflow: hidden;
雪花从一个负值的 top 出发，top值随机生成，这就产生了垂直方向的一定差异性，达成的效果是雪花的出场有快有慢。
还加入一个animation的延时功能，尽管动画的 animationdelay 只在动画运行之初有效，还是能产生错落而下的垂直观感。
雪花有大有小，这也是JS随机产生随机数的功劳，JS每生成一个子元素，都随机设置子元素的大小（一楼演示是字体大小随机设置）。
雪花飞舞时有轻微的水平漂移现象，向左向右的都有，这也是JS干的，JS生成一个 -300 到 300 的随机数，令CSS的 transform: translateX() 指令使用。这里，CSS用上了一个变量（--kk），JS将数值赋予它。
也许我还应该多写一个随机数生成机制，以便不同性质的随机数都能取到更满意的值。先酱紫吧。 一楼代码：
<style>
.mybox {
margin: auto;
position: relative;
width: 700px;
height: 500px;
display: block;
background: #000;
}
.snow {
position: absolute;
width: 15px;
height: 15px;
left: 0; top: 0;
color: #eee;
opacity: 0.2;
animation: fly 10s linear infinite, xie 10s linear infinite;
}
@keyframes fly {
0% { opacity: 0.4; }
90% { top: 100%; opacity: 0.6}
100% { top: 100%; opacity: 0; }
}
@keyframes xie {
100% { transform: translateX(var(--kk))rotate(360deg); }
}
</style>
<div id="mybox" class="mybox"></div>
<script language="javascript">
function addsnow() {
var o = document.getElementById('mybox');
for(i=0; i<600; i++) {
var snow = document.createElement('span');
var text = document.createTextNode('*');
var fsize = Rnd(5,60);
snow.appendChild(text);
snow.style.setProperty('--kk', (Rnd(-300,300) + "px"));
snow.className = "snow";
snow.style.left = Rnd(-10,100) + "%";
snow.style.top = Rnd(-600,-40) + "px";
snow.style.fontSize = fsize + "px";
snow.style.animationDelay = Rnd(0,10) + "s";
snow.style.animation.duration = Rnd( 5,12) + "s";
o.appendChild(snow);
}
}
//生成两个数之间的整数
function Rnd(min, max){ return Math.floor(Math.random() * (max - min + 1) + min); }
addsnow();
</script>
还以为雪花是缩小的闪光棒，原来是个这个*的字符，聪明{:4_187:} 红影 发表于 2022-2-4 13:04
还以为雪花是缩小的闪光棒，原来是个这个*的字符，聪明
这里是符号 * ，那个帖子则是使用线性背景色绘制出来的子元素外观：
background-image:
linear-gradient(0, rgba(255,255,255,0) 40%, #fff 40%, #fff 60%, rgba(255,255,255,0) 60%),
linear-gradient(45deg, rgba(255,255,255,0) 43%, #fff 43%, #fff 57%, rgba(255,255,255,0) 57%),
linear-gradient(90deg, rgba(255,255,255,0) 40%, #fff 40%, #fff 60%, rgba(255,255,255,0) 60%),
linear-gradient(135deg, rgba(255,255,255,0) 43%, #fff 43%, #fff 57%, rgba(255,255,255,0) 57%); 这个虽然生成雪花比生成雨点方便，但整体代码比那个还复杂{:4_173:} 红影 发表于 2022-2-4 13:04
还以为雪花是缩小的闪光棒，原来是个这个*的字符，聪明
对5#的补充：
这里，一楼是字符雪花，可以选择他们看看span的样子。而那边音画版的雪花是元素雪花，理论上是无法选择的 红影 发表于 2022-2-4 13:08
这个虽然生成雪花比生成雨点方便，但整体代码比那个还复杂
JS多了一个随机数生成函数，多几个变量，多一个处理CSS变量的机制；CSS多一个 @keyframes 动画 马黑黑 发表于 2022-2-4 13:06
这里是符号 * ，那个帖子则是使用线性背景色绘制出来的子元素外观：
background-image:
那个看着更像，非常漂亮{:4_187:} 马黑黑 发表于 2022-2-4 13:11
JS多了一个随机数生成函数，多几个变量，多一个处理CSS变量的机制；CSS多一个 @keyframes 动画
你说起来轻描淡写，对我来说就是云里雾里了{:4_173:} snow.style.left = Rnd(-10,100) + "%";
这个看着不大啊，为什么下面的移动条都会动了，是-10的值引起的？ 红影 发表于 2022-2-4 15:23
snow.style.left = Rnd(-10,100) + "%";
这个看着不大啊，为什么下面的移动条都会动了，是-10的值引起的 ...
这句是控制水平方向的位置，不是top 红影 发表于 2022-2-4 15:22
你说起来轻描淡写，对我来说就是云里雾里了
方法、函数、概念，只要有不理解的，对代码的理解就成问题 红影 发表于 2022-2-4 15:15
那个看着更像，非常漂亮
那个也是有点粗糙，但好歹像那么回事 马黑黑 发表于 2022-2-4 19:42
这句是控制水平方向的位置，不是top
知道是水平的，为什么会超出论坛的尺寸了呢？ 马黑黑 发表于 2022-2-4 19:43
方法、函数、概念，只要有不理解的，对代码的理解就成问题
是的，那是肯定的。 马黑黑 发表于 2022-2-4 19:45
那个也是有点粗糙，但好歹像那么回事
黑黑谦虚了，已经很漂亮了呢{:4_187:} 红影 发表于 2022-2-4 21:51
黑黑谦虚了，已经很漂亮了呢
一般般，过得去 红影 发表于 2022-2-4 21:50
是的，那是肯定的。
有的爱好者常常花很长时间去系统学习必修的内容，而有的则边做边学，我觉得后者对非专业的人员而言是可行的，就是路会弯一点 红影 发表于 2022-2-4 21:50
知道是水平的，为什么会超出论坛的尺寸了呢？
是 keyframes 设计的动画里，有一个参数 transform: translateX，它负责控制雪花的水平漂移，它的值也是个负数到整数的随机数，边缘的雪花就可能出界。
页:
[1]
2