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 相关文章推荐
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
css3让div随鼠标移动而抖动起来
Feb 10 HTML / CSS
在HTML5中如何使用CSS建立不可选的文字
Oct 17 HTML / CSS
基于CSS3实现的漂亮Menu菜单效果代码
Sep 10 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
html5.2 dialog简介详解
Feb 27 HTML / CSS
iframe跨域的几种常用方法
Nov 11 HTML / CSS
HTML中的表单Form实现居中效果
May 25 HTML / CSS
CSS3实现360度循环旋转功能
Feb 12 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
用PHP和ACCESS写聊天室(二)
2006/10/09 PHP
PHP中调用ASP.NET的WebService的代码
2011/04/22 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
怎样搭建PHP开发环境
2015/07/28 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
prototype class详解
2006/09/07 Javascript
JavaScript 字符串连接性能优化
2008/12/20 Javascript
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
js中符号转意问题示例探讨
2013/08/19 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
2020/09/04 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
python检测某个变量是否有定义的方法
2015/05/20 Python
pandas实现将dataframe满足某一条件的值选出
2019/06/12 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
python中逻辑与或(and、or)和按位与或异或(&amp;、|、^)区别
2020/08/05 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
彻底解决Python包下载慢问题
2020/11/15 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
美国轮胎网站:Priority Tire
2018/11/28 全球购物
年度考核自我鉴定
2013/11/09 职场文书
经典大学生求职信范文
2014/01/06 职场文书
模具毕业生推荐信
2014/02/15 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
双拥工作宣传标语
2014/06/26 职场文书
优秀教师推荐材料
2014/12/16 职场文书