Demo:
Được làm bằng:
HTML / CSS / Javascript
Về mã:
Đây là một hiệu ứng văn bản động tuyệt đẹp được tạo bằng SVG.
Trình duyệt tương thích: Chrome, Edge, Firefox, Opera, Safari
Cách thực hiện
1- Thêm csssvg { width: 100%; height: auto; } /* Tekststijl: vul met patroon, en gebruik dikkere stroke */ text { fill:#fff ; font-family: "Protest Guerrilla", sans-serif; font-size: 70px; letter-spacing: 5px; stroke: red; stroke-width: 3px; stroke-dasharray: 500; stroke-dashoffset: 500; filter: url(#glowFilter); /* Voeg gloedfilter toe */ } <link href="https://fonts.googleapis.com/css2?family=Protest+Guerrilla&display=swap" rel="stylesheet"/>
<script>/*<![CDATA[*/ // js is for the animation loop for the strokes const textElement = document.getElementById("animatedText"); function restartAnimation() { textElement.style.transition = "none"; textElement.style.strokeDashoffset = "0"; setTimeout(() => { textElement.style.transition = "stroke-dashoffset 3s ease"; textElement.style.strokeDashoffset = "1000"; }, 50); } // Start de animatie direct en in een loop restartAnimation(); setInterval(restartAnimation, 10000); /*]]>*/</script>
<svg viewBox="0 0 800 200"> <!-- Definieer een patroon voor de tekst --> <defs> <!-- Definieer gloedfilter --> <filter id="glowFilter" x="-50%" y="-50%" width="200%" height="200%"> <feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blurred" /> <feOffset in="blurred" dx="0" dy="0" result="offsetBlurred" /> <feFlood flood-color="cyan" result="glowColor" /> <feComposite in="glowColor" in2="offsetBlurred" operator="in" /> <feMerge> <feMergeNode /> <feMergeNode in="SourceGraphic" /> </feMerge> </filter> </defs> <!-- Tekst waarop het patroon en de gloed worden toegepast --> <text id="animatedText" x="50" y="150">THỦ THUẬT BLOGSPOT</text> </svg>