CSS实现一个粒子动效的按钮

最新推荐文章于 2024-05-28 16:06:03 发布

DHLSP15

最新推荐文章于 2024-05-28 16:06:03 发布

阅读量486

点赞数

分类专栏： html 文章标签： css3 前端 css Powered by 金山文档

本文链接：https://blog.csdn.net/DHLSP15/article/details/128686629

版权

html 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

来看看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: 10px10px#ff0081,15px0px02px#ff0081,20px15px03px#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, #ff008120%, transparent 0), 
  radial-gradient(circle, #ff008120%, transparent 0),
  radial-gradient(circle, #ff008120%, transparent 0), 
  radial-gradient(circle, #ff008120%, 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%,...;
}

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

页面代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    body {
      font-size: 16px;
      font-family: 'Helvetica', 'Arial', sans-serif;
      text-align: center;
      background-color: #f8faff;
      padding: 100px;
    }

    h2 {
      padding-bottom: 2em
    }

    .button {
      display: inline-block;
      padding: 1em 2em;
      background-color: #F44333;
      /* background-color: transparent; */
      color: #fff;
      border-radius: 4px;
      border: none;
      cursor: pointer;
      position: relative;
      box-shadow: 0 2px 25px rgba(233, 30, 99, 0.5);
      outline: 0;
      transition: transform ease-in 0.1s, background-color ease-in 0.1s, box-shadow ease-in 0.25s;
    }

    .button::before {
      position: absolute;
      content: '';
      left: -2em;
      right: -2em;
      top: -2em;
      bottom: -2em;
      pointer-events: none;
      transition: ease-in-out .5s;
      background-repeat: no-repeat;
      background-image: radial-gradient(circle, #F44333 20%, transparent 20%),
        radial-gradient(circle, #F44333 20%, transparent 20%),
        radial-gradient(circle, #F44333 20%, transparent 20%),
        radial-gradient(circle, #F44333 20%, transparent 20%),
        radial-gradient(circle, #F44333 20%, transparent 20%),
        radial-gradient(circle, #F44333 20%, transparent 20%),
        radial-gradient(circle, #F44333 20%, transparent 20%),
        radial-gradient(circle, #F44333 20%, transparent 20%),
        radial-gradient(circle, #F44333 20%, transparent 20%),
        /*  */
        radial-gradient(circle, #F44333 20%, transparent 20%),
        radial-gradient(circle, #F44333 20%, transparent 20%),
        radial-gradient(circle, #F44333 20%, transparent 20%),
        radial-gradient(circle, #F44333 20%, transparent 20%),
        radial-gradient(circle, #F44333 20%, transparent 20%),
        radial-gradient(circle, #F44333 20%, transparent 20%),
        radial-gradient(circle, #F44333 20%, transparent 20%);
      background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%,
        15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
      background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%, 65% 30%, 80% 32%, 15% 60%,
        83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%, 64% 70%, 80% 71%;
      animation: bubbles ease-in-out .75s forwards;
    }

    .button:active {
      transform: scale(0.95);
      background-color: #FF2768;
      box-shadow: 0 2px 25px rgba(255, 39, 104, 0.5);
    }

    .button:active::before {
      animation: none;
      background-size: 0;
    }

    @keyframes bubbles {
      0% {
        background-position: 18% 40%, 20% 31%, 30% 30%, 40% 30%, 50% 30%, 57% 30%, 65% 30%, 80% 32%, 15% 60%,
          83% 60%, 18% 70%, 25% 70%, 41% 70%, 50% 70%, 64% 70%, 80% 71%;
      }

      50% {
        background-position: 10% 44%, 0% 20%, 15% 5%, 30% 0%, 42% 0%, 62% -2%, 75% 0%, 95% -2%, 0% 80%,
          95% 55%, 7% 100%, 24% 100%, 41% 100%, 55% 95%, 68% 96%, 95% 100%;
      }

      100% {
        background-position: 5% 44%, -5% 20%, 7% 5%, 23% 0%, 37% 0, 58% -2%, 80% 0%, 100% -2%, -5% 80%,
          100% 55%, 2% 100%, 23% 100%, 42% 100%, 60% 95%, 70% 96%, 100% 100%;
        background-size: 0% 0%;
      }
    }
  </style>
</head>

<body>
  <h2>鼠标点击试试~<h2>
      <button class="button">Button</button>
</body>

</html>

详情