css html实现粒子特效,CSS实现粒子动态按钮效果

原文链接

按钮(button)可能是网页中最常见的组件之一了，大部分都平淡无奇，如果你碰到的是一个这样的按钮，会不会忍不住多点几次呢？

通常这类效果第一反应可能就是借助 canvas 了，比如下面这个 案例

效果就更加震撼了，当然 canvas 实现也有一定的门槛，而且实际使用起来也略微麻烦(所有 js 实现的通病)，这里尝试一下 CSS 的实现方式。

生成粒子

抛开 js 方案，还有 HTML 和 CSS 实现方式。 HTML 就不用说了，直接写上大量的标签

button

...

一般情况下我不是很喜欢这种方式，标签太多，结构不美观，而且有可能对现有的页面造成其他影响(很多情况下并不方便修改原始 HTML 结构)

那么来看看 CSS 实现方式，主要也是两种方式，其实就是想一下有哪些属性可以无限叠加，一个是 box-shadow ，还有一个是 background-image (CSS3支持无限叠加)。

1.box-shadow

我们先看看 box-shadow 方式，为了避免使用额外标签，这里采用伪元素生成。

.button::before{

position: absolute;

content: '';

width: 5px;

height: 5px;

border-radius: 50%;

background-color: #ff0081;

box-shadow: 10px 10px #ff0081,15px 0px 0 2px #ff0081,20px 15px 0 3px #ff0081,...;/*无限叠加*/

}