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

最新推荐文章于 2024-07-25 14:15:14 发布
最新推荐文章于 2024-07-25 14:15:14 发布
阅读量3.6k 收藏 27
点赞数 5
分类专栏： 前端 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43991241/article/details/125978378
版权

效果：

 

原理：

因为是用的纯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>

坐等夕阳落time
关注
  • 5
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS特效——下雪
weixin_52580677的博客
01-15 2383
通过JS实现屏幕飘雪 JS实现飘雪特效 //创建雪花元素 function snow() { //获取视窗的宽高 var width = window.innerWidth; var height = window.innerHeight; var snow = document.createElement("div"); //创
HTML+CSS每周一练——简单下雪动画
YuWo_lh的博客
12-03 280
HTML+CSS每周一练——简单的下雪效果
前端特效——简单下雪（纯css）
坐等夕阳落time的博客
07-19 711
前端特效——简单下雪
程序员为女朋友制作的高清下雪效果，学前端开发
2301_78416672的博客
04-06 540
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽。
2024年前端最新历时 10 个多月，学习了这 132 个CSS 特效!，腾讯T2大牛亲自讲解
2401_84616838的博客
05-07 773
全网独播-价值千万金融项目前端架构实战从两道网易面试题-分析JavaScript底层机制RESTful架构在Nodejs下的最佳实践开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一线互联网企业如何初始化项目-做一个自己的vue-cli思维无价，看我用Nodejs实现MVC代码优雅的秘诀-用观察者模式深度解耦模块前端高级实战，如何封装属于自己的JS库VUE组件库级组件封装-高复用弹窗组件。
学习CSS3，模拟春雪漫天飘的动画效果
xingyu_qie的专栏
04-04 2672
清明时节雨纷纷，但有些地方却下起了大雪，今天我们就用所学的CSS3知识，模拟一下夜晚漫天飘雪的场景吧。
css实现下雪效果 （快圣诞啦）
最是人间留不住，朱颜辞镜花辞树。
12-17 3134
仅用css就能完成雪花效果~雪花飘飘~~
雪花特效---纯css实现
青菜馒头web前段
10-19 7783
html代码<div class="snow-container"> <div class="snow foreground"></div> <div class="snow foreground layered"></div> <div class="snow middleground"></div> <div class="snow middleground layered"><
vue结合css动画animation实现下雪效果
@必意玲
01-17 1061
GIF录屏文件太卡有点卡，实际是很丝滑的。
前端纯css实现动态雪花效果
08-07
在前端开发中，创建引人入胜的视觉特效可以极大地提升用户体验。本示例将详细介绍如何使用纯CSS来实现动态的雪花飘落效果，无需借助JavaScript。这种效果可以使网页在冬季或者特定节日如圣诞节时增添一种浪漫和温馨...
CSS3雪花粒子下雪动画特效
07-24
在本文中，我们将深入探讨如何使用CSS3来创建一个引人入胜的“雪花粒子下雪动画特效”。这种效果能够为网页增添冬季的氛围，或者仅仅作为一种视觉上的趣味元素吸引用户的注意力。CSS3，全称Cascading Style Sheets ...
CSS雪花特效
09-20
总的来说，CSS雪花特效是一个结合了CSS动画、伪元素和可能的JavaScript交互的复杂但有趣的项目。它展示了前端开发中创造性的一面，同时也需要对CSS的掌握有较深的理解。通过不断调整和优化，你可以创造出一个既美观...
CSS3雪花粒子下雪动画特效.zip
10-08
本压缩包“CSS3雪花粒子下雪动画特效.zip”正是这样一个实例，它展示了如何使用CSS3来创建逼真的雪花飘落效果，同时结合jQuery增强交互性，为网页增添节日或浪漫气氛。 首先，让我们了解CSS3中的关键帧动画（@...
html5 canvas全屏雪花纷飞背景动画特效
06-11
在这个“html5 canvas全屏雪花纷飞背景动画特效”中，我们将探讨如何利用Canvas实现一个逼真的下雪场景，让网页背景如同冬日里纷飞的雪花。 首先，我们需要在HTML文件（如index.html）中创建一个`<canvas>`元素，它...
flex：1
m0_47999208的博客
07-25 388
2.flex-shrink,在flex布局中经常会遇到页面宽度不够而导致的文字换行问题，由于flex布局默认flex-shrink为1,就是默认可以缩小然后会导致换行，需要设置flex-shrink:0,默认不缩小就可以了。上面是120px高，给下面的外盒子高度设置为calc(100% - 120px);答：给外部盒子添加display：flex,内部盒子设置为flex-grow：1。现在有一个上下盒子，上面是固定值，下面是随页面高度变换的，如何让下面盒子的子盒子高度适应外部的高度呢？
CSS 自适应图片根据 div 大小进行均匀填充
gz_qiulinyong的博客
07-24 961
在Web开发中，经常需要图片根据其容器的大小进行自适应填充，使得图片在任何设备和屏幕尺寸下都能保持良好的显示效果。本文将介绍如何使用CSS中的object-fit属性来实现这一需求。使用object-fit属性可以非常方便地实现图片在容器中的自适应填充，保持图片的宽高比并使其均匀填充容器。这个方法适用于各种情况，例如响应式设计和多设备支持。
CSS前端面试题——CSS 中，有哪些方式可以隐藏页面元素？有什么区别?
lbcbjtlhmjq的博客
07-25 307
这些方式的区别在于是否占据空间和是否可见，开发者可以根据实际情况选择不同的方式来隐藏页面元素。
css更改图片颜色
最新发布
程序员
07-25 195
这些滤镜组合在一起，可以产生独特的视觉效果，可能用于特定的设计需求或视觉效果。：将图像的颜色反转51%。即把图像的颜色变为它们的补色，反转比例为51%。css更改图片颜色，比较时候颜色单一的图片，比如logo之类的。：将图像转换为深褐色调，类似于旧照片效果，深褐色比例为94%。：增加图像的饱和度，使颜色更加鲜艳，饱和度为原来的6433%。：调整图像的亮度，使图像的亮度变为原来的93%。：调整图像的对比度，使对比度变为原来的101%。) 添加一系列的滤镜效果。：改变图像的色相，将色相顺时针旋转190度。
前端写动态的下雪html网页
05-11
下雪效果可以通过 CSS 动画和 JavaScript 实现。以下是一个简单的示例，可以在 HTML 页面中使用： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>下雪效果</title> <style> /* 雪花样式 */ .snowflake { position: absolute; width: 10px; height: 10px; background-color: #fff; border-radius: 50%; pointer-events: none; animation: snow linear infinite; } /* 雪花动画 */ @keyframes snow { 0% { transform: translateY(-40px) rotate(0deg); } 100% { transform: translateY(600px) rotate(360deg); } } </style> </head> <body> <script> // 创建雪花 function createSnowflake() { const snowflake = document.createElement("div"); snowflake.classList.add("snowflake"); snowflake.style.left = Math.random() * window.innerWidth + "px"; document.body.appendChild(snowflake); setTimeout(() => { snowflake.remove(); }, 10000); } // 生成雪花 setInterval(createSnowflake, 100); </script> </body> </html> ``` 代码中使用了 CSS 动画和 JavaScript 定时器来实现雪花的飘落效果。在页面中加载该代码后，就能看到下雪的效果了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值