cvmachine.com - 申博开户网

搜索: 您的位置主页 > 网络频道 > 阅读资讯:css3实现冲击波效果的示例代码分析

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

2018-01-29 21:47:07 来源:www.cvmachine.com 【

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

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

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代码已经更新

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持申博开户。


本文地址:http://www.cvmachine.com/a/question/96270.html
Tags: 实现 css3 冲击波
编辑:申博开户网
  • 上一篇:如何紧张缓存HTML5 web运用程序?
  • 下一篇:没有了
  • m88 188bet uedbet 威廉希尔 明升 bwin 明升88 bodog bwin 明升m88.com 18luck 188bet unibet unibet Ladbrokes Ladbrokes 真钱的棋牌游戏 casino m88明升 明升 明升 m88.com 188bet m88 明陞 uedbet赫塔菲官网 365bet官网 nba英文官网 嘉年华官网 皇冠备用 火箭队官网 中国人论坛 bet 单双公式 博彩资讯网 w88优德 港京印刷图库 澳门足球盘 球盘 娱乐场 联众网站 沙龙365 7080棋牌游戏 真钱 澳门回归日期 大众娱乐网 卡宾官方旗舰店 mg电子 全亚洲首选288x nba即时比分 本港 中国足彩竞猜网 斗地主规则 七星彩论坛图规 网上赌博 单双规律 沈泳 华夏娱乐网 明升备用网址 梦网书城 盈禾国际 明升体育 博狗沃鑫 卡宾官方旗舰 信誉赌场 球探比分网 竞彩论坛空间 三亚娱乐 soutec 北京福利彩票 澳门彩票公司 北京pk10 凤凰 纸牌小游戏 皇冠现金代理 银河国际亚洲首选288x 三六八高手论坛 空中城市 赌球心得 188比分 让球规则 三星娱乐城 诺贝尔娱乐城 今天有nba直播吗 5060全讯网 新世纪 久乐娱乐场 世界杯盘口 易胜博 麻将单机版 华人娱乐总站 财神爷心水论坛 巴特 澳门百利宫 明升 红姐统一主图库 九龙老牌图库 打牌 娱乐王子 娱乐真人 亚豪平台 真人娱乐 飞禽走兽老虎机 188bet下载 博发娱乐城 北单 陈怀生 比分188 百万图库 老挝赌博 pc蛋蛋注册 天上人间娱乐 红姐统一图库 产业新闻网 葡京
    推广内容
    推荐阅读
    热门推荐
    关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部