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
1 | <marquee>Chào mừng bạn đến với TuongAds.com!</marquee> |
Đây là kết quả
Và tiếp theo là đoạn marquee chạy từ trái qua phải
1 | <marquee direction="right"> Chúc mừng năm mới </marquee> |
Đây là kết quả
Hiệu Ứng Text Blend Mode
Trông nó như trong video
Code HTML
1 2 3 | <div class="container-ef"> <div class="text"><span>Chào mừng bạn đến với TuongAds</span></div> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | .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; } } |
Ok.
Bài viết cùng chuyên mục: