css3和jQuery實現的點選出現波紋效果

antzone發表於2017-04-18
CSSS3jQuery

分享一段程式碼例項，它實現了點選話筒胡出現波紋效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

相關文章