/* 容器的样式 */
.scroll-container {
  width: 100%;        /* 容器宽度 */
  height: 150px;       /* 容器高度 */
  overflow: hidden;    /* 隐藏超出容器的内容 */
  border: 1px solid #ccc; /* 边框 */
  position: relative;
  
}

/* 文本内容的样式 */
.scroll-text {
  display: flex;
  flex-direction: column;
  gap: 10px;  /* 文本之间的间距 */
  position: absolute;  /* 绝对定位，便于控制位置 */
  bottom: 0;           /* 确保文本从底部开始 */
  animation: scroll-up 30s linear infinite; /* 动画效果 */
  color: Teal;  /*文本颜色*/
  margin-left: 10px; /*文本左边框距离*/
 
}

.message {
  margin: 0;
}

/* 定义滚动的动画 */
@keyframes scroll-up {
  0% {
    transform: translateY(100%);  /* 初始时，文本位于容器底部 */
  }
  100% {
    transform: translateY(-100%); /* 最终，文本滚动到容器的顶部 */
  }
}