好久没有更新的CSS3演武场系列,半年前搁浅的一篇文章赋予新年新气象闪亮登场了,研究一下利用css(sass)实现粒子效果,主要使用box-shadow生成粒子,利用css3 animation和translateZ实现动画。
------------------------------------------------------------
--我参加了博客之星评选,如果你喜欢我的博客,求投票,您的支持是我的动力之源,走起!
-----------------------------------------------------------------------------------------
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(http://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; }
然后这个数量有点少,同时层次感不足,我们利用: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; } }
添加粒子和深度之后效果如下图所示。
然后添加动画。
.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(http://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; } }
感谢您耐心读完,如果对您有帮助,请支持我!
----------------------------------------------------------
前端开发whqet,关注web前端开发,分享相关资源,欢迎点赞,欢迎拍砖。
---------------------------------------------------------------------------------------------------------