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

通常这类效果第一反应可能就是借助canvas了，比如下面这个案例点击预览（建议去codepen原链接点击预览访问，segmentfault内置的预览js会加载失败）

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

生成粒子

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

<button>
    button
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    ...
</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,...;/*无限叠加*/
}

效果还是有的，主要就是多花点时间来调试，这里主要根据偏移量和扩展来决定粒子的位置和大小。

不过这里的偏移量只能是px单位，无法很好的自适应按钮的大小，所以这里采用第二种方式来实现

2.background-image

CSS3中background-image是可以无限叠加的，类似于

.myclass {
  background: background1, background2, /*...*/ backgroundN;
}

这里我们可以采用径向渐变radial-gradient来实现多个小圆点。

.button::before{
  position: absolute;
  content: '';
  left: -2em;
  right: -2em;
  top: -2em;
  bottom: -2em;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image: radial-gradient(circle, #ff0081 20%, transparent 0),
  radial-gradient(circle, #ff0081 20%, transparent 0),
  radial-gradient(circle, #ff0081 20%, transparent 0),
  radial-gradient(circle, #ff0081 20%, transparent 0),
  ...;
  background-size: 10% 10%, 20% 20%, 15% 15%,...;
  background-position: 18% 40%, 20% 31%, 30% 30%,...;
}

这里主要通过background-size和background-position来控制原点的尺寸与位置，看着好像挺复杂，其实只要background-size和background-position与background-image位置一一对应就行了。实际开发中可能有点难调试，可以直接在控制台中通过键盘上下左右键微调实时预览效果（可以考虑做一个可视化工具）。

这样就做出了一个简单的粒子效果。

动起来

虽然background-image不支持CSS动画，但是另外两个background-size和background-position支持呀，所以，CSS transition和CSS animation都可以用起来。

动画效果很简单，就是粒子从中心往外扩散，并且逐渐消失的过程。

transition

我们先看看:hover交互

.button::before{
  transition:.75s background-position ease-in-out,75s background-size ease-in-out;
}
.button:hover::before{
  background-position: 5% 44%, -5% 20%, 7% 5%...;
  background-size: 0% 0%;
}

当然直接这样设置肯定是不理想，鼠标离开时会收缩回去，效果如下

我们需要是鼠标离开时不收缩回去，如何实现呢？

很简单，把transition设置在:hover下就可以了，表示只有当鼠标经过时才有过渡，离开时没有

.button:hover::before{
  background-position: 5% 44%, -5% 20%, 7% 5%...;
  background-size: 0% 0%;
  transition:.75s background-position ease-in-out,75s background-size ease-in-out;
}

这样是不是感觉稍微好些了呢？点击这里点击预览查看。

如果我们想做成点击的时候出现粒子动画该怎么做呢？这里就需要借助:active伪类了。

如果我们按照:hover逻辑，那么

.button:active::before{
  background-position: 5% 44%, -5% 20%, 7% 5%...;
  background-size: 0% 0%;
  transition:.75s background-position ease-in-out,75s background-size ease-in-out;
}

很遗憾，只有当只有按住不动的时候才能触发，一旦鼠标抬起就没有了，这个时候我们就需要换个角度了。可以这么想象一下，默认就是发散的，然后点击的时候聚拢，抬起的时候就会有还原成之前的发散状态，同时，在点击的时候需要取消掉过渡效果，如下

.button::before {
    /*...*/
    background-position: 5% 44%...;/*扩散的状态*/
    background-size: 0% 0%;
    transition: background-position .5s ease-in-out, background-size .75s ease-in-out;
}

.button:active::before {
  transition:0s;/**注意取消掉过渡**/
  background-size: 10% 10%, 20% 20%...;
  background-position: 18% 40%, 20% 31%,...;
}

你可以查看这个demo点击预览

为什么在:active需要transition:0s呢，你可以试下不添加的效果就明白了，如下

animation

animation和transition实现原理比较类似，优点是可以做出更加精细的动画，这里就拿:active方式来说吧。

.button::before{
  /*...*/
  animation: bubbles ease-in-out .75s forwards;
}
.button:active::before {
  animation: none; /*这里注意取消动画*/
  background-size: 0;
}
@keyframes bubbles {
  0% {
    background-position: 18% 40%, ...;
  }
  50% {
    background-position: 10% 44%, ...;
  }
  100% {
    background-position: 5% 44%, ...;
    background-size: 0% 0%;
  }
}

可以在这里点击预览查看源码。

唯一的不足可能是初始化动画会自执行一次。

小结

上面介绍了纯CSS实现一个粒子动效的按钮，优点很明显，复制一下CSS直接扔到项目里就能用，管他什么原生项目还是react项目，也无需绑定什么事件，也无需额外的逻辑处理，增强现有体验。试想一下，如果这是一个‘购买’按钮，会不会触发你多购买几次呢，反正我肯定是会被吸引住了，哈~缺点也还是有的，比如上面的定位，密密麻麻都是工作量啊，建议这些功能在项目整体完成之后再细细打磨，也可以试着做一些可视化工具来减轻工作量，完。

源自：https://github.com/XboxYan/notes/issues/16

声明：文章著作权归作者所有，如有侵权，请联系小编删除。

大家用CSS写一个极简风格的小键盘，和之前做拟态风格按钮的思路是一样的，都是通过多层阴影叠加起来形成这种立体感。元素非常简单，现在写了一些基本的样式，其它样式重新来写。

·现在是一个带有圆角和渐变色的小方块，就这样子在这里。接下来把它的阴影一层一层的画出来，继续。现在叠加了右下角的这块阴影，看起来就有一种悬浮的感觉了。

·接下来写个伪元素，通过定位配合一下inset，把它的盒子大小撑开，同样也是给个渐变颜色，再加一点圆角来看一下。

·接下来写伪元素的阴影，这一层也是比较淡的，在右下角的一层阴影来看一下，没有问题，右下角这些地方加了一层。

·接下来给伪元素的上边、下边和左边都加一点边框，看起来更加有质感一点。这里放大给大家看，加了一点边框，这三个方向都加了。

·接下来再给外面span加两层内阴影，现在这个是加在右边了，刷新没有问题，相当于在这个按键的底部又加了一层，这样这个按键的样式就写好了。

·接下来就多写几个按键，都是套用这个样式，再把上面的字母写上去就可以了。C这个字母出来了，剩下几个都是一样的，直接写出来，没问题。

·在CSS这里换一下行，再来个空格键，最后一个让它的宽度撑满。

这个视频就到这里，感谢大家的收看。

文中我们对CSS超炫加载动画设计、实现与实例进行了讲解与说明，通过学习可知使用CSS提供的animation属性及伪元素等可以实现精美的CSS动画效果的设计与开发。本文我们将继续介绍CSS在Web页面元素设计中的应用。

按钮开关设计要求及效果

本例我们使用CSS完成开关的设计，主要要求是在点击开关时开关标识颜色需要改变，另外需要体现出元素点击前与点击后的动态变化与立体效果。本例最终设计呈现效果描述如下图所示：

设计思路与语法说明

要实现如上图所示的开关按钮效果，需要针对元素改变鼠标点击前后的CSS样式，因为只使用CSS实现，我们选择本身具有点击属性的INPUT元素。因此还需要考虑对INPUT元素外观进行设置，其设置也主要是依托于CSS选择器及相关属性的设置。

另一方面本例中出现的开关标志，主要使用第三方字体库提供的图标实现，因此需要对font相关属性及CSS外部link方法有所学习掌握。本例所使用字体如下所示：

在明确基本思路之后，我们可以使用submine进行代码编写，主要编写步骤如下：

1、链接字体样式

本例使用如上图所示提供的on图标，即Font Awesome图标字体库和CSS框架，因此需要外部链接或者下载相应CSS文件，这里我们选择外部链接，通过使用CSS提供的link，实现代码如下：

链接完成之后我们在设置字体时可直接使用FontAwesome字体，其中on图标对应的编码为f011。

2、定义页面内容

本例页面内容主要使用input元素checkbox属性进行按钮设置。因此页面内容部分定义如下所示：

3、定义checkbox样式

在完成页面元素添加之后就需要对页面元素进行CSS样式的设置，本例通过元素加type属性作为选择器，选择指定元素并进行样式设置。代码如下：

checkbox属性设置描述如上图所示，设置效果如下：

4、input添加checked、after等样式

为进一步实现点击效果切换及图标按钮的效果，需要对check状态及after伪元素进行CSS样式的设置。其中after为元素主要用于在上图中添加on开关图标。实现代码描述如下：

after伪元素选择器及样式设置如上图所示，主要完成content内容即on图标设置，字体选择、字体颜色及字体大小设置，设置完成预览效果如下：

要实现点击效果就需要在点击之后对input元素样式进行设置，因此我们使用checked作为选择器对该状态下input样式进行设置。设置代码如下所示：

checked状态CSS设置如上图所示，我们只对box-shadow阴影进行设置，通过阴影变化实现按钮动态效果。

5、点击之后on图标颜色变化

点击之后on图标颜色变化主要通过对input[type="checkbox"]:checked，进一步使用after伪元素定义字体颜色实现。实现代码如下所示：

通过使用该选择器，会在input点击之后，on字体颜色变为红色。以上给出了input按钮效果实现的基本思路与部分核心实现代码。如需完整案例代码请关注并私信作者。

本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可在评论区回复。更多程序设计相关教程及实例分享，期待大家关注与阅读！