Hướng dẫn tạo intro hiệu ứng hover đẹp mắt trên Blogspot

- Xin chào các bạn, hôm này mình sẽ đăng bài về thủ thuật blog để hướng dẫn các bạn cách thêm intro hiệu ứng hover đẹp , hiệu ứng này mình lấy từ codepen.io và chia sẻ lại cho các bạn nên bạn nào có copy code ghi nguồn codepen.io nhé.

Hướng dẫn cách làm

- Bạn cho toàn bộ code sau vào nơi cần đặt intro hoặc chữ , thường là dưới menu hoặc footer.
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<style class="cp-pen-styles">.center {
  display: flex;
  width: 100vw;
  height: 40vh;
  background-color: black;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.center__text {
  margin: auto;
  font-family: 'Montserrat', sans-serif;
  font-size: 120px;
  text-transform: uppercase;
}
.glitch {
  position: relative;
  color: white;
  mix-blend-mode: lighten;
}
.glitch:before, .glitch:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  width: 100%;
  background: black;
  clip: rect(0, 0, 0, 0);
}
.glitch:before {
  left: -1px;
  text-shadow: 1px 0 rgba(255, 0, 0, 0.7);
}
.glitch:after {
  left: 1px;
  text-shadow: -1px 0 rgba(0, 0, 255, 0.7);
}
.glitch:hover:before {
  text-shadow: 4px 0 rgba(255, 0, 0, 0.7);
  animation: glitch-loop-1 0.8s infinite ease-in-out alternate-reverse;
}
.glitch:hover:after {
  text-shadow: -5px 0 rgba(0, 0, 255, 0.7);
  animation: glitch-loop-2 0.8s infinite ease-in-out alternate-reverse;
}
@-webkit-keyframes glitch-loop-1 {
  0% {
    clip: rect(36px, 9999px, 9px, 0);
  }
  25% {
    clip: rect(25px, 9999px, 99px, 0);
  }
  50% {
    clip: rect(50px, 9999px, 102px, 0);
  }
  75% {
    clip: rect(30px, 9999px, 92px, 0);
  }
  100% {
    clip: rect(91px, 9999px, 98px, 0);
  }
}
@keyframes glitch-loop-1 {
  0% {
    clip: rect(36px, 9999px, 9px, 0);
  }
  25% {
    clip: rect(25px, 9999px, 99px, 0);
  }
  50% {
    clip: rect(50px, 9999px, 102px, 0);
  }
  75% {
    clip: rect(30px, 9999px, 92px, 0);
  }
  100% {
    clip: rect(91px, 9999px, 98px, 0);
  }
}
@-webkit-keyframes glitch-loop-2 {
  0% {
    top: -1px;
    left: 1px;
    clip: rect(65px, 9999px, 119px, 0);
  }
  25% {
    top: -6px;
    left: 4px;
    clip: rect(79px, 9999px, 19px, 0);
  }
  50% {
    top: -3px;
    left: 2px;
    clip: rect(68px, 9999px, 11px, 0);
  }
  75% {
    top: 0px;
    left: -4px;
    clip: rect(95px, 9999px, 53px, 0);
  }
  100% {
    top: -1px;
    left: -1px;
    clip: rect(31px, 9999px, 149px, 0);
  }
}
@keyframes glitch-loop-2 {
  0% {
    top: -1px;
    left: 1px;
    clip: rect(65px, 9999px, 119px, 0);
  }
  25% {
    top: -6px;
    left: 4px;
    clip: rect(79px, 9999px, 19px, 0);
  }
  50% {
    top: -3px;
    left: 2px;
    clip: rect(68px, 9999px, 11px, 0);
  }
  75% {
    top: 0px;
    left: -4px;
    clip: rect(95px, 9999px, 53px, 0);
  }
  100% {
    top: -1px;
    left: -1px;
    clip: rect(31px, 9999px, 149px, 0);
  }
}
</style>
<div class="center">
  <h1 class="center__text glitch is-glitching" data-text="Star Nhân IT">Star Nhân IT</h1>

  </div></b:if>
Vậy là xong, chúc các bạn thành công ! 

Nhận xét

  1. https://nguyenthimytram.blogspot.com/
    - Đã đặt cho anh
    - tên NTMT Blog
    Mô tả : NTMT Blog

    Trả lờiXóa
  2. [Img]https://i.imgur.com/VBqr8Ok.jpg[/img]

    Trả lờiXóa
    Trả lời
    1. [img]https://4.bp.blogspot.com/-IwGmHLGHXvE/WxZtSZW2fVI/AAAAAAAAPrQ/PV4mRowGkeoVTG9YPHE3OnHOjXei-eaCQCK4BGAYYCw/s1600/thumbnail.png[/img]

      Xóa
  3. Edit temp nào đẹp đẹp chuẩn chuẩn share cho ae sài vs ông. :v

    Trả lờiXóa
  4. đẹp quá.hóng share temp hehe

    Trả lờiXóa
  5. Theme đẹp. Hóng share template

    Trả lờiXóa
  6. temps giống của Hồng Hải Blog quá

    Trả lờiXóa
  7. template hồng hải send hay rip vậy, cái intro đẹp veler

    Trả lờiXóa
  8. chèn ảnh nền phía sau thì làm sao anh ơi k muốn màu đen mà cái ảnh phía sau cho đẹp thì làm sao hả anh

    Trả lờiXóa

Đăng nhận xét

Bình luận sao cho dễ thương xíu nhé :3