Tạo hiệu ứng animated heart trái tim đập cho blogspot

Hôm nay mình xin giới thiệu đến các bạn một mẹo khác hay dùng để làm đẹp phần footer copyright của một trang blog. Các bạn xem demo tại phía dưới cùng blog của mình, nếu thích thì làm theo các bước sau đây nhé.

Code:

https://totnhatvina.com

Bước 1:
Đầu tiên đặt code bên dưới vào phía trên thẻ

Code:

]]></b:skin>

của template

Code:

.animated{-webkit-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;-o-animation-iteration-count:infinite;animation-iteration-count:infinite}.bounceIn{-webkit-animation-name:a;-o-animation-name:a;animation-name:a}.bounceInDown{-webkit-animation-name:b;-o-animation-name:b;animation-name:b}.pulse{-webkit-animation-name:c;-o-animation-name:c;animation-name:c}@-webkit-keyframes a{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@-o-keyframes a{0%,20%,40%,60%,80%,to{-o-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}to{opacity:1;transform:scaleX(1)}}@keyframes a{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);-o-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@-webkit-keyframes b{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(215,610,355,1);animation-timing-function:cubic-bezier(215,610,355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;transform:none}}@-o-keyframes b{0%,60%,75%,90%,to{-o-animation-timing-function:cubic-bezier(215,610,355,1);animation-timing-function:cubic-bezier(215,610,355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{-o-transform:none;transform:none}}@keyframes b{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(215,610,355,1);-o-animation-timing-function:cubic-bezier(215,610,355,1);animation-timing-function:cubic-bezier(215,610,355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:none;-o-transform:none;transform:none}}@-webkit-keyframes c{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.2,1.2,1.2);transform:scale3d(1.2,1.2,1.2)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@-o-keyframes c{0%{transform:scaleX(1)}50%{transform:scale3d(1.2,1.2,1.2)}to{transform:scaleX(1)}}@keyframes c{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.2,1.2,1.2);transform:scale3d(1.2,1.2,1.2)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@-webkit-keyframes d{0%{opacity:0;-webkit-transform:translate(-50%,6px);transform:translate(-50%,6px)}to{opacity:1;-webkit-transform:translate(-50%);transform:translate(-50%)}}@-o-keyframes d{0%{opacity:0;-o-transform:translate(-50%,6px);transform:translate(-50%,6px)}to{opacity:1;-o-transform:translate(-50%);transform:translate(-50%)}}@keyframes d{0%{opacity:0;-webkit-transform:translate(-50%,6px);-o-transform:translate(-50%,6px);transform:translate(-50%,6px)}to{opacity:1;-webkit-transform:translate(-50%);-o-transform:translate(-50%);transform:translate(-50%)}}@-webkit-keyframes e{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}40%{-webkit-transform:translateX(0);transform:translateX(0)}60%{-webkit-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(100%);transform:translateX(100%)}}@-o-keyframes e{0%{-o-transform:translateX(-100%);transform:translateX(-100%)}40%{-o-transform:translateX(0);transform:translateX(0)}60%{-o-transform:translateX(0);transform:translateX(0)}to{-o-transform:translateX(100%);transform:translateX(100%)}}@keyframes e{0%{-webkit-transform:translateX(-100%);-o-transform:translateX(-100%);transform:translateX(-100%)}40%{-webkit-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}60%{-webkit-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}to{-webkit-transform:translateX(100%);-o-transform:translateX(100%);transform:translateX(100%)}}

Bước 2:
Các bạn đặt code ở bước này tại vị trí bạn muốn hiển thị trái tim đập nhé, thông thường nó sẽ đặt ở dòng footer copyright của 1 trang blog. Footer copyright của Cộng đồng Designer Việt Nam là: Cộng đồng Designer Việt Nam™ © 2012 - 2017.
Các bạn tùy biến thêm Cộng đồng Designer Việt Nam™ © 2012 - 2017. Made with in <code hiện trái tim> Hanoi.

Code:

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

Chúc các bạn thành công và có một blog đẹp.