By using border-radius and scale transformations it is very simple to create Audio Waves. Here animation was created by CSS3 keyframes.
CSS3 :
.ring { width: 400px; height: 300px; border-radius: 50%; position: absolute; background-color: transparent; -webkit-animation-name: ani; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-duration: 6s; -webkit-animation-direction: normal; animation-name: ani; animation-iteration-count: infinite; animation-timing-function: linear; animation-duration: 6s; animation-direction: normal; border-top: 15px solid transparent; border-right: 15px solid white; border-bottom: 15px solid transparent; } .sbring { width: 8px; height: 8px; border-radius: 50%; position: absolute; background-color: white; top:161px; left:206px; } @-webkit-keyframes ani { 0% {-webkit-transform: scale(0.01); opacity: 0} 1% {-webkit-transform: scale(0.01); opacity: 0.8} 95% {-webkit-transform: scale(1); opacity: 0.8;} 100% {-webkit-transform: scale(1); opacity: 0;} } @keyframes ani { 0% {transform: scale(0.01); opacity: 0} 1% {transform: scale(0.01); opacity: 0.8} 95% {transform: scale(1); opacity: 0.8;} 100% {transform: scale(1); opacity: 0;} } #r2 { -webkit-animation-delay: -1s;animation-delay: -1s;} #r3 { -webkit-animation-delay: -2s;animation-delay: -2s;} #r4 { -webkit-animation-delay: -3s;animation-delay: -3s;} #r5 { -webkit-animation-delay: -4s;animation-delay: -4s;} #r6 { -webkit-animation-delay: -5s;animation-delay: -5s;}
HTML :
<div class="sbring"></div> <div id="r1" class="ring"></div> <div id="r2" class="ring"></div> <div id="r3" class="ring"></div> <div id="r4" class="ring"></div> <div id="r5" class="ring"></div> <div id="r6" class="ring"></div>
Read Also :
1. How to create Animated Rings with CSS32. Create Flat Rotating Icon Buttons with CSS3 and jQuery
3. Styling file input (type=file) with CSS and jQuery
sir in IE not working
ReplyDeleteOlder browsers of IE doesn't have CSS3 support
Deletesir put download button by subscribing as 9lessons,android hive by that u can increase readership and the registered users will get mail if u posted new one
ReplyDelete