css3实现冲击波效果的示例代码


Posted in HTML / CSS onJanuary 11, 2018

近日,很多浏览器按钮点击会出现以下冲击波效果,出于好奇,参考网上的资料,将这个效果研究实现下。

css3实现冲击波效果的示例代码

实现思路:

观察波由小变大,涉及的css3属性变化有width,height,left,top,opacity,首先通过伪类实现冲击波层,同时需要设置冲击波前后的中心点位置(这里涉及一点点数学知识:画图计算两个点的位置),最后设置transition-duration: 0实现瞬间变化,ps学习到用a:active可以模拟鼠标实现点击的效果

简单画下图(很菜):

css3实现冲击波效果的示例代码

实现的代码:

<html>
  <head>
  <meta charset="UTF-8">
  <title>实现冲击波--数学知识很重要</title>
  <style>
  *{
  margin:0;
  padding:0;
  box-sizing:border-box;
  }
  html,body{
  font-family:"微软雅黑";
  }
  .wave{
  position:relative;
  float:left;
  width:50%;
  height:420px;
  }
  .wave a{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  display:inline-block;
  width:120px;
  height:50px;
  /*margin-left:-60px;
  margin-top:-25px;*/
  line-height:50px;
  text-align:center;
  border-radius:5px;
  color:#fff;
  font-size:16px;
  cursor:pointer;
  /*overflow:hidden;*/
  
  }
  #wave1{
  background-color:#00BFFF;
  }
  #wave2{
  background-color:#009955;
  }
  #wave1 a{
  background-color:burlywood;
  }
  #wave2 a{/*宽度不确定长度*/
  width:50%;
  height:50px;
  background-color:cadetblue;
  }
  .wave a:after{
  /*画图
 ,假设left:0;top:0然后画出两个中心点的水平和垂直距离*/
  content: "";
  display: block;
  position: absolute;
  left: -40px;
  top: -75px;
  width: 200px;
  height: 200px;
  background: rgba(255,255,255,0.8);
  border-radius: 50%;
  opacity:0;
  transition: all 1s;
  }
  .wave a:active:after{
  /*位于中间即是a的中点*/
  width: 0; 
  height: 0; 
  left:60px; 
  top: 25px;
  opacity: 1; 
  transition-duration: 0s;
  }
  
  #wave2 a:after{
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  }
  #wave2 a:active:after{
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  }
  </style>
  </head>
  <body>
  <!--实现冲击波按钮确定长度-->
  <div class="wave" id="wave1">
  <a>点我</a>
  </div>
  <!--实现冲击波按钮不确定长度时-->
  <div class="wave" id="wave2">
  <a>点我哈哈</a>
  </div>
  </body>
  </html>

实现的效果:

css3实现冲击波效果的示例代码

github代码:实现冲击波代码

备注:2018/01/09更新了考虑按钮长度不确定的情况,同时github代码已经更新

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

HTML / CSS 相关文章推荐
CSS3制作半透明边框(Facebox)类似渐变
Dec 09 HTML / CSS
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 HTML / CSS
HTML5实现晶莹剔透的雨滴特效
May 14 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 HTML / CSS
HTML5实现获取地理位置信息并定位功能
Apr 25 HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 HTML / CSS
HTML5如何使用SVG的方法示例
Jan 11 HTML / CSS
CSS 左边固定宽右边自适应的6种方法
May 15 HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
Jan 09 #HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 #HTML / CSS
css3的动画特效之动画序列(animation)
Dec 22 #HTML / CSS
css3实现多个元素依次显示效果
Dec 12 #HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 #HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 #HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 #HTML / CSS
You might like
一贴学会PHP 新手入门教程
2009/08/03 PHP
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
JS访问DOM节点方法详解
2016/11/29 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
深入理解Node内建模块和对象
2019/03/12 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
详解小程序开发经验:多页面数据同步
2019/05/18 Javascript
Python爬虫爬验证码实现功能详解
2016/04/14 Python
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
python实现QQ空间自动点赞功能
2019/04/09 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
python ImageDraw类实现几何图形的绘制与文字的绘制
2020/02/26 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
如何查看浏览器对html5的支持情况
2020/12/15 HTML / CSS
设计总监岗位职责
2013/12/07 职场文书
活动志愿者自荐信
2014/01/27 职场文书
乡镇庆八一活动方案
2014/02/02 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
副乡长群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
财务统计员岗位职责
2015/04/14 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
Python使用Kubernetes API访问集群
2021/05/30 Python
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python