css3和jQuery实现的点击出现波纹效果
分类:实例代码
分享一段代码实例,它实现了点击话筒胡出现波纹效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>犀牛前端部落</title> <style type="text/css"> .recoder{ position:absolute; top:50%; left:50%; width:80px; height:80px; margin:-40px 0px 0px -40px; display:block; } .recoderStart{ position:absolute; display:block; border-radius:50%; background-color:#04c5fc; width:80px; height:80px; background-image:url('demo/jQuery/img/mic2.png'); background-repeat: no-repeat; background-position: center; box-shadow: #0185ab 0px 0px 5px 1px, #bdeefc 0px 0px 0px 20px; } .recoderStop{ position:absolute; display:none; width:80px; height:80px; } .recoderStopCircle1{ display:block; border-radius:50%; position:absolute; left:50%; top:50%; border-style:solid; border-width:1px; -webkit-animation-name: recoderAnimation; -webkit-animation-duration: 3s; -webkit-animation-delay: 1s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:ease-out; } .recoderStopCircle2 { display:block; border-radius:50%; position:absolute; left:50%; top:50%; border-style:solid; border-width:1px; -webkit-animation-name:recoderAnimation; -webkit-animation-duration:3s; -webkit-animation-delay:1.4s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:ease-out; } .recoderStopCircle3 { display: block; border-radius: 50%; position: absolute; left: 50%; top: 50%; border-style: solid; border-width: 1px; -webkit-animation-name: recoderAnimation; -webkit-animation-duration: 3s; -webkit-animation-delay: 1.8s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-out; } .recoderStopCircle4 { display: block; border-radius: 50%; position: absolute; left: 50%; top: 50%; border-style: solid; border-width: 1px; -webkit-animation-name: recoderAnimation; -webkit-animation-duration: 3s; -webkit-animation-delay: 2.2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-out; } @-webkit-keyframes recoderAnimation { 0% { width:100px; height:100px; margin:-50px; border-color:rgba(95, 215, 249, 1.0); } 100% { width:200px; height:200px; margin:-100px; border-color:rgba(95, 215, 249, 0); } } .recoderStop:after { position: absolute; content: ''; display: block; border-radius: 50%; width: 80px; height: 80px; background-image: url('demo/jQuery/img/mic2.png'), -webkit-linear-gradient(90deg, rgb(96, 216, 250) 0%, rgb(4, 135, 183) 100%); background-repeat: no-repeat; background-position: center; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(function(){ $('.recoderStart').on('click', function(){ $('.recoderStart').toggle(); $('.recoderStop').toggle(); }) $('.recoderStop').on('click', function(){ $('.recoderStart').toggle(); $('.recoderStop').toggle(); }) }) </script> </head> <body> <div class="recoder"> <span class="recoderStart"></span> <span class="recoderStop"> <span class="recoderStopCircle1"></span> <span class="recoderStopCircle2"></span> <span class="recoderStopCircle3"></span> <span class="recoderStopCircle4"></span> </span> </div> </body> </html>
css3和jQuery实现的点击出现波纹效果,这样的场景在实际项目中还是用的比较多的,关于css3和jQuery实现的点击出现波纹效果就介绍到这了。
css3和jQuery实现的点击出现波纹效果属于前端实例代码,有关更多实例代码大家可以查看。
网站出售中,有意者加微信:javadudu