css3实现冲击波效果

来源：懂视网责编：小OO 时间：2020-11-27 18:49:25

css3实现冲击波效果

近日，很多浏览器按钮点击会出现以下冲击波效果，出于好奇，参考网上的资料，将这个效果研究实现下。实现思路。观察波由小变大，涉及的css3属性变化有width，height，left，top，opacity，首先通过伪类实现冲击波层，同时需要设置冲击波前后的中心点位置（这里涉及一点点数学知识：画图计算两个点的位置)，最后设置transition-duration： 0实现瞬间变化，ps学习到用a：active可以模拟鼠标实现点击的效果。简单画下图（很菜）。实现的代码。

推荐度：

点击下载本文 文档为doc格式

导读近日，很多浏览器按钮点击会出现以下冲击波效果，出于好奇，参考网上的资料，将这个效果研究实现下。实现思路。观察波由小变大，涉及的css3属性变化有width，height，left，top，opacity，首先通过伪类实现冲击波层，同时需要设置冲击波前后的中心点位置（这里涉及一点点数学知识：画图计算两个点的位置)，最后设置transition-duration： 0实现瞬间变化，ps学习到用a：active可以模拟鼠标实现点击的效果。简单画下图（很菜）。实现的代码。

本文主要介绍了css3实现冲击波效果的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

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

实现思路：

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

简单画下图（很菜）：

实现的代码：

 <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>
 <!--实现冲击波按钮确定长度-->
 <p class="wave" id="wave1">
 <a>点我</a>
 </p>
 <!--实现冲击波按钮不确定长度时-->
 <p class="wave" id="wave2">
 <a>点我哈哈</a>
 </p>
 </body>
 </html>

实现的效果：

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

css3实现冲击波效果

推荐度：

点击下载本文 文档为doc格式

标签：效果 css css3

热门焦点

css3实现冲击波效果

css3实现冲击波效果

css3实现冲击波效果

最新推荐

猜你喜欢

热门推荐