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 YOU

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

Code 1

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.

Code 2

Bước 1

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

.heart{
  width: 60px;
  height: 60px;
  background-color:#CD0000;
  position: relative;
  animation:beat .6s infinite ease-in;
}
.heart:before, .heart:after{
  content:"";
  position: absolute;
  width: 60px; height: 60px;
  background-color: #CD0000;
  border-radius: 50%;
}
.heart:before{
  left: 30px;
}

.heart:after{
  top: -30px;
}

@keyframes beat{
  0%{
    transform:scale(1) rotate(-45deg);
  }
  
  40%{
    transform:scale(1) rotate(-45deg);
  }
  
  55%{
    transform:scale(1.3) rotate(-30deg);
  }
  
  70%{
    transform:scale(1) rotate(-45deg);
  }
  
  85%{
    transform:scale(1.3) rotate(-60deg);
  }
  
  100%{
    transform:scale(1) rotate(-45deg);
  }
}

Bước 2
Đặt đoạn HTML vào nơi muốn hiển thị trái tim

<div class="heart"></div>

Code 3: Code nhịp đập trái tim cho blogspot sử dụng SVG
Bước 1: Thêm css vào trong mẫu

.heart-svg {width: 200px; height: 200px}

.trjm-svg {
  animation: pop 1s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes pop {
  0%{
    transform: scale(.1)
  }
  50% {
    transform: scale(1)
  }
  100% {
    transform: scale(.1)
  }
}

Bước 2:Đặt HTML sau vào trong mẫu tại vị trí cần hiển thị

<div class='heart-svg trjm-svg'>
<svg viewBox="0 0 50 50">
<path style="fill:#C03A2B;" d="M24.85,10.126c2.018-4.783,6.628-8.125,11.99-8.125c7.223,0,12.425,6.179,13.079,13.543
 c0,0,0.353,1.828-0.424,5.119c-1.058,4.482-3.545,8.464-6.898,11.503L24.85,48L7.402,32.165c-3.353-3.038-5.84-7.021-6.898-11.503
 c-0.777-3.291-0.424-5.119-0.424-5.119C0.734,8.179,5.936,2,13.159,2C18.522,2,22.832,5.343,24.85,10.126z"/>
<path style="fill:#ED7161;" d="M6,18.078c-0.553,0-1-0.447-1-1c0-5.514,4.486-10,10-10c0.553,0,1,0.447,1,1s-0.447,1-1,1
 c-4.411,0-8,3.589-8,8C7,17.631,6.553,18.078,6,18.078z"/>
</svg>
</div>

Trong đó:
#C03A2B
#ED7161
là màu trái tim