Hiệu ứng chữ Elastic stroke cho blogspot

Để tạo ra một blog độc đáo thì chúng ta cũng phải áp dụng những thủ thuật độc đáo, hãy thử áp dụng hiệu ứng chữ Elastic stroke cho blogspot của bạn, nó sẽ gây ấn tượng và đem lại hiểu quả đấy.

Trước đây với trình độ chưa phát triển thì chúng ta hay dùng những ảnh gift để cho vào blog, tuy nhiên với sự phát triển mạnh mẽ của HTML5 và CSS3 thì những chuyện không thể dường như đã thành có thể. Giờ đây chỉ với CSS (và JS với 1 chút nâng cao) thì đã có thể tạo ra rất nhiều hiệu ứng chữ đáng kinh ngạc.

Hướng dẫn thêm hiệu ứng chữ Elastic stroke

I.  Thêm CSS

- Vào Mẫu > Chỉnh sửa HTML và tìm tới ]]>b:skin và thêm trước nó css sau

.text--line {
  font-size: .5em;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.text-copy {
  fill: none;
  stroke: white;
  stroke-dasharray: 7% 28%;
  stroke-width: 3px;
  -webkit-animation: stroke-offset 9s infinite linear;
          animation: stroke-offset 9s infinite linear;
}
.text-copy:nth-child(1) {
  stroke: #0EF907;
  stroke-dashoffset: 7%;
}
.text-copy:nth-child(2) {
  stroke: #D61C59;
  stroke-dashoffset: 14%;
}
.text-copy:nth-child(3) {
  stroke: #E7D84B;
  stroke-dashoffset: 21%;
}
.text-copy:nth-child(4) {
  stroke: #FFF;
  stroke-dashoffset: 28%;
}
.text-copy:nth-child(5) {
  stroke: #2496EE;
  stroke-dashoffset: 35%;
}

@-webkit-keyframes stroke-offset {
  50% {
    stroke-dashoffset: 35%;
    stroke-dasharray: 0 87.5%;
  }
}

@keyframes stroke-offset {
  50% {
    stroke-dashoffset: 35%;
    stroke-dasharray: 0 87.5%;
  }
}

- Thay #0EF907, #D61C59, #E7D84B, #FFF, #2496EE; thành màu mà bạn thích.
- Thay % mà bạn muốn màu đó hiển thị nhiều hay ít.

Xem thêm: Biểu tượng cảm xúc cho bình luận blogspot

II. Tùy chỉnh hiển thị

- Chọn nơi bạn muốn thêm, chẳng hạn như trang error page (404) và thêm HTML sau

<svg viewBox="0 0 800 600">
  <symbol id="s-text">
    <text text-anchor="middle"
          x="50%"
          y="35%"
          class="text--line"
          >
      Dang
    </text>
    <text text-anchor="middle"
          x="50%"
          y="68%"
          class="text--line2"
          >
      Bui
    </text>
    
  </symbol>
  
  <g class="g-ants">
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
    <use xlink:href="#s-text"
      class="text-copy"></use>     
  </g>
  
  
</svg>

- Sửa text "Dang" "Bui" bằng text của bạn nhé.