Di sini kita akan belajar sedikit trik dari CSS3. Dalam tutorial ini kita akan membuat efek pulse menggunakan CSS3 properti saja. Saya akan membuat efek ini menggunakan CSS3 Animasi Keyframe. Hanya ingin membuat efek tween menggunakan javascript.

Ini akan bekerja pada browser yang mendukung CSS3 Animasi.

Sekarang mari kita mulai melalui bagian HTML dan CSS artikel ini. Kita hanya akan membutuhkan tiga tag div dan CSS style untuk div tag tersebut…

HTML Markup

<div>
<div>  <div class="pulse_holder">
     <div class="pulse_marker">
         <div class="pulse_rays"></div>
     </div>
   </div></div>
<div>

CSS Code

@-webkit-keyframes pulse
   {
     0% {-webkit-transform: scale(0); opacity: 0;}
     8% {-webkit-transform: scale(0); opacity: 0;}
     15% {-webkit-transform: scale(0.1); opacity: 1;}
     30% {-webkit-transform: scale(0.5); opacity: 1;}
     100% {opacity: 0; -webkit-transform: scale(1);}
   }

   @-moz-keyframes pulse
   {
     0% {-moz-transform: scale(0); opacity: 0;}
     8% {-moz-transform: scale(0); opacity: 0;}
     15% {-moz-transform: scale(0.1); opacity: 1;}
     30% {-moz-transform: scale(0.5); opacity: 1;}
     100% {opacity: 0; -moz-transform: scale(1);}
   }

   .pulse_holder
   {
     display: block;
     position: absolute;
     top: 100px;
     left: 350px;
   }

   .pulse_holder .pulse_marker
   {
     width: 16px;
     height: 16px;
     background: #099;
     border-radius: 28px;
   }

   .pulse_holder .pulse_rays
   {
     margin: 0 auto;
     border-radius: 100px;
     position: absolute;
     right: -26px;
     top: -26px;
     z-index: 10;
     background-color: transparent;
     opacity: 0.1;
     width: 64px;
     height: 64px;
     border: 2px solid rgba(0, 128, 64, 1);
     -webkit-border-radius: 100px;
     -moz-border-radius: 100px;
     -o-border-radius: 100px;
     -ms-border-radius: 100px;
     border-radius: 100px;
     /* Giving Animation Function */
     -webkit-animation: pulse 2s linear infinite;
     -moz-animation: pulse 2s linear infinite;
     border-image: initial;
   }

Maka hasilnya akan seperti ini :

silahkan coba menggunakan file html