近日，很多浏览器 按钮点击 会出现以下冲击波效果，出于好奇，参考网上的资料，将这个效果研究实现下。
实现思路：
观察波由小变大，涉及的css3属性变化有width,h ei ght,left,top,opac IT y,首先通过 伪类 实现冲击波层，同时需要设置冲击波前后的中心点位置（这里涉及 一点 点数学知识:画图计算两个点的位置),最后设置transition-duration: 0实现瞬间变化，ps学习到用a:active可以模拟鼠标实现点击的效果
简单 画下图（很菜）：
实现的代码：
<ht ML >
<head>
< ;m eta charset="UTF-8">
<title>实现冲击波--数学知识很 重要 </title>
<style>
*{
m arg in:0;
padding:0;
box -s izing:border-box;
}
html,body{
font-f ami ly:" 微软雅黑 ";
}
.wave{
position:relative;
float:left;
width:50%;
height:420px;
}
.wave a{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
dis play :inline-block;
width:120px;
height:50px;
/*mar gin -left:-60px;
margin -t op:-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: CAD etblue;
}
.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>
实现的效果：
gith ub 代码： 实现冲击波代码
备注：2018/01/09更新了考虑按钮长度不确定的情况，同时github代码已经更新
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
总结
以上是 为你收集整理的 css3实现冲击波效果的示例代码 全部内容，希望文章能够帮你解决 css3实现冲击波效果的示例代码 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于css3实现冲击波效果的示例代码的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did201528