css制作粒子按钮

最新推荐文章于 2023-12-28 08:33:37 发布

一木有城

最新推荐文章于 2023-12-28 08:33:37 发布

阅读量211

点赞数

分类专栏：学习笔记文章标签： css

本文链接：https://blog.csdn.net/qq_46770287/article/details/110847162

版权

学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了如何利用CSS实现一个有趣的粒子动画按钮。通过径向渐变radial-gradient创建多个小圆点，结合background-size和background-position控制粒子效果。作者分享了代码示例，并提到了一个在线调试网站，帮助调整和优化动画。

摘要由CSDN通过智能技术生成

前言

(没想到吧!)
思来想去还是打算在html和css再研究学习一下嗷！
有关一个粒子动画的按钮，挺有趣的，学起来很舒服！
还意外发现了一个在线调试网站，可以在书签吃灰了！
码一下吧！可能应该早发现呜呜全tm是英语

正文

(开始！）
按钮（button）可能是网页中最常见的组件之一，动画挺基础的具体在后面。
今天的css可能js就可以实现，但是！我就要css！
粒子制作（无限属性叠加background-image之类的
下面展示
采用径向渐变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 20%),
      radial-gradient(circle, #ff0081 20%, transparent 20%), 
  radial-gradient(circle, #ff0081 20%, transparent 20%), 
  radial-gradient(circle, #ff0081 20%, transparent 20%), 
  radial-gradient(circle, #ff0081 20%, transparent 20%), 
  radial-gradient(circle, #ff0081 20%, transparent 20%), 
  radial-gradient(circle, #ff0081 20%, transparent 20%), 
  radial-gradient(circle, #ff0081 20%, transparent 20%), 
  radial-gradient(circle, #ff0081 20%, transparent 20%),
  /*  */
  radial-gradient(circle, #ff0081 20%, transparent 20%), 
  radial-gradient(circle, #ff0081 20%, transparent 20%), 
  radial-gradient(circle, #ff0081 20%, transparent 20%),
  radial-gradient(circle, #ff0081 20%, transparent 20%), 
  radial-gradient(circle, #ff0081 20%, transparent 20%), 
  radial-gradient(circle, #ff0081 20%, transparent 20%), 
  radial-gradient(circle, #ff0081 20%, transparent 20%);
    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%;
    transition: background-position .5s ease-in-out, background-size .75s ease-in-out;
  }

大概粒子效果就来了，主要通过background-size和background-position来控制原点的尺寸与位置，看着好像挺复杂，其实只要background-size和background-position与background-image位置一一对应就行了，用调试网站实际调节挺爽的。

该动起来了，中间有些问题以后有空再补充呜呜

 .button:active::before {
  transition:0s;
  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%;
}

接下来是完整的代码
在调试网站哦！
这个点进去

好的，没了！