CSS实现粒子动态按钮效果的示例

　　介绍

这篇文章将为大家详细讲解有关CSS实现粒子动态按钮效果的示例,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

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

CSS实现粒子动态按钮效果的示例

通常这类效果第一反应可能就是借助画布<代码> 了,比如下面这个案例

CSS实现粒子动态按钮效果的示例

效果就更加震撼了,当然画布<代码> 实现也有一定的门槛,而且实际使用起来也略微麻烦(所有<代码> js代码实现的通病),这里尝试一下<代码> CSS>

<强>生成粒子

抛开<代码> js代码方案,还有<代码> HTML和CSS <代码> 实现方式。<代码> HTML> & lt; button> 　　,,,按钮 　　,,,& lt; i> & lt;/i> 　　,,,& lt; i> & lt;/i> 　　,,,& lt; i> & lt;/i> 　　,,,& lt; i> & lt;/i> 　　,,,& lt; i> & lt;/i> 　　,,,… 　　& lt;/button>

一般情况下我不是很喜欢这种方式,标签太多,结构不美观,而且有可能对现有的页面造成其他影响(很多情况下并不方便修改原始<代码> HTML 结构)

那么来看看<代码> CSS代码实现方式,主要也是两种方式,其实就是想一下有哪些属性可以无限叠加,一个是<代码>不必> 背景图像>

<强> 1。不必

我们先看看<代码>不必方式,为了避免使用额外标签,这里采用伪元素生成。

.button::{之前 　　位置:才能,绝对; 　　,,内容:& # 39;& # 39;; 　　,,宽度:5 px; 　　,,身高:5 px; 　　,,这个特性:50%; 　　,,背景颜色:# ff0081; 　　,,不必:10 px  10 px  # ff0081, 15 px  0 px  0, 2 px  # ff0081, 20 px  15 px  0, 3 px  # ff0081,……;/*无限叠加*/}

CSS实现粒子动态按钮效果的示例

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

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

2。背景图片

CSS3中<代码>背景图像> .myclass  { 　　背景:,background1,才能,background2,,/*…*/, backgroundN; 　　}

这里我们可以采用径向渐变<代码>径向渐变> .button::{之前 　　位置:才能,绝对; 　　,,内容:& # 39;& # 39;; 　　,,左:2 em; 　　,,右:2 em; 　　,,:2 em; 　　底才能:2 em; 　　pointer-events才能:没有; 　　平铺方式:,才能不再重演; 　　,,背景图片:径向渐变(圆,,# ff0081  20%, transparent  0),, 　　径向渐变才能(圆,,# ff0081  20%, transparent  0), 　　径向渐变才能(圆,,# ff0081  20%, transparent  0),, 　　径向渐变才能(圆,,# ff0081  20%, transparent  0),, 　　,,……; 　　,,background-size: 10%, 10%, 20%, 20%, 15%, 15%,…; 　　,,背景位置:18%,40%,20%,31%,30%,30%,…; 　　}

这里主要通过<代码> background-size 和<代码>背景位置> background-size 和<代码>背景位置与<代码>背景图像>

CSS实现粒子动态按钮效果的示例

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

动起来

虽然<代码>背景图像> CSS代码动画,但是另外两个<代码> background-size 和<代码>背景位置支持呀,所以,CSS转换<代码> 和<代码> CSS动画>

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

我过渡们先看看<代码>:徘徊交互

.button::{之前 　　过渡:才能.75s  background-position  ease-in-out, 75 s  background-size  ease-in-out; 　　} 　　{前.button:徘徊:: 　　,,背景位置:5%,44%,-5%,20%,7%,5%……; 　　,,background-size: 0%, 0%; 　　}

CSS实现粒子动态按钮效果的示例