CSS cho text chỉ 1 dòng và đưa chuột vào thì scroll chạy từ phải qua trái
Trong UIKit, bạn có thể sử dụng CSS và JavaScript để tạo hiệu ứng văn bản chạy từ phải qua trái khi đưa chuột vào. Dưới đây là cách thực hiện:
1. HTML Structure#
`
2. CSS Styling#
` .scroll-container { position: relative; overflow: hidden; width: 300px; /* Chiều rộng container / height: 40px; / Chiều cao container / line-height: 40px; / Căn chỉnh văn bản theo chiều cao / border: 1px solid #ddd; / Tùy chỉnh border nếu cần / background-color: #f9f9f9; / Tùy chỉnh màu nền / white-space: nowrap; / Không cho text xuống dòng */ }
.scroll-text { display: inline-block; position: absolute; transform: translateX(100%); /* Đặt text nằm ngoài container / transition: transform 5s linear; / Tốc độ chạy */ will-change: transform; }
.scroll-container:hover .scroll-text { transform: translateX(-100%); /* Di chuyển từ phải qua trái */ } `
3. Tích hợp UIKit#
Bạn có thể sử dụng class từ UIKit cho việc căn chỉnh và thiết kế tổng thể:
`
4. Thay đổi tốc độ (Tùy chọn)#
Nếu bạn muốn điều chỉnh tốc độ chạy, chỉ cần thay đổi giá trị transition: transform 5s linear trong CSS.
5. Kết quả#
Văn bản sẽ được hiển thị một dòng cố định trong container.
Khi bạn đưa chuột vào, văn bản sẽ cuộn từ phải sang trái.
Bạn có thể thử và tùy chỉnh để phù hợp với thiết kế của mình! 😊