Code nhịp đập trái tim cho blogspot-Code red heart beats

Code nhịp đập trái tim cho blogspot-Code red heart beats
Nhiều bạn có nhu cầu trang trí blogspot của mình cho thêm phần sinh động, với nhiều kiểu trang trí như tạo hình nền,hiệu ứng loading khi vào blog hay nhạc nền blog vân và vân...
Bài này chia sẻ cách tạo trái tim thổn thức à chính xác là tạo nhịp đập trái tim chỉ bằng CSS.
Với blogspot không sử dụng Font Awesome icon thì ta dùng hình ảnh trái tim còn blogspot đang sử dụng Font Awesome icon thì ta dùng ngay icon trái tim của font này cho đơn giản gọn nhẹ.
Code chỉ thuần css nên hầu như không ảnh hưởng gì tới tốc độ load của blog.
Sau đây là phần hướng dẫn tạo nhịp đập trái tim-red heart beats.

DEMO

I Trái tim đập YOU

Để thực hiện thủ thuật này bạn cần tiến hàn các bước sau đây.

Thêm trái tim thổn thức cho blogspot

Bước 1

Thêm đoạn css sau vào trước thẻ ]]></b:skin>

.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
@-webkit-keyframes pulse{from{-webkit-transform:scale3d(0.068,0.068,0.068);transform:scale3d(0.068,0.068,0.068)}50%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
to{-webkit-transform:scale3d(0.068,0.068,0.068);transform:scale3d(0.068,0.068,0.068)}}
@keyframes pulse{from{-webkit-transform:scale3d(0.068,0.068,0.068);transform:scale3d(0.068,0.068,0.068)}50%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
to{-webkit-transform:scale3d(0.068,0.068,0.068);transform:scale3d(0.068,0.068,0.068)}}
.pulse{-webkit-animation-name:pulse;animation-name:pulse}

Bước 2

Thêm trái tim vào vị trí bạn muốn

<img class='animated infinite pulse' alt="Trái tim đập" height="@@@" src="Thay link ảnh trái tim vào đây" width="@@@" />

Với các blogspot đang sử dụng Font Awesome icon thì bước này bạn dùng code:

<i class='fa fa-heart animated infinite pulse' style='color:red'></i>

Giải thích các thông số

+ Trong phần CSS

-webkit-animation-duration:1s;animation-duration:1s: Trong đó 1s là tốc độ đập của trái tim.Trị số càng lớn đập càng chậm.

- 0.068,0.068,0.068: là trị số thu nhỏ của trái tim trị số càng nhỏ trái tim thu lại càng nhỏ trước khi nở ra.

- transform:scale3d(1,1,1): Trong đó 1 là nở ra bằng kích thước ban đầu nếu trị số lờn hơn 1 thì trái tim nở ra lớn hơn kích thước ban đầu.

+Phần hình ảnh

- height="@@@" và weight="@@@": là kích thước trái tim.

- style='color:red': Màu trái tim.


Nhận xét

6 nhận xét :

  1. Ồ, trái tim thổn thức đấy nhé! :)

    Càng đập càng sống
    Không đập thì chết
    Đập quá cũng... chết luôn!
    Hì hì hì...
    :))

    Trả lờiXóa
  2. Ồ cái này phù hợp với tuổi TEEN đấy nhỉ.

    Trả lờiXóa
  3. Gõ blog.doisong24.com (nghĩa là bỏ www) thì không vô được đó bạn. Mà subdomain thì Blogger đâu ép phải có www đâu bạn :D

    Trả lờiXóa