Thẻ Marquee trong CSS

HTML Marquee cung cấp một cách tiêu chuẩn để tạo văn bản cuộn, văn bản trình chiếu và văn bản liên tục, cũng như hình ảnh trên trang Web của bạn. Trong bài này, bạn sẽ tìm hiểu về Marquee, nhưng việc triển khai sẽ được thực hiện với CSS. Nếu bạn muốn thực hiện với HTML thì hãy tham khảo bài viết này: Thẻ Marquee trong HTML

Marquees là gì?

Marquee là một hiệu ứng hoạt hình cho các trang Web được sử dụng để tạo văn bản và hình ảnh cuộn ngang hoặc dọc. Phần tử <marquee> của HTML không phải là phần tử tuân thủ tiêu chuẩn, tức là phần tử không phải là một phần của đặc tả HTML W3.

Để tạo một Marquee bằng CSS, bạn phải sử dụng thuộc tính hoạt ảnh CSS cùng với quy tắc @keyframes. Bây giờ chúng ta hãy xem các biến thể của nó với việc triển khai.

Cuộn văn bản bằng CSS

Ở đây bạn phải triển khai translateX () để xác định vị trí của văn bản ở đầu hoặc cuối của hoạt ảnh. Sau đó, văn bản của bạn sẽ di chuyển giữa hai điểm được chỉ định này khi hoạt ảnh diễn ra.

Ví dụ mã CSS

.marquee {
            height: 50px;
            overflow: hidden;
            position: relative;
            background: #e4dbff;
            color: #333;
            border: 1px dashed #4a4a4a;
            margin: 5px 0;
            padding: 10px;
        }
        
.marquee p {
            position: absolute;
	    font-family: Roboto;
	    color: #0b2517;
            width: 100%;
            height: 100%;
            margin: 0;
            line-height: 50px;
            text-align: center;
            -moz-transform: translateX(100%);
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
            -moz-animation: scroll-left 2s linear infinite;
            -webkit-animation: scroll-left 2s linear infinite;
            animation: scroll-left 20s linear infinite;
        }
        
        @-moz-keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
            }
        }
        
        @-webkit-keyframes scroll-left {
            0% {
                -webkit-transform: translateX(100%);
            }
            100% {
                -webkit-transform: translateX(-100%);
            }
        }
        
        @keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
            }
        }

Chúng ta chèn mã này vào File .css  và dẫn đường tới bằng thẻ <link href="đường dẫn file css" rel="stylesheet"> hoăc chèn trong thẻ <style></style>

Chèn mã HTML

<div class="marquee">
<p> Marquee trong CSS...</p>
</div>

Kết quả

Cuộn hình ảnh bằng CSS

Để tạo hình ảnh cuộn hoặc nội dung động cho trang của bạn, bạn phải thay thế văn bản Marquee trong CSS... trong ví dụ trước bằng bất kỳ hình ảnh nào bạn chọn. Ngoài ra, bạn hãy đặt thẻ <img> trong thẻ <div>.

Ví dụ Code HTML

<div class="marquee">
<p>
<img src="https://tech.tradevn.net/wp-content/uploads/2021/07/baby-doge-gif.gif" width="44" height="40" alt="Ảnh động Baby Doge" />
</p>
</div>

Kết quả

Hiệu ứng văn bản nảy

Tính năng hoạt ảnh này của bảng điều khiển sẽ bật trở lại khi nó đến cuối từ bên trái hoặc bên phải trang của bạn.

Mã CSS

.bounce {
            height: 50px;
            overflow: hidden;
            position: relative;
            background: #e4dbff;
            color: #333;
            border: 1px dashed #4a4a4a;
            margin: 5px 0;
            padding: 10px;
        }
        
        .bounce p {
            position: absolute;
			font-family: Roboto;
	        color: #0b2517;
            width: 100%;
            height: 100%;
            margin: 0;
            line-height: 50px;
            text-align: center;
            -moz-transform: translateX(50%);
            -webkit-transform: translateX(50%);
            transform: translateX(50%);
            -moz-animation: bouncing-text 5s linear infinite alternate;
            -webkit-animation: bouncing-text 5s linear infinite alternate;
            animation: bouncing-text 10s linear infinite alternate;
        }
        
        @-moz-keyframes bouncing-text {
            0% {
                -moz-transform: translateX(50%);
            }
            100% {
                -moz-transform: translateX(-50%);
            }
        }
        
        @-webkit-keyframes bouncing-text {
            0% {
                -webkit-transform: translateX(50%);
            }
            100% {
                -webkit-transform: translateX(-50%);
            }
        }
        
        @keyframes bouncing-text {
            0% {
                -moz-transform: translateX(50%);
                -webkit-transform: translateX(50%);
                transform: translateX(50%);
            }
            100% {
                -moz-transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
            }
        }

Chúng ta chèn mã này vào File .css  và dẫn đường tới bằng thẻ <link href="đường dẫn file css" rel="stylesheet"> hoăc chèn trong thẻ <style></style>

Chèn mã HTML

<div class="bounce">
<p> Hiệu ứng nảy trong Marquee CSS... </p>
</div>

Kết quả

---

Hãy cho chúng tôi một lượt hoặc chia sẻ bài viết với bạn bè của bạn. Cảm ơn vì đã ghé thăm, hãy tiếp tục ghé thăm Tradevn.tech. Xin cám ơn!

---