Cách tạo chữ với hiệu ứng tuyệt đẹp cho blogger

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 !!!

DEMO

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