Chữ với hiệu ứng đẹp bằng CSS

Tết Pro tháng 2 08, 2020

Bài viết sau mình hướng dẫn anh em cách tạo chữ với hiệu ứng đẹp mắt có thể áp dụng để trang trí blog
Mình sẽ để code ví dụ và anh em tham khảo và cùng nhau trao đổi nhé

Code

HTML

<svg viewBox="0 0 100 18" style="width: 100%;height: 100%;">
    <text text-anchor="middle" dominant-baseline="central" x="50%" y="50%" textLength="100%">HUYCÒVIP</text>
</svg>

CSS

    text{
        animation: 5s strokefill infinite alternate;
    }
    
    @keyframes strokefill {
        0% {
            stroke: rgba(0, 0, 0, 1);
            fill: rgba(0, 0, 0, 0);
            stroke-dashoffset: 25%;
            stroke-dasharray: 00% 50%;
            stroke-width: 1.0;
        }
        70% {
            fill: rgba(0, 0, 0, 0);
        }
        80% {
            stroke: rgba(0, 0, 0, 1);
        }
        100% {
            stroke: rgba(0, 0, 0, 0);
            fill: rgba(0, 0, 0, 1);
            stroke-dashoffset: -25%;
            stroke-dasharray: 50% 00%;
            stroke-width: 0.0;
        }
    }

Demo

Nếu anh em có hiệu ứng nào đẹp nữa cùng đóng góp nhé