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实现垂直下拉动画菜单示例
Apr 22 HTML / CSS
CSS3动画效果回调处理详解
Dec 10 HTML / CSS
CSS3制作炫酷的下拉菜单及弹起式选单的实例分享
May 17 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
Jan 26 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
Dec 08 HTML / CSS
HTML5拖拽文件上传的示例代码
Mar 04 HTML / CSS
从QQtabBar看css命名规范BEM的详细介绍
Aug 07 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/05/27 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
图文详解PHP环境搭建教程
2016/07/16 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
深入理解Python 代码优化详解
2014/10/27 Python
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
Python 必须了解的5种高级特征
2020/09/10 Python
Python脚本调试工具安装过程
2021/01/11 Python
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
荷兰家电销售网站:Welhof
2020/12/08 全球购物
函授自我鉴定范文
2014/02/06 职场文书
《闻一多先生的说和做》教学反思
2014/04/28 职场文书
物理学专业求职信
2014/07/04 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
鲁迅故居导游词
2015/02/05 职场文书
计生个人工作总结
2015/02/28 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书