使用HTML、CSS实现一个基本的文字滚动通知效果。
<!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>
/* 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%); /* 移动到容器的左侧，实现滚动效果 */
}
}