演示

原理

使用JS动态创建块元素作为粒子，动态设置其位置、大小、颜色等属性，动态设置每个粒子的动画。

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><title>粒子飘落效果动画背景</title><style>* {padding: 0;margin: 0;user-select: none;box-sizing: border-box;}html,body {height: 100vh;}</style><style>.bg {width: 100vw;height: 100vh;background: radial-gradient(#003010, #000000);overflow: hidden;position: relative;}.bg>div {position: absolute;border-radius: 50%;}</style>
</head><body><div class="bg"><!-- 内层div元素作为粒子(particle)<div></div><div></div>... --></div><script>const PARTICLE_SUM = 32; // 粒子总数量const bg = document.querySelector(".bg");const particle_style = document.createElement('style');document.head.appendChild(particle_style);for (let i = 0; i < PARTICLE_SUM; i++) {// 创建粒子particle = document.createElement("div");// 下面设置粒子属性let size = Math.random() * 4;particle_style.sheet.insertRule(`.bg>div:nth-child(${i + 1}) {top: ${Math.random() * 100}vh;left: ${Math.random() * 100}vw;width: ${size + 2}vh;height: ${size + 2}vh;background: rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, ${Math.random()});box-Shadow: 0 0 ${Math.random() * 6}vh rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, ${Math.random()});opacity: 0;animation: anime${i} 8s linear ${Math.random() * 8}s infinite;}`);// 下面生成帧动画let xoffsetbase = Math.random() * 5;let yoffsetbase = Math.random() * 5 + 10;particle_style.sheet.insertRule(`@keyframes anime${i} {0% { opacity: 0; translate: calc(${xoffsetbase - 2.5}vw) calc(${-yoffsetbase}vh); }25% { opacity: 1; }50% { opacity: 0; translate: 0 0; }75% { opacity: 1; }100% { opacity: 0; translate: calc(${xoffsetbase + 2.5}vw) calc(${yoffsetbase}vh); }}`);// 将粒子插入到背景bg.appendChild(particle);}</script>
</body></html>

更多例程

更多例程可以参考下面代码仓库：
https://github.com/NaisuXu/front-end-web-examples

前端例程20220913：粒子飘落效果动画背景相关推荐

html canvas粒子线条组合动画背景特效
代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
前端canvas粒子动画背景（带鼠标跟随和点击散开）
目录闲聊看下效果先贴下代码吧大概说一下流程下面让我来详细说一下 1.初始化基础属性 2.添加鼠标移动事件并实时更新鼠标坐标 3.通过随机数生成粒子的坐标和横纵轴速度 4.渲染粒子并将粒子对象 ...
python随风飘落怎么画_树叶飘落动画制作如何制作树叶飘落的动画？视频画面添加树叶随风飘落的动画效果...
最近真是有一点秋的凉意了呢~每天早上起床走出房间的时候,就能感觉到有点凉凉的气息,真好,酷暑终于过去了,希望不要再炎热了,啊哈哈.对于秋天,相信大家先想到的就是那种漫天的落叶了吧~那种秋风阵阵,落叶缤 ...
Android之高仿QQ6.6.0侧滑效果（背景动画、透明+沉浸式状态栏、渐变效果）
根据需求实现类似QQ侧滑效果,之前看到过很多实现方式通过SlidingMenu,但是既然官方推出了自己的专属控件,那么使用DrawerLayout就是不二选择.且看下文. 一.先来看看官方文档解释 D ...
【前端实例代码】霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> ...
【前端实例代码】霓虹灯按钮动画效果悬停| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> & ...
android 缩放透明动画,Android之高仿QQ6.6.0侧滑效果（背景动画、透明+沉浸式状态栏、渐变效果）...
根据需求实现类似QQ侧滑效果,之前看到过很多实现方式通过SlidingMenu,但是既然官方推出了自己的专属控件,那么使用DrawerLayout就是不二选择.且看下文. 一.先来看看官方文档解释 D ...
[前端css-3] 实现图片卷帘效果，以及动画
[前端css-3] 实现图片卷帘效果,以及动画 1.效果展示: 效果预览 2.知识点: 1.position(相对定位/绝对定位)2.伪类(:after/:before)3.animation(动画) ...
canvas实现粒子跟随鼠标动画
canvas实现粒子跟随鼠标动画 canvas是前端绘制图形的好帮手,不少大牛的博客也会精心的用canvas绘制炫酷的背景.图形与可视化界面就是前端最好的名片,泡妞之前尚且知道要梳个靓头精心打扮,而c ...

前端例程20220913：粒子飘落效果动画背景

演示

原理

代码

更多例程

前端例程20220913：粒子飘落效果动画背景相关推荐

最新文章

热门文章