Code Hiệu ứng Chuyển động Cho Chữ (Text Animation) - TuongAds

Trang chủ » Hiệu ứng Chữ Trong Html » Code Hiệu ứng Chuyển động Cho Chữ (Text Animation) - TuongAds

Có thể bạn quan tâm

Dưới đây là một số đoạn code HTML, CSS hiệu ứng chuyển động cho chữ (tiếng Anh là Text Animation) rất đẹp và thường được dùng khi làm website.

Marquee trong HTML

Cách dùng như sau

<marquee>Chào mừng bạn đến với TuongAds.com!</marquee>
1<marquee>ChàomừngbạnđếnvớiTuongAds.com!</marquee>

Đây là kết quảChào mừng bạn đến với TuongAds.com!

Và tiếp theo là đoạn marquee chạy từ trái qua phải

<marquee direction="right"> Chúc mừng năm mới </marquee>
1<marquee direction="right">Chúcmừngnămmới</marquee>

Đây là kết quảChúc mừng năm mới

Hiệu Ứng Text Blend Mode

Trông nó như trong video

Code HTML

<div class="container-ef"> <div class="text"><span>Chào mừng bạn đến với TuongAds</span></div> </div>
123<div class="container-ef"><div class="text"><span>ChàomừngbạnđếnvớiTuongAds</span></div></div>

CSS

.container-ef{ display: flex; justify-content: center; max-width:1200px; height: 350px; margin: 0 auto; align-items: center; } .text{ position: relative; font-size: 2em; background: #fff; color: #000; text-transform: uppercase; letter-spacing: .3em; font-weight: bold; padding: 5px; } .text span{ color: #fff; mix-blend-mode: difference; } .text:before{ content:""; position: absolute; top:0; width:60px; height: 100%; background: #000; animation: thangcover 4s linear infinite; } @keyframes thangcover { 0%{ left: 0; } 50%{ left: calc( 100% - 60px); } 100%{ left:0; } }
123456789101112131415161718192021222324252627282930313233343536373839404142.container-ef{display:flex;justify-content:center;max-width:1200px;height:350px;margin:0auto;align-items:center;}.text{position:relative;font-size:2em;background:#fff;color:#000;text-transform:uppercase;letter-spacing:.3em;font-weight:bold;padding:5px;}.text span{color:#fff;mix-blend-mode:difference;}.text:before{content:"";position:absolute;top:0;width:60px;height:100%;background:#000;animation:thangcover4slinear infinite;}@keyframesthangcover{0%{left:0;}50%{left:calc(100%-60px);}100%{left:0;}}

Ok.

Từ khóa » Hiệu ứng Chữ Trong Html