Đã có nhiều bài hướng dẫn hiệu ứng này nhưng sử dụng scss hoặc mã php nên khi áp dụng vào blogspot gặp một chút khó khăn.
Dưới đây là phần hướng dẫn tạo Hiệu ứng chữ tuyệt đẹp chỉ với CSS + SVG cho blogspot.
Demo
DEMO
Để áp dụng hiệu ứng chữ với CSS+SVG cần thực hiện qua 2 bước.
Bước 1: Thêm css vào blogspot(bước này đơn giản nên không hướng dẫn)
svg {
display:block;
font:6.5em "Montserrat";
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: #4D163D;
animation-delay: -1;
}
.text-copy:nth-child(2) { stroke: #BD0034;
animation-delay: -2s;
}
.text-copy:nth-child(3) { stroke: #fff;
animation-delay: -3s;
}
.text-copy:nth-child(4) { stroke: #fff;
animation-delay: -4s;
}
.text-copy:nth-child(5) { stroke: #FDB731;
animation-delay: -5s; }
@keyframes stroke-offset {
100% {stroke-dashoffset: -35%;} }
Bạn có thể thay đổi mã màu và kích thước phông chữ cũng như phông chữ để có được kiểu chữ hợp lý và vừa ý.
Bước 2: Thêm mã SVG
Vào trong chỉnh sửa mẫu thêm mã bên dưới vào vị trí bạn muốn hiển thị(Thay chữ Thủ thuật blogspot thành chữ của bạn) và nên để nó tại vị trí có nền tối hoặc tự tạo nền màu tối thông qua css.
<svg viewBox='0 0 960 180'>
<symbol id='s-text'><text text-anchor='middle' x='50%' y='80%'>Thủ thuật blogspot</text></symbol>
<g class='g-ants'>
<use class='text-copy' xlink:href='#s-text'/>
<use class='text-copy' xlink:href='#s-text'/>
<use class='text-copy' xlink:href='#s-text'/>
<use class='text-copy' xlink:href='#s-text'/>
<use class='text-copy' xlink:href='#s-text'/>
</g>
</svg>
Chúc bạn thành công.