猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

一个css3动画

https://img.mukewang.com/5b8be9220001245903580272.jpg

我想点击这个按钮时，让这个按钮四周有一片淡淡的波纹向外扩散，这个好做吗？
像这样：

https://img2.mukewang.com/5b8be935000151d304610286.jpg

偶然的你
浏览 781回答 2
2回答

三国纷争

<!DOCTYPE html><html>&nbsp; &nbsp; <head>&nbsp; &nbsp; &nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; &nbsp; &nbsp; <title></title>&nbsp; &nbsp; &nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .wave{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;background: #FC7171;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;color: white;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;width: 200px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;height: 200px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;border-radius: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;border:none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;outline: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;position: relative; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .wave p{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; z-index: 7;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;display: block;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; .animat::before,.animat::after{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content:"";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position:absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;background: #FA7C7C;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-position:center center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius:50%; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .animat::before{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; z-index:2;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; animation:wave 2s ease-out infinite;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -webkit-animation:wave 2s ease-out infinite;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .animat::after{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; z-index:3;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; animation:wave 2s ease-out .2s infinite;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -webkit-animation:wave 2s ease-out .2s infinite;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; @keyframes wave{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 0%{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 50%;left: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translate(-50%, -50%) scale(1.4);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width:30px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height:30px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 50%{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 50%;left: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translate(-50%, -50%) scale(1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width:240px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height:240px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 100%{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top: 50%;left: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translate(-50%, -50%) scale(1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width:240px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height:240px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; </style>&nbsp; &nbsp; </head>&nbsp; &nbsp; <body>&nbsp; &nbsp; &nbsp; &nbsp; <button class="wave"><p>点击计数</p></button>&nbsp; &nbsp; &nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var btn = document.getElementsByTagName("button")[0];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var timer;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; btn.onclick = function(){ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.classList.add("animat");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(timer){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clearInterval(timer);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; timer = setTimeout(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.classList.remove("animat");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }.bind(this),2000);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; </script>&nbsp; &nbsp; </body></html>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

CSS3