CSS3实现王者匹配时的粒子动画效果


Posted in HTML / CSS onApril 12, 2019

在码代码的时候会发现,很多东西都是殊途同归的,方法千千万,能解决问题的都是好办法,不一定非要把代码写的特别高深,这样反而后来的人看不懂,维护根据头疼。

所以用最简单通俗的代码,更能利于后期的维护开发。

先来看看背景粒子动画效果预览图:

CSS3实现王者匹配时的粒子动画效果 

按钮点击粒子动画

<div class="button">
  <div class="button-text">确认</div>
</div>

由于按钮是梯形的,之前代码在button选择器上面已经加了伪类来实现梯形了,所以我们只能再套一层元素(button-text)来实现粒子。

.button-text {
  position: relative;
  width: 100%;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
.button-text:before, 
.button-text:after {
  position: absolute;
  content: '';
  display: block;
  width: 140%;
  height: 100%;
  left: -20%;
  z-index: -1000;
  background-repeat: no-repeat;
}
.button-text:before {
  display: none;
  top: -75%;
  background-image: 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, transparent 20%, #fff 20%, transparent 30%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%);
  background-size: 
    10% 10%, 
    20% 20%, 
    15% 15%, 
    20% 20%, 
    18% 18%, 
    10% 10%, 
    15% 15%, 
    10% 10%, 
    18% 18%;
}
.button-text:after {
  display: none;
  bottom: -75%;
  background-image: 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%);
  background-size: 
    15% 15%, 
    20% 20%, 
    18% 18%, 
    20% 20%, 
    15% 15%, 
    10% 10%, 
    20% 20%;
}
.button-text:active {
  transform: scale(0.9);
}

button-text 的伪类元素上面,添加 background-image ,并用径向渐变 radial-gradient 画出多个圆作为粒子。

transform: scale(0.9) ,是鼠标点击时,缩放 button-text 元素。

大家应该都看到默认伪类元素是 display: none; 隐藏的。所有当我们点击时,需要添加一个选择器,让其显示出来,并执行动画。

js来监听点击事件,点击后添加 animate 选择器。

var animateButton = function(e) {
  e.preventDefault;
  e.target.classList.remove('animate');
  e.target.classList.add('animate');
  setTimeout(function(){
    e.target.classList.remove('animate');
  },700);
};

var classname = document.getElementsByClassName("button-text");
for (var i = 0; i < classname.length; i++) {
  classname[i].addEventListener('click', animateButton, false);
}

然后我们添加CSS,开始动画

.button-text.animate:before {
  display: block;
  animation: topBubbles ease-in-out 0.75s forwards;
}
.button-text.animate:after {
  display: block;
  animation: bottomBubbles ease-in-out 0.75s forwards;
}
@keyframes topBubbles {
  0% {
    background-position: 
      5% 90%, 
      10% 90%, 
      10% 90%, 
      15% 90%, 
      25% 90%, 
      25% 90%, 
      40% 90%, 
      55% 90%, 
      70% 90%;
  }
  50% {
    background-position: 
      0% 80%, 
      0% 20%, 
      10% 40%, 
      20% 0%, 
      30% 30%, 
      22% 50%, 
      50% 50%, 
      65% 20%, 
      90% 30%;
  }
  100% {
    background-position: 
      0% 70%, 
      0% 10%, 
      10% 30%, 
      20% -10%, 
      30% 20%, 
      22% 40%, 
      50% 40%, 
      65% 10%, 
      90% 20%;
    background-size: 
      0% 0%, 
      0% 0%,  
      0% 0%,  
      0% 0%,  
      0% 0%,  
      0% 0%;
  }
}
@keyframes bottomBubbles {
  0% {
    background-position: 
      10% -10%,
      30% 10%,
      55% -10%,
      70% -10%,
      85% -10%,
      70% -10%,
      70% 0%;
  }
  50% {
    background-position: 
      0% 80%,
      20% 80%,
      45% 60%,
      60% 100%,
      75% 70%,
      95% 60%,
      105% 0%;
  }
  100% {
    background-position: 
      0% 90%,
      20% 90%,
      45% 70%,
      60% 110%,
      75% 80%,
      95% 70%,
      110% 10%;
    background-size: 
      0% 0%,
      0% 0%,
      0% 0%,
      0% 0%,
      0% 0%,
      0% 0%;
  }
}

我们通过 background-position 改变背景的位置,用 background-size 改变大小,来形成动画效果。

这样就形成按钮点击粒子动画效果了。

同理,我们可以在背景上面添加同样的粒子效果。代码基本可以copy。

背景粒子效果

.king:before {
  position: absolute;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 1;
  background-repeat: no-repeat;
  opacity: 0.4;
}
.king:before {
  background-image: 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, transparent 20%, #fff 20%, transparent 30%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, transparent 10%, #fff 15%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%), 
    radial-gradient(circle, #fff 20%, transparent 20%);
  background-size: 
    10% 10%, 
    12% 12%, 
    5% 5%, 
    12% 12%, 
    5% 5%, 
    10% 10%, 
    5% 5%, 
    10% 10%, 
    5% 5%;
  display: block;
  animation: topBubbles ease-in-out 3s forwards infinite;
}

这里我们改变一下粒子的大小,和透明度,以及层次(z-index)。让其一开始就执行动画,并且循环执行(infinite)。动画执行效果,我们直接用上面按钮的效果(topBubbles)即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)
Aug 11 HTML / CSS
纯css3实现的鼠标悬停动画按钮
Dec 23 HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
HTML5边玩边学(2)基础绘图实现方法
Sep 21 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
html5的新增的标签和废除的标签简要概述
Feb 20 HTML / CSS
简单html5代码获取地理位置
Mar 31 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
web前端之css水平居中代码解析
May 20 HTML / CSS
CSS实现渐变色边框(Gradient borders)的5种方法
Mar 25 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 #HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 #HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 #HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 #HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 #HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 #HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 #HTML / CSS
You might like
德生9700DX电路分析
2021/03/02 无线电
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
PHP使用GIFEncoder类生成gif动态滚动字幕
2014/07/01 PHP
分享10段PHP常用代码
2015/11/11 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
javascript 检测浏览器类型和版本的代码
2009/09/15 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
2013/04/16 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
python中偏函数partial用法实例分析
2015/07/08 Python
python实现SMTP邮件发送功能
2020/06/16 Python
基于python实现在excel中读取与生成随机数写入excel中
2018/01/04 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
pywinauto自动化操作记事本
2019/08/26 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
浅析python标准库中的glob
2020/03/13 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
Carrs Silver官网:英国著名的银器品牌
2020/08/29 全球购物
自荐信如何“自荐”
2013/10/24 职场文书
小学生防溺水广播稿
2014/01/12 职场文书
保险公司早会主持词
2014/03/22 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
2016年秋季运动会广播稿
2015/12/21 职场文书
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android