html--纯css粒子动画

最新推荐文章于 2025-06-11 17:10:16 发布
最新推荐文章于 2025-06-11 17:10:16 发布
阅读量432 收藏 3
点赞数 5
CC 4.0 BY-SA版权
分类专栏： html 文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/stqer/article/details/138913274 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>body {
  background: #fff;
  height: 100vh;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: 'Anton', sans-serif;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

div {
  position: absolute;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

#egg .stage:nth-child(1) .inner {
  border-radius: 100%;
  -webkit-transform: translate(-50%, -50%) translateZ(200px);
          transform: translate(-50%, -50%) translateZ(200px);
}
#egg .stage:nth-child(1) .circle:nth-child(1) .x {
  -webkit-animation: rotateX 23860ms -2574ms linear infinite;
          animation: rotateX 23860ms -2574ms linear infinite;
}
#egg .stage:nth-child(1) .circle:nth-child(1) .y {
  -webkit-animation: rotateY 13624ms -2447ms linear infinite;
          animation: rotateY 13624ms -2447ms linear infinite;
}
#egg .stage:nth-child(1) .circle:nth-child(1) .inner {
  width: 25px;
  height: 25px;
  background: #8478a0;
}
#egg .stage:nth-child(1) .circle:nth-child(1) .inner::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform: translateZ(-1px);
          transform: translateZ(-1px);
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.8);
}
#egg .stage:nth-child(1) .circle:nth-child(2) .x {
  -webkit-animation: rotateX 22036ms -2088ms linear infinite;
          animation: rotateX 22036ms -2088ms linear infinite;
}
#egg .stage:nth-child(1) .circle:nth-child(2) .y {
  -webkit-animation: rotateY 20357ms -853ms linear infinite;
          animation: rotateY 20357ms -853ms linear infinite;
}
#egg .stage:nth-child(1) .circle:nth-child(2) .inner {
  width: 12px;
  height: 12px;
  background: #4978a0;
}
#egg .stage:nth-child(1) .circle:nth-child(2) .inner::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform: translateZ(-1px);
          transform: translateZ(-1px);
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.8);
}
#egg .stage:nth-child(1) .circle:nth-child(3) .x {
  -webkit-animation: rotateX 23240ms -2294ms linear infinite;
          animation: rotateX 23240ms -2294ms linear infinite;
}
#egg .stage:nth-child(1) .circle:nth-child(3) .y {
  -webkit-animation: rotateY 13790ms -1272ms linear infinite;
          animation: rotateY 13790ms -1272ms linear infinite;
}
#egg .stage:nth-child(1) .circle:nth-child(3) .inner {
  width: 35px;
  height: 35px;
  background: #8a78a0;
}
#egg .stage:nth-child(1) .circle:nth-child(3) .inner::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform: translateZ(-1px);
          transform: translateZ(-1px);
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.8);
}
#egg .stage:nth-child(1) .circle:nth-child(4) .x {
  -webkit-animation: rotateX 12361ms -884ms linear infinite;
          animation: rotateX 12361ms -884ms linear infinite;
}
#egg .stage:nth-child(1) .circle:nth-child(4) .y {
  -webkit-animation: rotateY 26279ms -1598ms linear infinite;
          animation: rotateY 26279ms -1598ms linear infinite;
}
#egg .stage:nth-child(1) .circle:nth-child(4) .inner {
  width: 29px;
  height: 29px;
  background: #1378a0;
}
#egg .stage:nth-child(1) .circle:nth-child(4) .inner::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform: translateZ(-1px);
          transform: translateZ(-1px);
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.8);
}
#egg .stage:nth-child(1) .circle:nth-child(5) .x {
  -webkit-animation: rotateX 28912ms -929ms linear infinite;
          animation: rotateX 28912ms -929ms linear infinite;
}
#egg .stage:nth-child(1) .circle:nth-child(5) .y {
  -webkit-animation: rotateY 19679ms -1557ms linear infinite;
          animation: rotateY 19679ms -1557ms linear infinite;
}
#egg .stage:nth-child(1) .circle:nth-child(5) .inner {
  width: 30px;
  height: 30px;
  background: #2578a0;
}
#egg .stage:nth-child(1) .circle:nth-child(5) .inner::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform: translateZ(-1px);
          transform: translateZ(-1px);
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.8);
}
#egg .stage:nth-child(1) .circle:nth-child(6) .x {
  -webkit-animation: rotateX 26470ms -660ms linear infinite;
          animation: rotateX 26470ms -660ms linear infinite;
}
#egg .stage:nth-child(1) .circle:nth-child(6) .y {
  -webkit-animation: rotateY 24459ms -1541ms linear infinite;
          animation: rotateY 24459ms -1541ms linear infinite;
}
#egg .stage:nth-child(1) .circle:nth-child(6) .inner {
  width: 11px;
  height: 11px;
  background: #1678a0;
}
#egg .stage:nth-child(1) .circle:nth-child(6) .inner::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform: translateZ(-1px);
          transform: translateZ(-1px);
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.8);
}
#egg .stage:nth-child(1) .circle:nth-child(7) .x {
  -webkit-animation: rotateX 13310ms -2610ms linear infinite;
          animation: rotateX 13310ms -2610ms linear infinite;
}
#egg .stage:nth-child(1) .circle:nth-child(7) .y {
  -webkit-animation: rotateY 19625ms -611ms linear infinite;
          animation: rotateY 19625ms -611ms linear infinite;
}
#egg .stage:nth-child(1) .circle:nth-child(7) .inner {
  width: 22px;
  height: 22px;
  background: #2a78a0;
}
#egg .stage:nth-child(1) .circle:nth-child(7) .inner::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform: translateZ(-1px);
          transform: translateZ(-1px);
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.8);
}
#egg .stage:nth-child(1) .circle:nth-child(8) .x {
  -webkit-animation: rotateX 20200ms -1311ms linear infinite;
          animation: rotateX 20200ms -1311ms linear infinite;
}
#egg .stage:nth-child(1) .circle:nth-child(8) .y {
  -webkit-animation: rotateY 19933ms -1896ms linear infinite;
          animation: rotateY 19933ms -1896ms linear infinite;
}
#egg .stage:nth-child(1) .circle:nth-child(8) .inner {
  width: 16px;
  height: 16px;
  background: #4578a0;
}
#egg .stage:nth-child(1) .circle:nth-child(8) .inner::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform: translateZ(-1px);
          transform: translateZ(-1px);
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.8);
}
#egg .stage:nth-child(1) .circle:nth-child(9) .x {
  -webkit-animation: rotateX 12144ms -1894ms linear infinite;
          animation: rotateX 12144ms -1894ms linear infinite;
}
#egg .stage:nth-child(1) .circle:nth-child(9) .y {
  -webkit-animation: rotateY 13642ms -1592ms linear infinite;
          animation: rotateY 13642ms -1592ms linear infinite;
}
#egg .stage:nth-child(1) .circle:nth-child(9) .inner {
  width: 17px;
  height: 17px;
  background: #7c78a0;
}

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

229.纯CSS粒子背景动画-03
粉丝们务必加入微信粉丝群
09-11 654
效果 (源码网盘地址在最后) 源码 index.html <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Pure CSS Particles</title> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- pa
227.纯CSS粒子背景动画
粉丝们务必加入微信粉丝群
09-11 1539
效果 (源码网盘地址在最后) 源码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>CSS Particles</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs
使用HTML+CSS+JS 实现粒子动画
qq_32232407的博客
04-07 2808
使用 html + css + js ，就可以写出简单的粒子动画
使用CSS3实现全屏颗粒的动画效果
2403_88969259的博客
12-22 429
使用CSS3和JavaScript，我们可以轻松实现全屏颗粒的动画效果。这种效果不仅美观，还能提升用户体验。希望本文能为您的网页设计提供灵感，欢迎您根据自己的需求进行修改和扩展。
实测！Three.js 实现动态粒子螺旋与星环环绕动画
最新发布
weixin_52814911的博客
06-11 738
摘要：该页面采用极简HTML框架，通过Three.js实现全屏3D粒子效果。核心包括动态粒子球体、发光着色器和交互式相机控制，粒子会随时间和位置产生韵律波动。CSS仅用于全屏画布定位，所有视觉效果均由JavaScript和WebGL渲染完成，创造出具有呼吸感的沉浸式空间体验。 （字数：149字）
CSS-动效 纯css粒子动效 | 转圈圈 | 上下弹动
WangYan的博客
10-14 2849
粒子动效 旋转 弹动
纯css3炫酷粒子动画特效
12-13
这是一款纯css3炫酷粒子动画特效。该特效使用多个div来制作光点粒子效果，并使用CSS3动画来制作光点粒子的上升动画，效果非常炫酷。
CSS文本粒子动画特效之爱心粒子文字特效-Canvas
misschengispink的博客
05-28 977
html+css+js，采用canvas实现爱心文本粒子动画特效，炫酷特效，素材和完整代码都有~快拿去表白~
纯CSS3粒子雪花元素动画特效
06-24
5. **生成内容（Generated Content）**：CSS3允许我们使用`content`属性生成元素的内容，这在创建粒子动画时非常有用，因为它可以让我们在不需要HTML结构的情况下生成大量相似的雪花元素。 6. **精灵图（Sprite ...
圣诞树源码-纯CSS制作螺旋圣诞树动画源码下载
12-16
本文将详细讲解如何使用纯CSS技术来创建一个螺旋圣诞树动画。这个动画源码是一个精美的节日装饰，完全由CSS代码构建，无需额外的HTML5或者其他编程语言支持。通过理解和学习这个源码，你可以深入了解CSS的动画效果...
228.纯CSS粒子背景动画2
粉丝们务必加入微信粉丝群
09-11 592
效果 (源码网盘地址在最后) 源码 index.html <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CSS Particles</title> <link href='https://fonts.googleapis.com/css?family=Audiowide|Iceland|Monoton|Pacifico|P
HTML5炫酷光粒子动画特效
08-16
这是一款HTML5炫酷光粒子动画特效。该特效通过js在页面中生成canvas元素，并通过算法在其中生成炫酷的光粒子动画特效。
DNA螺旋粒子动画CSS3特效.zip
07-04
DNA螺旋粒子动画CSS3特效是一款vue绘制DNA螺旋结构分子粒子动画效果。
纯CSS3打造粒子模糊随机显示动画特效代码
03-20
纯CSS3打造粒子模糊随机显示动画
【css酷炫效果】纯CSS实现粒子旋转动画
若释·飞语
03-18 532
【代码】【css酷炫效果】纯CSS实现粒子旋转动画。
CSS实现一个粒子动效的按钮
DHLSP15的博客
01-14 649
CSS实现一个粒子动效的按钮
HTML5 粒子动画详解
王偃飞的博客
01-11 506
粒子动画是一种利用大量小粒子来创建动态效果的技术，常用于网页背景、装饰元素或交互式效果。下面是如何使用 HTML5 和 JavaScript 创建简单的粒子动画的详细步骤。通过以上代码，你可以在网页上实现简单的粒子动画效果。当你移动鼠标时，粒子会在鼠标位置生成并逐渐消失，形成动态的背景效果。通过这些简单的步骤，你可以创建出丰富多彩的粒子动画，为网页增添活力。文件中，我们将实现粒子的生成、运动和绘制。
使用CSS3实现一个随机粒子动画效果
王铁柱666的博客
02-15 291
创建一个随机粒子动画效果主要涉及到HTML、CSS和JavaScript。虽然CSS3提供了强大的动画功能，但为了实现粒子的随机运动和生成，我们还需要借助JavaScript。这个示例创建了一个包含随机粒子的动画。每个粒子都有随机的大小、位置和动画路径。你可以根据需要调整粒子的数量、大小范围、动画时间等参数。注意：CSS中的动画只是一个基本的线性移动。为了实现随机效果，我们需要在JavaScript中做更多的工作。
CSS3 Canvas粒子动画实现网页加载特效
综上所述，"css3 canvas粒子动画的网页进度条Laoding特效.rar"是一个应用HTML5和CSS3技术，利用Canvas API实现的具有粒子动画效果的进度条Loading特效。该特效在用户体验上提供了新颖的视觉体验，并可能包含复杂的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

fo安方

觉得俺的文章还行，感谢打赏，爱

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值