Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

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

Chủ đề thuộc danh mục 'Hướng dẫn/Thủ thuật Blogspot tại đây' được đăng bởi Lam Anh Nguyen, 12/8/17.

Lượt xem: 1,665

  1. 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
    [​IMG]

    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.

    overlord-tiengviet blog thích bài viết này

Ủng hộ diễn đàn