Trang chủ
CSS
HTML

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

Nặc danh
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

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

Đăng nhận xét