This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Friday, 25 August 2017

[Blogger] Thêm hiệu ứng trái tim đập loạn nhịp cho blogspot


Hiệu ứng này khá hay và đẹp mắt khi có thêm css3, bạn có thể thấy nó ngay dưới phần chân trang của tôi. Hiệu ứng chỉ gồm html và css vì thế hoàn toàn không ảnh hưởng tới tốc độ tải trang của bạn. Ok giờ hãy tiến hành ngay thôi

Trước tiên hãy đảm bảo blog của bạn đã nhúng font awesome Nếu chưa có bạn hãy thêm đoạn code sau vào trước thẻ </head>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

Tiếp theo bạn đặt đoạn code HTML này vào bất cứ vị trí nào bạn muốn trái tim xuất hiện

<i class='pulse fa fa-heart fa-lg' style='color:#FF0000;font-size: 1.5em'/>

Có thể thay đổi giá trị font-size cho phù hợp với font chữ trên website của bạn
Cuối cùng là thêm css3 bằng cách dán đoạn code sau trước thẻ đóng </body>

<style type='text/css'>
.pulse{-webkit-animation:pulse .8s linear infinite;-moz-animation:pulse .8s linear infinite;-ms-animation:pulse .8s linear infinite;animation:pulse .8s linear infinite}
@keyframes "pulse"{0%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}
@-moz-keyframes pulse{0%{-moz-transform:scale(1);transform:scale(1)}50%{-moz-transform:scale(0.8);transform:scale(0.8)}100%{-moz-transform:scale(1);transform:scale(1)}}
@-webkit-keyframes "pulse"{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1);transform:scale(1)}}
@-ms-keyframes "pulse"{0%{-ms-transform:scale(1);transform:scale(1)}50%{-ms-transform:scale(0.8);transform:scale(0.8)}100%{-ms-transform:scale(1);transform:scale(1)}}
</style>

Lưu template lại và xem kết quả !

Bạn có thể xem live tại đây
 DEMO
Good Luck !
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Hưng Hoàng 9/17/2017 11:57:00 AM
    Demo code HTML/JavaScript
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type='text/javascript'>
    alert("Welcome to https://hung1001nd.blogspot.com !");
    </script>
    </head>
    <body></body>
    </html>
    Please wait while i am loading Facebook SDK js