纯CSS3炫酷粒子动画特效代码

纯CSS3炫酷粒子动画特效代码

这是一款纯css3炫酷粒子动画特效。该特效使用多个div来制作光点粒子效果,并使用CSS3动画来制作光点粒子的上升动画,效果非常炫酷。

使用方法
在页面中引入style.css文件。

1
<link href="css/style.css" rel="stylesheet">

HTML结构
该css3炫酷粒子动画特效的HTML结构如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="container"><img class="background" src="img/sky.jpg"/>
  <p class="message">all your dreams can come true<br>if you have the courage to pursue them</p>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  <div class="circle-container">
    <div class="circle"></div>
  </div>
  ......
</div>
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论