纯css实现粒子效果-蒲公英云

前端开发whqet,csdn,王海庆,whqet,前端开发专家

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

-—————————————————————————————-

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

-————————————————————————————————————————————

看效果先

Center

思路解析

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

2.animation实现动画。

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

实现

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

-———————-

-———————————————————-

在线研究点击这里，下载收藏点击这里。

-———————————————————-

-———————

1.html部分非常简单就是一个div。

<div class="stars"></div>

2.css部分是重点，我们首先设置全局的css，我们使用normallize和prefix free。然后对html和body作如下设置。

$stars: 100;         // 粒子数
$depth: 300;         // 深度
$speed: 1s;          // 动画时间
$width: 1500;        // 宽
$height: 960;        // 高
html, body {
  height: 100%;
  overflow: hidden;
}
body {
  perspective: 340px;
  background:#000 url(https://img-my.csdn.net/uploads/201501/02/1420174857_3649.png) center center no-repeat;
  background-size:28% 30%;
}

对于.stars，我们设置大小、位置，宽、高各位5px，位置居中，圆角边框。

.stars {
  position: absolute;
  top: 50%;
  left: 50%;
  width:5px;
  height:5px;
  border-radius:100%;
}

然后我们使用box-shadow生成粒子。box-shadow一个很好玩的特性，生成效果如下。

.stars {
  position: absolute;
  top: 50%;
  left: 50%;
  width:5px;
  height:5px;
  border-radius:100%;
  /*box-shadow生成粒子*/
  $box-shadow: ();
  @for $i from 0 through $stars {
    $box-shadow: $box-shadow, (random($width)-$width/2 + px) (random($height)-$height/2 + px) adjust-hue(#ff0000, random(360));
  }
  box-shadow: $box-shadow;
}

Center 1

然后这个数量有点少，同时层次感不足，我们利用：before和：after伪对象搞定这些事情。

.stars {
  position: absolute;
  top: 50%;
  left: 50%;
  width:5px;
  height:5px;
  border-radius:100%;
  $box-shadow: ();
  @for $i from 0 through $stars {
    $box-shadow: $box-shadow, (random($width)-$width/2 + px) (random($height)-$height/2 + px) adjust-hue(#ff0000, random(360));
  }
  box-shadow: $box-shadow;
  /*伪对象更多粒子、更多层次*/
  &:before, &:after {
    content: "";
    position: absolute;
    width: inherit;
    height: inherit;
    box-shadow: inherit;
  }
  &:before {
    transform: translateZ(-$depth + px);
    opacity: .3;
  }
  &:after {
    transform: translateZ(-$depth * 2 + px);
    opacity: .1;
  }
}

添加粒子和深度之后效果如下图所示。

Center 2

然后添加动画。

.stars {
  position: absolute;
  top: 50%;
  left: 50%;
  width:5px;
  height:5px;
  border-radius:100%;
  /*box-shadow生成粒子*/
  $box-shadow: ();
  @for $i from 0 through $stars {
    $box-shadow: $box-shadow, (random($width)-$width/2 + px) (random($height)-$height/2 + px) adjust-hue(#ff0000, random(360));
  }
  box-shadow: $box-shadow;
  /* 添加动画 */
  animation: fly $speed linear infinite;
  transform-style:preserve-3d;
  /* 伪对象更多粒子、更多层次 */
  &:before, &:after {
    content: "";
    position: absolute;
    width: inherit;
    height: inherit;
    box-shadow: inherit;
  }
  &:before {
    transform: translateZ(-$depth + px);
    opacity: .3;
  }
  &:after {
    transform: translateZ(-$depth * 2 + px);
    opacity: .1;
  }
}
@keyframes fly {
  from {
    transform: translateZ(0px);
    opacity:.1;
  }
  to {
    transform: translateZ($depth + px);
    opacity:0.8;
  }
}

然后，就可以欣赏效果了。最后给大家附带完整的css源码。

$stars: 100;         // 粒子数
$depth: 300;         // 深度
$speed: 1s;          // 动画时间
$width: 1500;        // 宽
$height: 960;        // 高
html, body {
  height: 100%;
  overflow: hidden;
}
body {
  perspective: 340px;
  background:#000 url(https://img-my.csdn.net/uploads/201501/02/1420174857_3649.png) center center no-repeat;
  background-size:28% 30%;
}
.stars {
  position: absolute;
  top: 50%;
  left: 50%;
  width:5px;
  height:5px;
  border-radius:100%;
  $box-shadow: ();
  @for $i from 0 through $stars {
    $box-shadow: $box-shadow, (random($width)-$width/2 + px) (random($height)-$height/2 + px) adjust-hue(#ff0000, random(360));
  }
  box-shadow: $box-shadow;
 /* 
  animation: fly $speed linear infinite;
  transform-style:preserve-3d;
  */
  &:before, &:after {
    content: "";
    position: absolute;
    width: inherit;
    height: inherit;
    box-shadow: inherit;
  }
  &:before {
    transform: translateZ(-$depth + px);
    opacity: .3;
  }
  &:after {
    transform: translateZ(-$depth * 2 + px);
    opacity: .1;
  }
}
@keyframes fly {
  from {
    transform: translateZ(0px);
    opacity:.1;
  }
  to {
    transform: translateZ($depth + px);
    opacity:0.8;
  }
}