Tạo nút liên hệ ngay cho blogspot với hiệu ứng css3 cực đẹp
Chào các bạn, hôm nay mình sẽ chia sẻ đến các bạn cách Tạo nút liên hệ ngay cho blogspot
OK vậy là đã xong rồi, rất nhanh và đơn giản đúng không nào. Ngoài ra các bạn cũng có thể tùy chỉnh lại theo ý của mình nhé. Chúc các bạn thành công!
với hiệu ứng css3 cực đẹp
DEMO
Tiếp theo các bạn tìm đến thẻ <body> và dán đoạn code sau xuống phía dưới nó
<!-- BEGIN CSS -->
<style>
.quick-alo-phone.quick-alo-static{opacity:.6}
.quick-alo-phone.quick-alo-hover,.quick-alo-phone:hover{opacity:1}
.quick-alo-ph-circle{width:160px;height:160px;top:20px;left:20px;position:absolute;background-color:transparent;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid rgba(30,30,30,0.4);border:2px solid #bfebfc 9;opacity:.1;-webkit-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;-moz-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;-ms-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;-o-animation:quick-alo-circle-anim 1.2s infinite ease-in-out;animation:quick-alo-circle-anim 1.2s infinite ease-in-out;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50%}
.quick-alo-phone.quick-alo-active .quick-alo-ph-circle{-webkit-animation:quick-alo-circle-anim 1.1s infinite ease-in-out!important;-moz-animation:quick-alo-circle-anim 1.1s infinite ease-in-out!important;-ms-animation:quick-alo-circle-anim 1.1s infinite ease-in-out!important;-o-animation:quick-alo-circle-anim 1.1s infinite ease-in-out!important;animation:quick-alo-circle-anim 1.1s infinite ease-in-out!important}
.quick-alo-phone.quick-alo-static .quick-alo-ph-circle{-webkit-animation:quick-alo-circle-anim 2.2s infinite ease-in-out!important;-moz-animation:quick-alo-circle-anim 2.2s infinite ease-in-out!important;-ms-animation:quick-alo-circle-anim 2.2s infinite ease-in-out!important;-o-animation:quick-alo-circle-anim 2.2s infinite ease-in-out!important;animation:quick-alo-circle-anim 2.2s infinite ease-in-out!important}
.quick-alo-phone.quick-alo-hover .quick-alo-ph-circle,.quick-alo-phone:hover .quick-alo-ph-circle{border-color:#19B5FE;opacity:.5}
.quick-alo-phone.quick-alo-green.quick-alo-hover .quick-alo-ph-circle,.quick-alo-phone.quick-alo-green:hover .quick-alo-ph-circle{border-color:#75eb50;border-color:#baf5a7 9;opacity:.5}
.quick-alo-phone.quick-alo-green .quick-alo-ph-circle{border-color:#19B5FE;border-color:#bfebfc 9;opacity:.5}
.quick-alo-phone.quick-alo-gray.quick-alo-hover .quick-alo-ph-circle,.quick-alo-phone.quick-alo-gray:hover .quick-alo-ph-circle{border-color:#ccc;opacity:.5}
.quick-alo-phone.quick-alo-gray .quick-alo-ph-circle{border-color:#75eb50;opacity:.5}
.quick-alo-ph-circle-fill{width:100px;height:100px;top:50px;left:50px;position:absolute;background-color:#000;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;opacity:.1;-webkit-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;-moz-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;-ms-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;-o-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50%}
.quick-alo-phone.quick-alo-active .quick-alo-ph-circle-fill{-webkit-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out!important;-moz-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out!important;-ms-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out!important;-o-animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out!important;animation:quick-alo-circle-fill-anim 1.7s infinite ease-in-out!important}
.quick-alo-phone.quick-alo-static .quick-alo-ph-circle-fill{-webkit-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out!important;-moz-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out!important;-ms-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out!important;-o-animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out!important;animation:quick-alo-circle-fill-anim 2.3s infinite ease-in-out!important;opacity:0!important}
.quick-alo-phone.quick-alo-hover .quick-alo-ph-circle-fill,.quick-alo-phone:hover .quick-alo-ph-circle-fill{background-color:rgba(0,175,242,0.5);background-color:#19B5FE 9;opacity:.75!important}
.quick-alo-phone.quick-alo-green.quick-alo-hover .quick-alo-ph-circle-fill,.quick-alo-phone.quick-alo-green:hover .quick-alo-ph-circle-fill{background-color:rgba(117,235,80,0.5);background-color:#baf5a7 9;opacity:.75!important}
.quick-alo-phone.quick-alo-green .quick-alo-ph-circle-fill{background-color:rgba(0,175,242,0.5);background-color:#a6e3fa 9;opacity:.75!important}
.quick-alo-phone.quick-alo-gray.quick-alo-hover .quick-alo-ph-circle-fill,.quick-alo-phone.quick-alo-gray:hover .quick-alo-ph-circle-fill{background-color:rgba(204,204,204,0.5);background-color:#ccc 9;opacity:.75!important}
.quick-alo-phone.quick-alo-gray .quick-alo-ph-circle-fill{background-color:rgba(117,235,80,0.5);opacity:.75!important}
.quick-alo-ph-img-circle{width:60px;height:60px;top:70px;left:70px;position:absolute;background:rgba(30,30,30,0.1) url("http://i.imgur.com/YWJeVO2.png") no-repeat center center;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;opacity:.7;-webkit-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;-moz-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;-ms-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;-o-animation:quick-alo-circle-img-anim 1s infinite ease-in-out;animation:quick-alo-circle-img-anim 1s infinite ease-in-out;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50%}
.quick-alo-phone.quick-alo-active .quick-alo-ph-img-circle{-webkit-animation:quick-alo-circle-img-anim 1s infinite ease-in-out!important;-moz-animation:quick-alo-circle-img-anim 1s infinite ease-in-out!important;-ms-animation:quick-alo-circle-img-anim 1s infinite ease-in-out!important;-o-animation:quick-alo-circle-img-anim 1s infinite ease-in-out!important;animation:quick-alo-circle-img-anim 1s infinite ease-in-out!important}
.quick-alo-phone.quick-alo-static .quick-alo-ph-img-circle{-webkit-animation:quick-alo-circle-img-anim 0s infinite ease-in-out!important;-moz-animation:quick-alo-circle-img-anim 0s infinite ease-in-out!important;-ms-animation:quick-alo-circle-img-anim 0s infinite ease-in-out!important;-o-animation:quick-alo-circle-img-anim 0s infinite ease-in-out!important;animation:quick-alo-circle-img-anim 0s infinite ease-in-out!important}
.quick-alo-phone.quick-alo-hover .quick-alo-ph-img-circle,.quick-alo-phone:hover .quick-alo-ph-img-circle{background-color:#19B5FE}
.quick-alo-phone.quick-alo-green.quick-alo-hover .quick-alo-ph-img-circle,.quick-alo-phone.quick-alo-green:hover .quick-alo-ph-img-circle{background-color:#75eb50;background-color:#75eb50 9}
.quick-alo-phone.quick-alo-green .quick-alo-ph-img-circle{background-color:#19B5FE;background-color:#19B5FE 9}
.quick-alo-phone.quick-alo-gray.quick-alo-hover .quick-alo-ph-img-circle,.quick-alo-phone.quick-alo-gray:hover .quick-alo-ph-img-circle{background-color:#ccc}
.quick-alo-phone.quick-alo-gray .quick-alo-ph-img-circle{background-color:#75eb50}
@-moz-keyframes quick-alo-circle-anim{
0%{-moz-transform:rotate(0) scale(.5) skew(1deg);opacity:.1;-moz-opacity:.1;-webkit-opacity:.1;-o-opacity:.1}
30%{-moz-transform:rotate(0) scale(.7) skew(1deg);opacity:.5;-moz-opacity:.5;-webkit-opacity:.5;-o-opacity:.5}
100%{-moz-transform:rotate(0) scale(1) skew(1deg);opacity:.6;-moz-opacity:.6;-webkit-opacity:.6;-o-opacity:.1}
}
@-webkit-keyframes quick-alo-circle-anim{
0%{-webkit-transform:rotate(0) scale(.5) skew(1deg);-webkit-opacity:.1}
30%{-webkit-transform:rotate(0) scale(.7) skew(1deg);-webkit-opacity:.5}
100%{-webkit-transform:rotate(0) scale(1) skew(1deg);-webkit-opacity:.1}
}
@-o-keyframes quick-alo-circle-anim{
0%{-o-transform:rotate(0) kscale(.5) skew(1deg);-o-opacity:.1}
30%{-o-transform:rotate(0) scale(.7) skew(1deg);-o-opacity:.5}
100%{-o-transform:rotate(0) scale(1) skew(1deg);-o-opacity:.1}
}
@-moz-keyframes quick-alo-circle-fill-anim{
0%{-moz-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}
50%{-moz-transform:rotate(0) -moz-scale(1) skew(1deg);opacity:.2}
100%{-moz-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}
}
@-webkit-keyframes quick-alo-circle-fill-anim{
0%{-webkit-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}
50%{-webkit-transform:rotate(0) scale(1) skew(1deg);opacity:.2}
100%{-webkit-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}
}
@-o-keyframes quick-alo-circle-fill-anim{
0%{-o-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}
50%{-o-transform:rotate(0) scale(1) skew(1deg);opacity:.2}
100%{-o-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}
}
@-moz-keyframes quick-alo-circle-img-anim{
0%{transform:rotate(0) scale(1) skew(1deg)}
10%{-moz-transform:rotate(-25deg) scale(1) skew(1deg)}
20%{-moz-transform:rotate(25deg) scale(1) skew(1deg)}
30%{-moz-transform:rotate(-25deg) scale(1) skew(1deg)}
40%{-moz-transform:rotate(25deg) scale(1) skew(1deg)}
50%{-moz-transform:rotate(0) scale(1) skew(1deg)}
100%{-moz-transform:rotate(0) scale(1) skew(1deg)}
}
@-webkit-keyframes quick-alo-circle-img-anim{
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)}
}
@-o-keyframes quick-alo-circle-img-anim{
0%{-o-transform:rotate(0) scale(1) skew(1deg)}
10%{-o-transform:rotate(-25deg) scale(1) skew(1deg)}
20%{-o-transform:rotate(25deg) scale(1) skew(1deg)}
30%{-o-transform:rotate(-25deg) scale(1) skew(1deg)}
40%{-o-transform:rotate(25deg) scale(1) skew(1deg)}
50%{-o-transform:rotate(0) scale(1) skew(1deg)}
100%{-o-transform:rotate(0) scale(1) skew(1deg)}
}
.quick-alo-phone{position:fixed;background-color:transparent;width:200px;height:200px;cursor:pointer;z-index:200000!important;-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);-webkit-transition:visibility .5s;-moz-transition:visibility .5s;-o-transition:visibility .5s;transition:visibility .5s;right:150px;top:30px}
</style>
<!-- END CSS -->
<!-- BEGIN HTML -->
<br />
<div class="quick-alo-phone quick-alo-green quick-alo-show" id="quick-alo-phoneIcon" style="right: 10px; top: 20%;">
<a href="tel:+841239738097" title="Liên hệ ngay">
</a><br />
<div class="quick-alo-ph-circle">
</div>
<a href="tel:+841239738097" title="Liên hệ ngay">
<div class="quick-alo-ph-circle-fill">
</div>
<div class="quick-alo-ph-img-circle">
</div>
</a>
</div>
<!-- END HTML -->
Tạo nút liên hệ ngay cho blogspot với hiệu ứng css3 cực đẹp
Reviewed by Phan Văn Trí ✔
on
tháng 5 15, 2017
Rating:
Reviewed by Phan Văn Trí ✔
on
tháng 5 15, 2017
Rating:
Không có nhận xét nào: