51 lines
903 B
Plaintext
51 lines
903 B
Plaintext
.water-level-alert {
|
||
width: 650px;
|
||
background: rgba(0, 32, 51, 0.9);
|
||
padding: 10px 20px;
|
||
border-radius: 4px;
|
||
border: 1px solid #0088cc;
|
||
|
||
.alert-container {
|
||
height: 24px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
|
||
.alert-wrapper {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
animation: scrollUp 12s linear infinite; // 6秒 * 2条数据
|
||
|
||
&:hover {
|
||
animation-play-state: paused; // 鼠标悬停时暂停动画
|
||
}
|
||
}
|
||
|
||
.alert-item {
|
||
height: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.alert-text {
|
||
color: #ffffff;
|
||
font-size: 14px;
|
||
white-space: nowrap;
|
||
|
||
&::before {
|
||
content: '⚠️';
|
||
margin-right: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes scrollUp {
|
||
0% {
|
||
transform: translateY(0);
|
||
}
|
||
100% {
|
||
transform: translateY(-50%); // 滚动一半的高度，因为我们复制了4组数据
|
||
}
|
||
} |