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