CSS完成颗粒动态性按钮实际效果

日期：2021-01-20 类型：科技新闻 

关键词：如何创建网站，免费网站建站，网站建设文章，网站建设7个基本流程，自动建站

原文连接

https://github.com/XboxYan/no...

按钮（button）将会是网页页面中最多见的组件之1了，绝大多数都平平淡淡无奇，假如你碰到的是1个这样的按钮，会不容易禁不住多一点几回呢？

一般这类实际效果第1反映将会便是依靠 canvas 了，例如下面这个 实例

实际效果就更为震动了，自然 canvas 完成也是有1定的门坎，并且具体应用起来也稍微不便（全部 js 完成的通病），这里尝试1下 CSS 的完成方法。

转化成颗粒

抛开 js 计划方案，也有 HTML 和 CSS 完成方法。 HTML 就无需说了，立即写上很多的标识

<button>
    button
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    ...
</button>

1般状况下我并不是很喜爱这类方法，标识太多，构造不美观大方，并且有将会对现有的网页页面导致别的危害（许多状况下其实不便捷改动初始 HTML 构造）

那末看来看 CSS 完成方法，关键也是两种方法，实际上便是想1下有哪些特性能够无尽叠加，1个是 box-shadow ，也有1个是 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种方法来完成

2.background-image

CSS3中 background-image 是能够无尽叠加的，相近于

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

这里大家能够选用轴向渐变色 radial-gradient 来完成好几个小圆点。

.button::before{
  position: absolute;
  content: '';
  left: ⑵em;
  right: ⑵em;
  top: ⑵em;
  bottom: ⑵em;
  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 部位11对应就可以了。具体开发设计中将会有点难调节，能够立即在操纵台中根据电脑键盘左右上下键微调即时预览实际效果（能够考虑到做1个可视性化工厂具）。

这样就做出了1个简易的颗粒实际效果。

动起来

尽管 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%, ⑸% 20%, 7% 5%...;
  background-size: 0% 0%;
}

自然立即这样设定毫无疑问是没理想，电脑鼠标离去时会收拢回去，实际效果以下

大家必须是电脑鼠标离去时不收拢回去，怎样完成呢？

很简易，把 transition 设定在 :hover 下便可以了，表明仅有当电脑鼠标历经时才有过渡，离去时沒有

.button:hover::before{
  background-position: 5% 44%, ⑸% 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%, ⑸% 20%, 7% 5%...;
  background-size: 0% 0%;
  transition:.75s background-position ease-in-out,75s background-size ease-in-out;
}

很遗憾，仅有当仅有按住没动的情况下才可以开启，1旦电脑鼠标抬起就沒有了，这个情况下大家就必须换个角度了。能够这么想像1下，默认设置便是发散的，随后点一下的情况下集合，抬起的情况下就会有复原成以前的发散情况，另外，在点一下的情况下必须撤销掉过渡实际效果，以下

.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%;
  }
}

能够在 这里 查询源代码。

唯1的不够将会是原始化动漫会自实行1次。

小结

上面详细介绍了纯CSS完成1个颗粒动效的按钮，优势很显著，拷贝1下 CSS 立即扔到新项目里就可以用，管他甚么原生态新项目還是 react 新项目，也不用关联甚么恶性事件，也不用附加的逻辑性解决，提高现有体验。试想1下，假如这是1个‘选购’按钮，会不容易开启你多选购几回呢，总之我毫无疑问是会被吸引住住了，哈~

缺陷也還是有的，例如上面的精准定位，一颗颗全是工作中量啊，提议这些作用在新项目总体进行以后再细细打磨，还可以试着做1些可视性化工厂具来减轻工业作量，完。

总结

以上所述是网编给大伙儿详细介绍的CSS完成颗粒动态性按钮实际效果，期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！假如你感觉本文对你有协助，欢迎转载，烦请注明出处，感谢！

上一篇：css款式堆叠标准详解 返回下一篇：没有了