纯css实现粒子效果

小灰灰 2022-08-27 10:49 486阅读 0赞

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

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

\------------------------------------------------------------

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

\-----------------------------------------------------------------------------------------

## 看效果先 ##

[![Center][]  
][Center_]

## 思路解析 ##

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

2.animation实现动画。

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

## 实现 ##

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

\----------------

\----------------------------------------

**[在线研究][Link 2]点击这里，[下载收藏][Link 3]点击这里。**

\----------------------------------------

\---------------

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

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

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

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

然后我们使用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;
      }
    }

感谢您耐心读完，如果对您有帮助，[请支持我][Link 1]！

\----------------------------------------------------------

[前端开发whqet][whqet]，关注web前端开发，分享相关资源，欢迎点赞，欢迎拍砖。  
\---------------------------------------------------------------------------------------------------------

[Link 1]: http://vote.blog.csdn.net/blogstar2014/details?username=whqet#content
[Center]: /images/20220824/bbf3cd82902640d0839dbee4dd3bcf60.png
[Center_]: http://brianhoffdesign.com/
[Link 2]: http://codepen.io/whqet/pen/krwvo?editors=010
[Link 3]: http://codepen.io/whqet/share/zip/krwvo/
[Center 1]: /images/20220824/4536d97e35bd4e739b3a5b2c2f575382.png
[Center 2]: /images/20220824/c2da76db5f5145eba7463e08baaa9fcc.png
[whqet]: http://blog.csdn.net/whqet