51 lines
1.2 KiB
CSS
51 lines
1.2 KiB
CSS
.scrolling-ad-container {
|
||
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;
|
||
font-size: 18px;
|
||
padding-left: 100%;
|
||
/* 确保广告从盒子外开始滚动 */
|
||
white-space: nowrap;
|
||
/* 内容不换行 */
|
||
animation: scrollLeft 20s linear infinite;
|
||
/* 滚动动画，持续时间为20秒，线性匀速，无限循环 */
|
||
}
|
||
|
||
/* 定义动画 */
|
||
@keyframes scrollLeft {
|
||
0% {
|
||
transform: translateX(0);
|
||
/* 从容器的右边开始 */
|
||
}
|
||
|
||
100% {
|
||
transform: translateX(-100%);
|
||
/* 向左移动到容器的左边 */
|
||
}
|
||
}
|
||
/* 悬停时停止动画 */
|
||
.scrolling-ad-container:hover .scrolling-ad-content {
|
||
animation-play-state: paused; /* 悬停时动画暂停 */
|
||
/* 添加下划线 */
|
||
/* text-decoration: underline; */
|
||
/* 下划线颜色 */
|
||
/* text-decoration-color: red; */
|
||
} |