前端特效——复杂下雪，雪花纷飞（纯css)

效果：

原理：

因为是用的纯css，所以为了实现很多个雪花，我们就需要创建200个div（数量适量多即可）

然后先设置雪花div的共同属性：雪花的背景图片是雪花，给初始大小width: 10px;height: 10px;然后绝对定位到左上角。（左上角无实际意义，总之就先把雪花放到窗口顶部，然后你能先看得到）

因为雪花有大有小，所以用到了缩放 transform: scale(x)，我取的是1-3的随机数: random(3)

然后雪花需要移动起来：transform: translate(x,y)

因为雪花移动x轴的幅度不会很大，就是不要搞成从左0移动到右100vw，我们要控制雪花x轴的飘动差在10vw之间，所以 random(20) - 10 得出 -10 ~10

但是各个雪花之间初始所在的位置也是不一样的，如果一样，那大家不都是从一个点出发了吗。。所以我们需要设置雪花在X轴的初始位置：random(100)vw

然后就是加动画：从x轴某点移动到x轴某点（飘动差在10vw之间），然后从我们肉眼看不见的地方(-5vh) 落到地上 100vh

因为是200个不一样的雪花（大小，速度），各自飘动的时间也是不一样的，所以也要给随机数，但是又不能让某个或某些雪花存在1s就下完的情况，所以也要设置一个最低值 8s

最后，为了我们打开网页的时候，能提前看到雪花在飘落了，所以用到了延时 -Xs，表示动画提前开始了 X秒，同理，为了雪花纷飞的效果，我们不能让所有雪花都一起提前X秒，而是一个随机数。

理解了以上原理，你就可以手敲代码了，但是200个div的样式，然后还要想随机数，累死你

我用了CSS预处理器之sass

首先VSCode安装 Easy Sass的插件

然后在css文件夹创建复杂下雪.scss（注意：后缀是scss)

然后随便写点css样式，保存，就会自动生成同名字的css文件

在这里我们用到循环，用到随机数函数

循环：

@for $i from 1 through 200 {// 第i个雪花div.snow:nth-child(#{$i}) {}
}

随机数函数：

#{random(20) - 10}
#{random(3)
#{8 + random(20)}
-#{random(10)}

懂了上面语法后就可以直接写了

复杂下雪.scss：

.snow {position: absolute;width: 10px;height: 10px;background-image: url("../imgs/snowitem.png");background-size: cover;
}@keyframes move1{0%{// top: 0;// left: var(--left-ini);transform: translate(var(--left-ini),-5vh) scale(var(--size));}100%{// top: 100vh;// left: var(--left-end);transform: translate(var(--left-end),100vh);}
}@for $i from 1 through 200 {.snow:nth-child(#{$i}) {--left-ini: #{random(20) - 10}vw;--left-end: #{random(20) - 10}vw;--size: #{random(3)};// top: -5vh; // 不用top的原因，就是为了不使初始状态时，空间的某块行区域是空白的，不好看，直接用y位移就可以根据时间的随机性，让空间的同时刻每一行都能含有雪花left: #{random(100)}vw; // 从原来的位置左右移动一点点距离，如果直接使用left当位移点，移动的跨幅太大了，不好看animation: move1 #{8 + random(20)}s linear -#{random(10)}s infinite; // 用了延时，就是为了能有一运行代码就能提前有雪花出现在页面上}
}

复杂下雪.html

<!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>简单下雪</title><link rel="stylesheet" href="./css/复杂下雪.css" /><style>* {margin: 0;padding: 0;}body {background: rgb(41, 43, 41);height: 100vh;overflow: hidden;}/* .snow {position: absolute;width: 10px;height: 10px;background-image: url("imgs/snowitem.png");background-size: cover;}.snow:nth-child(1) {top: -100px;left: 300px;transform: scale(3);animation: move1 22s linear -8s infinite;}@keyframes move1{30.11%{top: 20vh;left: -100px;}100%{top: 100vh;left: 500px;}} */</style>
</head><body><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div><div class="snow"></div>
</body></html>

前端特效——复杂下雪，雪花纷飞（纯css)相关推荐

前端学习（284）：纯css实现翻书效果
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
CSS3实战开发: 纯CSS实现图片过滤分类显示特效
CSS3实战开发: 纯CSS实现图片过滤分类显示特效原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大 ...
【web前端特效源码】使用 HTMLCSSJavaScript实现各种跳跃浮动慢跑翻转旋转坠落的魔幻文字动画效果~太上头了~/动画效果|前端开发|IT软件开发基础入门教程|网页制作|网站开发定制
b站视频演示效果: [web前端特效源码]使用 HTML&CSS&JavaScript实现各种跳跃浮动慢跑翻转旋转坠落的魔幻文字动画效果~太上头了~/动画效果|前端开发|IT软件开效 ...
用纯css模拟下雪的效果
下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥. 1.前言由于公司产品的活动,需要模拟类似下雪的效果.浏览器实现动画无非 ...
超详细的纯CSS的照片墙特效
超详细的纯CSS的照片墙特效你好,欢迎来到Amy的第一篇博客呀~ 此博客纯属个人原创哦~ 前些天在公开课上讲过一个类似于拍立得的照片特效,然后在一个页面上放了多张就形成了一个照片墙,效果如下: 鼠标 ...
82.纯CSS液体加载特效
效果 (源码网盘地址在最后) 大家都说简历没项目写,我就帮大家找了一个项目,还附赠[搭建教程]. 演示视频 [前端特效 82]纯CSS液体加载特效视频地址一:https://www.ixigua.c ...
html怎么改变图片亮度,纯干货，前端学者的福音！如何使用css滤镜改变图片颜色...
原标题:纯干货,前端学者的福音!如何使用css滤镜改变图片颜色说到对图片进行处理,我们经常会想到PS,美图秀秀这类的图像处理工具.作为前端,全栈开发者,我们经常会需要处理一些特效,例如根据不同的状态 ...
纯css模拟下雪效果
效果如其名,想必都见过下雪(可能南方人除外哈哈),但下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果. 1.前言由于公司产品的活动,需要模拟类似下雪 ...
纯CSS自定义button按钮的点击特效
纯css自定义button按钮的点击特效,实现背景变化效果图如下: 代码如下: <!DOCTYPE html> <html> <head><meta cha ...
一分钟实现纯CSS全屏滚动特效
一分钟实现纯CSS全屏滚动特效 Hello World [你好世界]-Hello World-"无论世界多么崩坏,我都只想再见到她的笑颜" 端午节快乐! 会用到的CSS属性 bac ...

前端特效——复杂下雪，雪花纷飞（纯css)

前端特效——复杂下雪，雪花纷飞（纯css)相关推荐

最新文章

热门文章