使用HTML、CSS实现一个基本的文字滚动通知效果。
HTMl
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文字滚动通知</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="scroll-container"> <p class="scroll-text">这是一条滚动的通知消息...</p> </div> </body> </html>
CSS
/* styles.css */
.scroll-container {
width: 100%;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
position: relative;
}
.scroll-text {
display: inline-block;
padding-left: 100%; /* 初始时，文本完全在容器外 */
animation: scrollText 10s linear infinite;
}
@keyframes scrollText {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%); /* 移动到容器的左侧，实现滚动效果 */
}
}本文标签： css
版权声明：
本站转载作品版权归原作者及来源网站所有，原创内容作品版权归作者所有，任何内容转载、商业用途等均须联系原作者并注明来源。如果侵犯了您的权益请与我联系，我将在24小时内删除。