纯css实现粒子效果

最新推荐文章于 2024-08-08 15:10:37 发布
最新推荐文章于 2024-08-08 15:10:37 发布
阅读量1.6w 收藏 21
点赞数 30
分类专栏： css3 less&sass CSS3演武场 文章标签： CSS3 sass 粒子效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/whqet/article/details/27579199
版权
本文介绍如何利用CSS3（Sass）创建粒子效果，通过box-shadow生成粒子，结合animation和transform 3d的translateZ实现动画。详细阐述了思路与实现步骤，并提供了在线研究和源码下载链接。
摘要由CSDN通过智能技术生成
前端开发whqet,csdn,王海庆,whqet,前端开发专家

好久没有更新的CSS3演武场系列，半年前搁浅的一篇文章赋予新年新气象闪亮登场了，研究一下利用css（sass）实现粒子效果，主要使用box-shadow生成粒子，利用css3 animation和translateZ实现动画。

------------------------------------------------------------

--我参加了博客之星评选，如果你喜欢我的博客，求投票，您的支持是我的动力之源，走起！

-----------------------------------------------------------------------------------------

看效果先


思路解析

1.box-shadow生成粒子，赋予随机位置、随机颜色，利用sass的for循环和random()实现。

2.animation实现动画。

3.transform 3d实现深度动画，主要使用translateZ。

实现

下面我们分别来实现一下，源码我放在了codepen，请大家移步。

----------------

-----------------------------

