Hướng dẫn cách tạo chữ với hiệu ứng tuyệt đẹp cho blogspot

Hướng dẫn cách tạo chữ với hiệu ứng tuyệt đẹp cho blogspot

Hướng dẫn cách tạo chữ với hiệu ứng tuyệt đẹp cho blogspot

Mấy hôm nay rảnh nên ra bài nhiều cho mọi người đều là mình sưu tầm trên google về chỉnh sửa lại và chia sẽ cho mọi người cùng sữ dụng !!! ...
Lê Bá Long Tác giả:
Xuất bản: 7/21/2018
Mấy hôm nay rảnh nên ra bài nhiều cho mọi người đều là mình sưu tầm trên google về chỉnh sửa lại và chia sẽ cho mọi người cùng sữ dụng !!!

CÁCH SỬ DỤNG:

Bước 1: Các bạn dán toàn bộ code bên dưới vào ]]></b:skin>
svg { display: block; font: 100px 'Roboto condensed'; width: auto; max-width:600PX; height: auto; margin: 0 auto; }
.text-copy { fill: none; stroke: white; stroke-dasharray: 6% 29%; stroke-width: 5px; stroke-dashoffset: 0%; animation: stroke-offset 5.5s infinite linear; }
.text-copy:nth-child(1) { stroke: #6699FF; animation-delay: -1; }
.text-copy:nth-child(2) { stroke: #6699FF; animation-delay: -2s; }
.text-copy:nth-child(3) { stroke: #0099FF; animation-delay: -3s; }
.text-copy:nth-child(4) { stroke: #0099FF; animation-delay: -4s;}
.text-copy:nth-child(5) { stroke: #FF99FF; animation-delay: -5s; }
@keyframes stroke-offset { 100% {stroke-dashoffset: -35%;} }
.cloud { padding:0; }
.cloud li {
    list-style: none;
    display: inline;
}
.cloud li>a { color :gray; }
.cloud li>a:hover { color : white; }
.cloud li:nth-of-type(3n + 1) {
    font-size: 1.25em;
}
.cloud li:nth-of-type(4n+3) {
    font-size: 1.5em;
}
.cloud li:nth-of-type(5n - 3) {
    font-size: 1em;
}
Bước 2. Chèn toàn bộ HTML sau vào nới bạn muốn:
<svg viewbox="0 0 960 180">
<symbol id="s-text"><text text-anchor="middle" x="50%" y="80%">LÊ BÁ LONG IT</text></symbol>
<g class="g-ants">
<use class="text-copy" xlink:href="#s-text" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
<use class="text-copy" xlink:href="#s-text" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
<use class="text-copy" xlink:href="#s-text" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
<use class="text-copy" xlink:href="#s-text" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
<use class="text-copy" xlink:href="#s-text" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</g>
</svg>

LỜI KẾT

Nếu có thắc mắc hoặc góp ý cmt ngay bên dưới nhé !!! Cảm ơn đã đọc <3
Hướng dẫn cách tạo chữ với hiệu ứng tuyệt đẹp cho blogspot Hướng dẫn cách tạo chữ với hiệu ứng tuyệt đẹp cho blogspotLê Bá Long8.8stars based on9reviewsMấy hôm nay rảnh nên ra bài nhiều cho mọi người đều là mình sưu tầm trên google về chỉnh sửa lại và chia sẽ cho mọi người cùng sữ dụng !!! ...

Blogger Comments

Hiện tại có 30 nhận xét:

  1. Tôi là một nhân viên tư nhân cũng như một blogger
    Nam said : Hahah !!! =)

    Trả lờiXóa
  2. đổi temp đi , Thèn Đức share tùm lum nát bét r , admin Quang Thìn phải sài theme chất chứ :)

    Trả lờiXóa
  3. sáng má cho năm ngàn chiều má cho năm ngàn nữa là mười ngàn

    Trả lờiXóa
  4. nay anh long vào temp ò ó o r :V cơ mà cho em css phần popular post với

    Trả lờiXóa
    Trả lời
    1. /* Popular Posts */
      .PopularPosts .widget-content ul, .PopularPosts .widget-content ul li, .PopularPosts .widget-content ul li img, .PopularPosts .widget-content ul li a, .PopularPosts .widget-content ul li a img {
      margin:0 0;
      padding:0 0;
      list-style:none;
      border:none;
      outline:none;
      }
      .PopularPosts .widget-content ul {
      margin: 0;
      list-style:none;
      counter-reset:num;
      border-left:1px solid #efefef;
      border-right:1px solid #efefef;
      }
      .PopularPosts .widget-content ul li img {
      display: block;
      width: 70px;
      height: 70px;
      float: left;
      }
      .PopularPosts .widget-content ul li {
      margin: 0 0 0 0 !important;
      counter-increment: num;
      position: relative;
      border-top:1px solid #efefef;
      padding: 8px 10px;
      }
      .PopularPosts ul li:last-child {
      border-bottom:1px solid #efefef;
      }
      .PopularPosts li:nth-child(odd) {
      background: #efefef;
      }
      .PopularPosts li:nth-child(even) {
      background: #f8f8f8;
      }
      .PopularPosts ul li .item-title a, .PopularPosts ul li a {
      font-weight: 500;
      text-decoration: none;
      color: $(link.hover.color);
      }
      .PopularPosts ul li .item-title a:hover, .PopularPosts ul li a:hover {
      color: $(link.color);
      }
      .PopularPosts .item-title {
      line-height: 1.6;
      }
      .PopularPosts .item-thumbnail {
      float: left;
      margin: 3px 8px 0 0;
      }
      .PopularPosts .item-snippet {
      line-height: 1.7em;
      color: #888;
      font-size: 14px;
      }

      Xóa
  5. :v anh thay domain cài domain cũ là chuyển hướng cho dễ tìm
    em đã sửa lại liên kết nhá

    Trả lờiXóa
  6. bay đâu widget liên kết rồi

    Trả lờiXóa
  7. [img]https://3.bp.blogspot.com/-sV9EYO1St7g/WwD_vjqI76I/AAAAAAAAGFY/YOk01CU4TDQ24sTFCPBYdJKCXzAWcxOhQCLcBGAs/w280-h180-p-k-no-nu/activation.jpg[/img]

    Trả lờiXóa