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实现的点击出现波纹效果属于前端实例代码，有关更多实例代码大家可以查看。