最低0.47元/天 解锁文章
whqet
关注
专栏目录
27.CSS粒子特效
粉丝们务必加入微信粉丝群
08-30 928
【代码】27.CSS粒子特效。
css html实现粒子特效,CSS粒子效果
weixin_42165490的博客
06-04 1360
cssbody {padding: 40px 0;font-family: 'bebas', sans-serif;background-color: #3ecbff;}body .textcontainer {padding: 40px 0;text-align: center;}body .particletext {text-align: center;font-size: 48px;pos...
CSS实现一个粒子动效的按钮
DHLSP15的博客
01-14 527
CSS实现一个粒子动效的按钮
前端已经学会vue，做粒子效果
最新发布
wj0712的博客
08-08 1569
这些学习内容将帮助你有效地实现粒子效果，并将其整合到你的 Vue 项目中。
css html实现粒子特效,CSS实现粒子动态按钮效果
weixin_29435467的博客
06-04 2203
原文链接按钮(button)可能是网页中最常见的组件之一了，大部分都平淡无奇，如果你碰到的是一个这样的按钮，会不会忍不住多点几次呢？通常这类效果第一反应可能就是借助 canvas 了，比如下面这个 案例效果就更加震撼了，当然 canvas 实现也有一定的门槛，而且实际使用起来也略微麻烦(所有 js 实现的通病)，这里尝试一下 CSS 的实现方式。生成粒子抛开 js 方案，还有 HTML 和 CSS...
css粒子效果
Haines
11-23 1007
css粒子
CSS-动效 纯css粒子动效 | 转圈圈 | 上下弹动
WangYan的博客
10-14 2585
粒子动效 旋转 弹动
使用HTML、CSS和JavaScript来创建一个粒子效果，粒子会跟随鼠标点击位置生成
日常笔记/总结/系列知识梳理
02-05 2080
JavaScript最初是为了在网页上添加简单的交互功能而创建的，但随着时间的推移，它已经发展成为一种功能强大且广泛使用的语言。CSS与HTML结合使用，用于控制网页中的布局、颜色、字体、大小、边距等方面的样式。JavaScript是一种功能强大且灵活的编程语言，用于为网页添加交互和动态性，并且已经成为Web开发的基础之一。这只是HTML的一些基本概念，HTML有很多其他的标签和功能，可以根据需要进一步学习和掌握。这些只是CSS的一些基本概念，CSS还有更多的属性和功能，可以根据需要进一步学习和掌握。
纯css3炫酷粒子动画特效
12-13
总的来说，"纯css3炫酷粒子动画特效"展示了CSS3的强大能力，以及如何通过组合使用动画、转换、预处理器和可能的JavaScript来创建引人注目的网页互动元素。对于前端开发者来说，掌握这些技术是提升网页设计和用户体验...
css html实现粒子特效,纯CSS实现的粒子发散动画效果
weixin_36048947的博客
06-04 1195
CSS语言：CSSSCSS确定html,body,.wrap {height: 100%;}body {background: black;overflow: hidden;}.wrap {transform-style: preserve-3d;perspective: 300px;}.c {position: absolute;top: 50%;left: 50%;height: 6px;wi...
html+css+js实现梦幻粒子飘落的特效
12-03
用200多行的代码实现梦幻粒子随机飘落特效，非常的唯美，也适合做动态桌面壁纸，适合新手学习js。也快项目引入。
css 波浪粒子特效html 代码
03-29
css 波浪粒子特效html 代码：根据鼠标动态自动根据波浪的方式 进行跳动，很不错的一款 js 特效代码 ，比较适合用来做后台登录背景页面，喜欢的朋友可以下载。
网络粒子特效 html js css
09-05
canvas绘制网格状的粒子特效，粒子跟随鼠标移动，相邻粒子连结成线
CSS3发光粒子背景动画特效
04-25
CSS3发光粒子背景动画特效是一款基于css3 animation属性绘制的透明悬浮发光粒子酷炫动画特效。
CSS3雪花粒子下雪动画特效
07-24
CSS3雪花粒子下雪动画特效是一款刷新网页随机生成雪花动画特效。
纯CSS3粒子雪花元素动画特效
07-24
【纯CSS3粒子雪花元素动画特效】是一种利用CSS3技术实现的动态视觉效果，它能够在网页背景上模拟出逼真的雪花飘落场景。这个特效完全基于CSS，无需JavaScript或者其他编程语言，因此对于网页加载速度和性能影响较小...
粒子文字特效css,CSS粒子效果
weixin_39755952的博客
08-03 257
cssbody {padding: 40px 0;font-family: 'bebas', sans-serif;background-color: #fff;}body .textcontainer {padding: 40px 0;text-align: center;}body .particletext {text-align: center;font-size: 48px;positi...
html、css、js粒子特效——前端
u013430418的博客
07-15 2860
粒子动效
css实现粒子图
05-24
要实现粒子图，可以使用CSS的伪元素和动画效果。 首先，创建一个包含粒子的容器，可以设置其大小和背景颜色。然后使用伪元素来创建每个粒子，可以使用圆形或者其他形状，设置其大小、颜色、位置等属性。 接下来，使用CSS动画效果来让粒子移动或者变换位置。可以使用@keyframes关键字来定义动画，然后将其应用到伪元素上。 最后，可以使用JavaScript来控制粒子的数量、速度、方向等属性，实现更加丰富的效果。 下面是一个简单的例子： HTML代码： ``` <div class="particles"> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> <div class="particle"></div> </div> ``` CSS代码： ``` .particles { width: 400px; height: 400px; background-color: #000; position: relative; } .particle { width: 10px; height: 10px; background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; } .particle:nth-child(1) { animation: move1 2s linear infinite; } .particle:nth-child(2) { animation: move2 3s linear infinite; } .particle:nth-child(3) { animation: move3 4s linear infinite; } .particle:nth-child(4) { animation: move4 5s linear infinite; } .particle:nth-child(5) { animation: move5 6s linear infinite; } @keyframes move1 { 0% { top: 50%; left: 50%; } 50% { top: 20%; left: 20%; } 100% { top: 50%; left: 50%; } } @keyframes move2 { 0% { top: 50%; left: 50%; } 50% { top: 80%; left: 20%; } 100% { top: 50%; left: 50%; } } @keyframes move3 { 0% { top: 50%; left: 50%; } 50% { top: 20%; left: 80%; } 100% { top: 50%; left: 50%; } } @keyframes move4 { 0% { top: 50%; left: 50%; } 50% { top: 80%; left: 80%; } 100% { top: 50%; left: 50%; } } @keyframes move5 { 0% { top: 50%; left: 50%; } 50% { top: 50%; left: 20%; } 100% { top: 50%; left: 50%; } } ``` 这个例子中，我们创建了一个大小为400x400的容器，设置其背景为黑色。然后使用伪元素创建了5个白色圆形粒子，并分别应用了不同的动画效果。最后，通过@keyframes关键字定义了5个不同的动画，实现粒子的移动效果。
评论 22
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值