Tạo trái tim với hiệu ứng đập bằng CSS cho Blogspot

tao trai tim voi hieu ung dap bang css cho blogspot

Đây là một thủ thuật khá thú vị mà mình sẽ giới thiệu tới các bạn, đó là tạo trái tim với hiệu ứng đập liên hồi tạo cảm giác sinh động và rất phù hợp với việc trang trí cho trang của bạn trở nên thu hút hơn.

Bên cạnh đó, thủ thuật này chỉ sử dụng CSS kết hợp với việc sử dụng Font Awesome Icons mà không cần sử dụng Javascript nên tốc độ tải trang của bạn sẽ không bị ảnh hưởng nhiều.

Bạn hãy xem DEMO ở bên dưới để xem thủ thuật này hoạt động như thế nào nhé!



Bây giờ, chúng ta cùng bắt đầu thực hiện nào.

Tạo trái tim đập bằng CSS và Font Awesome Icons

Bước 1. Đăng nhập tài khoản Blogger > Chủ đề > Chỉnh sửa HTML.

Bước 2. Sao chép đoạn mã CSS dưới đây và dán vào trước thẻ đóng ]]></b:skin>, sau đó nhấn vào nút Lưu chủ đề.

.animation-heart {color:#dd2200; font-size:100px;-webkit-animation-duration:1.69s; animation-duration:1.69s; -webkit-animation-fill-mode:both; animation-fill-mode:both}
.animation-heart.infinite {-webkit-animation-iteration-count:infinite; animation-iteration-count:infinite}
@-webkit-keyframes pulse {from{-webkit-transform:scale3d(0.069,0.069,0.069); transform:scale3d(0.069,0.069,0.069)}50%{-webkit-transform:scale3d(1.69,1.69,1.69); transform:scale3d(1.69,1.69,1.69)}
to{-webkit-transform:scale3d(0.069,0.069,0.069); transform:scale3d(0.069,0.069,0.069)}}
@keyframes pulse{from{-webkit-transform:scale3d(0.069,0.069,0.069); transform:scale3d(0.069,0.069,0.069)}50%{-webkit-transform:scale3d(1.69,1.69,1.69); transform:scale3d(1.69,1.69,1.69)}
to{-webkit-transform:scale3d(0.069,0.069,0.069);transform:scale3d(0.069,0.069,0.069)}}
.animation-pulse {-webkit-animation-name:pulse; animation-name:pulse}

Trong đoạn mã trên, bạn cần chú ý tới một số điểm sau:

  • 1.69s là tốc độ nhịp đập của trái tim.
  • (0.069,0.069,0.069) là kích thước thu nhỏ của trái tim khi đập so với kích thước chuẩn.
  • (1.69,1.69,1.69) là kích thước phóng to của trái tim khi đập so với kích thước chuẩn.

Bước 3. Bạn hãy thêm đoạn mã dưới đây vào trước thẻ đóng </head> (nếu có rồi thì bạn có thể bỏ qua bước này).

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Cuối cùng, bạn hãy đặt đoạn mã HTML hiển thị dưới đây vào vị trí mà bạn mong muốn.

<i class='fa fa-heart animation-heart infinite animation-pulse'></i>

Bây giờ, bạn đã tạo được trái tim với hiệu ứng đập rất đẹp rồi đó.

Chúc bạn thành công!