-->

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

Chia sẻ:

8.2.20 | 0 nhận xét | lượt xem

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;
        }
    }