Code Phone Zalo rung lắc cho web
Lợi Ích Khi Sử Dụng Hiệu Ứng Rung Lắc Cho Số Điện Thoại Zalo
Thu hút sự chú ý: Hiệu ứng rung lắc làm cho số điện thoại Zalo của bạn trở nên nổi bật, giúp khách hàng dễ dàng nhận ra thông tin liên hệ.
Tăng khả năng tương tác: Khi số điện thoại hoặc biểu tượng Zalo được chú ý nhiều hơn, khách hàng có xu hướng bấm vào và liên hệ với bạn nhiều hơn.
Tạo điểm nhấn cho website: Hiệu ứng giúp website của bạn trở nên sống động và chuyên nghiệp hơn.
Hiệu ứng rung lắc Zalo
Tạo hiệu ứng cho số điện thoại Zalo
Cách làm hiệu ứng rung lắc trên website
Thêm hiệu ứng Zalo cho website
Hiệu ứng thu hút khách hàng
Cách cài đặt: Copy toàn bộ code bên dưới dán dưới thẻ <body> hoặc trước thẻ </body> lưu lại là xong, có nghĩa là code nằm trong <body></body>
<style>/*<![CDATA[*/#button-contact-vr{position:fixed;bottom:0;z-index:99999}#button-contact-vr .button-contact{position:relative}#button-contact-vr .button-contact .phone-vr{position:relative;visibility:visible;background-color:transparent;width:90px;height:90px;cursor:pointer;z-index:11;-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);transition:visibility .5s;left:0;bottom:0;display:block}.phone-vr-circle-fill{width:65px;height:65px;top:12px;left:12px;position:absolute;box-shadow:0 0 0 0 #c31d1d;background-color:rgba(230,8,8,0.7);border-radius:50%;border:2px solid transparent;-webkit-animation:phone-vr-circle-fill 2.3s infinite ease-in-out;animation:phone-vr-circle-fill 2.3s infinite ease-in-out;transition:all .5s;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-animuiion:zoom 1.3s infinite;animation:zoom 1.3s infinite}.phone-vr-img-circle{background-color:#e60808;width:40px;height:40px;line-height:40px;top:25px;left:25px;position:absolute;border-radius:50%;display:flex;justify-content:center;-webkit-animation:phonering-alo-circle-img-anim 1s infinite ease-in-out;animation:phone-vr-circle-fill 1s infinite ease-in-out}.phone-vr-img-circle a{display:block;line-height:37px}.phone-vr-img-circle img{max-height:25px;max-width:27px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%)}@-webkit-keyframes phone-vr-circle-fill{0%{-webkit-transform:rotate(0) scale(1) skew(1deg)}10%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}20%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}30%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}40%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}50%{-webkit-transform:rotate(0) scale(1) skew(1deg)}100%{-webkit-transform:rotate(0) scale(1) skew(1deg)}}@-webkit-keyframes zoom{0%{transform:scale(.9)}70%{transform:scale(1);box-shadow:0 0 0 15px transparent}100%{transform:scale(.9);box-shadow:0 0 0 0 transparent}}@keyframes zoom{0%{transform:scale(.9)}70%{transform:scale(1);box-shadow:0 0 0 15px transparent}100%{transform:scale(.9);box-shadow:0 0 0 0 transparent}}.phone-bar a{position:fixed;bottom:25px;left:30px;z-index:-1;color:#fff;font-size:16px;padding:8px 15px 7px 50px;border-radius:100px;white-space:nowrap}.phone-bar a:hover{opacity:0.8;color:#fff}@media(max-width:736px){.phone-bar{display:none}}#zalo-vr .phone-vr-circle-fill{box-shadow:0 0 0 0 #2196F3;background-color:rgba(33,150,243,0.7)}#zalo-vr .phone-vr-img-circle{background-color:#2196F3}#viber-vr .phone-vr-circle-fill{box-shadow:0 0 0 0 #714497;background-color:rgba(113,68,151,0.8)}#viber-vr .phone-vr-img-circle{background-color:#714497}#contact-vr .phone-vr-circle-fill{box-shadow:0 0 0 0 #2196F3;background-color:rgba(33,150,243,0.7)}#contact-vr .phone-vr-img-circle{background-color:#2196F3}#gom-all-in-one #phone-vr{transition:0.7s all;-moz-transition:0.7s all;-webkit-transition:0.7s all}#gom-all-in-one #zalo-vr{transition:1s all;-moz-transition:1s all;-webkit-transition:1s all}#gom-all-in-one #viber-vr{transition:1.3s all;-moz-transition:1.3s all;-webkit-transition:1.3s all}#gom-all-in-one #contact-vr{transition:1.6s all;-moz-transition:1.6s all;-webkit-transition:1.6s all}#button-contact-vr.active #gom-all-in-one .button-contact{margin-left:-100%}#all-in-one-vr .phone-bar{position:absolute;top:50%;transform:translateY(-50%);left:100%;color:#fff;padding:5px 15px 5px 48px;border-radius:50px;margin-left:-64px;width:max-content;cursor:pointer}/*]]>*/</style><div id='button-contact-vr'><div id='gom-all-in-one'><div class='button-contact' id='zalo-vr'><div class='phone-vr'><div class='phone-vr-circle-fill' /><div class='phone-vr-img-circle'><a href='https://zalo.me/0123456789' target='_blank'><img alt='alt' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7blgSJVf5J_vd1MP63B0dYywuzRFtjDHRB0GtBwN0gC2vVYyMhL1jPg6WiVOPe1Eh01bppB4quyTBVaxFZkx65CtkgTIZmmF0rDN2xae4pscwFLVW5MAfQcPRNryTt5AExgwZtHg9RvQ/h120/zalo.png' /></a></div></div></div><!-- end zalo --><!-- Phone --><div class='button-contact' id='phone-vr'><div class='phone-vr'><div class='phone-vr-circle-fill' /><div class='phone-vr-img-circle'><a href='tel:0123456789'><img alt='alt' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVSzDiyGxrxXNHxuYu9FWbR7XEiOJ2QbtHU0OWTjsv6kwt2Vdq10IX3fbQFEb_Mgx3cblXi8gc49cw0a9meCHJ7JH561acg7S0J84CH24MmD0nsZSPWVIqVSElPeWWId1gN-tFjAZ8a70/h120/phone.png' /></a></div></div></div></div></div>
Đã sao chép link!
Nhận xét (0)
Đăng nhận xét