2024-07-15 16:58:47 +08:00
|
|
|
|
.scrolling-ad-container {
|
|
|
|
|
|
overflow: hidden; /* 隐藏超出盒子的部分 */
|
|
|
|
|
|
white-space: nowrap; /* 内容不换行 */
|
|
|
|
|
|
position: relative; /* 使子元素的动画定位参考于此 */
|
|
|
|
|
|
padding: 10px; /* 内容内边距 */
|
|
|
|
|
|
width: 100%; /* 盒子的宽度 */
|
|
|
|
|
|
height: 30px; /* 盒子的高度 */
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center; /* 垂直居中对齐文字 */
|
|
|
|
|
|
box-sizing: border-box; /* 包含内边距和边框 */
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.scrolling-ad-content {
|
2024-07-22 10:46:25 +08:00
|
|
|
|
font-size: 16px;
|
2024-07-15 16:58:47 +08:00
|
|
|
|
display: inline-block;
|
|
|
|
|
|
padding-left: 100%; /* 确保广告从盒子外开始滚动 */
|
2024-07-22 10:46:25 +08:00
|
|
|
|
animation: scrollLeft 25s linear infinite; /* 滚动动画，持续时间为25秒，线性匀速，无限循环 */
|
2024-07-15 16:58:47 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@keyframes scrollLeft {
|
|
|
|
|
|
0% {
|
|
|
|
|
|
transform: translateX(0); /* 从盒子的右边开始 */
|
|
|
|
|
|
}
|
|
|
|
|
|
100% {
|
|
|
|
|
|
transform: translateX(-100%); /* 向左移动到盒子的左边 */
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
