用CSS如何做粒子的按钮效果，方法是什么？
发布时间：2022-04-11 16:55:28 所属栏目：语言 来源：互联网
导读：这篇文章给大家分享的是用CSS实现粒子的按钮效果的方法。对于按钮大家应该都很熟悉，是网页中很常见的组件。所以，一般的按钮已经很难吸引人注意，但如果有加入粒子的动画效果，那么会新奇不少，下面我们来具体粒子动态按钮的示例。 通常这类效果第一反应可
|
这篇文章给大家分享的是用CSS实现粒子的按钮效果的方法。对于按钮大家应该都很熟悉，是网页中很常见的组件。所以，一般的按钮已经很难吸引人注意，但如果有加入粒子的动画效果，那么会新奇不少，下面我们来具体粒子动态按钮的示例。 通常这类效果第一反应可能就是借助 canvas 了，比如下面这个 案例 效果就更加震撼了，当然 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 来实现多个小圆点。 这里主要通过 background-size 和 background-position 来控制原点的尺寸与位置，看着好像挺复杂，其实只要 background-size 和 background-position 与 background-image 位置一一对应就行了。实际开发中可能有点难调试，可以直接在控制台中通过键盘上下左右键微调实时预览效果（可以考虑做一个可视化工具）。 （编辑：PHP编程网 - 黄冈站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
浙公网安备 33038102330482号