雪花飞舞随机性的处理

马黑黑

马黑黑

一楼，没有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>

红影

还以为雪花是缩小的闪光棒，原来是个这个*的字符，聪明

马黑黑

红影 发表于 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%);

红影

这个虽然生成雪花比生成雨点方便，但整体代码比那个还复杂

马黑黑

红影 发表于 2022-2-4 13:04
还以为雪花是缩小的闪光棒，原来是个这个*的字符，聪明

对5#的补充：

这里，一楼是字符雪花，可以选择他们看看span的样子。而那边音画版的雪花是元素雪花，理论上是无法选择的

马黑黑

红影 发表于 2022-2-4 13:08
这个虽然生成雪花比生成雨点方便，但整体代码比那个还复杂

JS多了一个随机数生成函数，多几个变量，多一个处理CSS变量的机制；CSS多一个 @keyframes 动画

红影

马黑黑 发表于 2022-2-4 13:06
这里是符号 * ，那个帖子则是使用线性背景色绘制出来的子元素外观：

background-image:

那个看着更像，非常漂亮

红影

马黑黑 发表于 2022-2-4 13:11
JS多了一个随机数生成函数，多几个变量，多一个处理CSS变量的机制；CSS多一个 @keyframes 动画

你说起来轻描淡写，对我来说就是云里雾里了

红影

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
那个也是有点粗糙，但好歹像那么回事

黑黑谦虚了，已经很漂亮了呢

马黑黑

红影 发表于 2022-2-4 21:51
黑黑谦虚了，已经很漂亮了呢

一般般，过得去

马黑黑

红影 发表于 2022-2-4 21:50
是的，那是肯定的。

有的爱好者常常花很长时间去系统学习必修的内容，而有的则边做边学，我觉得后者对非专业的人员而言是可行的，就是路会弯一点

马黑黑

红影 发表于 2022-2-4 21:50
知道是水平的，为什么会超出论坛的尺寸了呢？

是 keyframes 设计的动画里，有一个参数 transform: translateX，它负责控制雪花的水平漂移，它的值也是个负数到整数的随机数，边缘的雪花就可能出界。