"Earth Quake"
Bootstrap 3.0.0 Snippet by sachinkul6185@gmail.com

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <aside class="reqest-get animation-active"> <h3 id="callbackWidget" class="reqest-get_title"> Request a <span class="reqest-get_sub-title">Call Back</span> </h3> <section id="first_me" class="reqest-modul reqest-modul_request js-callback-request" style="display: none;"> <div id="close_me1" class="reqest-modul_close-button js-reqest-modul-close"></div> <form class="js-callback-form-root"> <input type="text" name="phone_no" value="" maxlength="10" id="phone_no" class="phone_nmbr"> <a onclick="Validate()" class="reqest-modul_button reqest-modul_request-button "> Call me back </a> </form> <p class="reqest-modul_disclaimer">One of our Travel Agents will call you back within the next <b>59 seconds</b> to discuss your travel plans. By submitting your phone number, you agree to be contacted via phone and/or sms. No booking necessary. Your personal data is 100% safe.</p> </section> </aside>
.reqest-get{ position:fixed; z-index:499; width:89px; height:89px; border-radius:50%; background-color: #FF5722; cursor:pointer; } .reqest-get:before,.reqest-get:after{ position:absolute; top:50%; left:50%; border-radius:50%; display:block; visibility:hidden; -webkit-transform:translate3d(-50%, -50%, -1); transform:translate3d(-50%, -50%, -1); content:''; background-color: #FF5722; opacity:0; cursor:default; } .reqest-get:before{ width:109px; height:109px; } .reqest-get:after{ width:127px; height:127px } @media screen and (min-width: 768px){ .reqest-get{ display:block } } @media screen and (min-width: 1379px){ .reqest-get{ right:calc((100% - 1400px) / 2) } } .reqest-get_title{ position:relative; z-index:2; margin:0; width:100%; height:100%; border-radius:50%; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; font-size:9px; color:#ffffff; -webkit-align-items:center; -ms-flex-align:center; align-items:center; font-family:"Open Sans", sans-serif; line-height:1 } .reqest-get_title:hover{ background-color: #FF5722; } .reqest-get_title h3{ font-weight: 500; letter-spacing: 2px; } .reqest-get_sub-title{ width:60px; font-size:17px; font-weight:700; text-transform:uppercase; letter-spacing:0.76px; text-shadow:0 1px 1px rgba(141, 219, 21, 0.47); text-align:center; } .above-mask{ z-index:501 } .animation-active{ -webkit-animation:shakeCallbackWidget 3s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite; animation:shakeCallbackWidget 3s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite; -webkit-transform:translate(0, 0); -ms-transform:translate(0, 0); transform:translate(0, 0); -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-perspective:1000px; perspective:1000px; -webkit-animation-delay:3s; animation-delay:3s; } .animation-active:before,.animation-active:after{ -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-perspective:1000px; perspective:1000px } .animation-active:before{ -webkit-animation:pulsateInner 3s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite; animation:pulsateInner 3s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite; -webkit-animation-delay:3s; animation-delay:3s } .animation-active:after{ -webkit-animation:pulsateOuter 3s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite; animation:pulsateOuter 3s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite; -webkit-animation-delay:3s; animation-delay:3s } .animation-active.pause-animation{ -webkit-animation:none; animation:none } .animation-active.pause-animation:before,.animation-active.pause-animation:after{ -webkit-animation:none; animation:none } @-webkit-keyframes shakeCallbackWidget{ 2%,18%{ -webkit-transform:translate(-1px, 0); transform:translate(-1px, 0); } 4%,16%{ -webkit-transform:translate(2px, 0); transform:translate(2px, 0); } 6%,10%,14%{ -webkit-transform:translate(-4px, 0); transform:translate(-4px, 0); } 8%,12%{ -webkit-transform:translate(4px, 0); transform:translate(4px, 0); } 20%{ -webkit-transform:translate(0, 0); transform:translate(0, 0); } } @keyframes shakeCallbackWidget{ 2%,18%{ -webkit-transform:translate(-1px, 0); transform:translate(-1px, 0); } 4%,16%{ -webkit-transform:translate(2px, 0); transform:translate(2px, 0); } 6%,10%,14%{ -webkit-transform:translate(-4px, 0); transform:translate(-4px, 0); } 8%,12%{ -webkit-transform:translate(4px, 0); transform:translate(4px, 0); } 20%{ -webkit-transform:translate(0, 0); transform:translate(0, 0); } } @-webkit-keyframes pulsateInner{ 0%{ visibility:visible; -webkit-transform:translate3d(-50%, -50%, 0) scale(0.1, 0.1); transform:translate3d(-50%, -50%, 0) scale(0.1, 0.1); opacity:0; } 20%{ opacity:.4; } 40%,100%{ visibility:hidden; -webkit-transform:translate3d(-50%, -50%, 0) scale(1.1, 1.1); transform:translate3d(-50%, -50%, 0) scale(1.1, 1.1); opacity:0; } } @keyframes pulsateInner{ 0%{ visibility:visible; -webkit-transform:translate3d(-50%, -50%, 0) scale(0.1, 0.1); transform:translate3d(-50%, -50%, 0) scale(0.1, 0.1); opacity:0; } 20%{ opacity:.4; } 40%,100%{ visibility:hidden; -webkit-transform:translate3d(-50%, -50%, 0) scale(1.1, 1.1); transform:translate3d(-50%, -50%, 0) scale(1.1, 1.1); opacity:0; } } @-webkit-keyframes pulsateOuter{ 0%{ visibility:visible; -webkit-transform:translate3d(-50%, -50%, 0) scale(0.1, 0.1); transform:translate3d(-50%, -50%, 0) scale(0.1, 0.1); opacity:0; } 20%{ opacity:.3; } 40%,100%{ visibility:hidden; -webkit-transform:translate3d(-50%, -50%, 0) scale(1.1, 1.1); transform:translate3d(-50%, -50%, 0) scale(1.1, 1.1); opacity:0; } } @keyframes pulsateOuter{ 0%{ visibility:visible; -webkit-transform:translate3d(-50%, -50%, 0) scale(0.1, 0.1); transform:translate3d(-50%, -50%, 0) scale(0.1, 0.1); opacity:0; } 20%{ opacity:.3; } 40%,100%{ visibility:hidden; -webkit-transform:translate3d(-50%, -50%, 0) scale(1.1, 1.1); transform:translate3d(-50%, -50%, 0) scale(1.1, 1.1); opacity:0; } }

Related: See More


Questions / Comments: