css实现文字轮播，前端学习日志02

项目中遇到需求需要实现文字的滚动条（横向和竖向），由于要兼容多种浏览器，我使用了纯css进行实现，这里做一个分享希望能给大家一点启发。

横向滚动

首先是横向滚动条，这个比较简单，具体看以下代码：

html

<div class="label-content" id="label-content" v-show="showLunBo">
      <div class="lunbo_text">水库水位：正常</div>
    </div>

 

css

.label-content {
  position: absolute;
  right: 10%;
  top: 15%;
  width: 150px;
  height: 20px;
  background: rgba(139, 197, 245, 0.5);
  border: 2px solid #00a1ff;
  /* background-image: url("../../assets/文本框.png"); */
  border-radius: 4px;
  /* 必须 */
  overflow: hidden;
  /* 必须 */
  /* margin: 50px auto; */
  text-align: right;
}

@keyframes anis {
  0% {
    transform: translateX(100px)
  }
  100% {
    transform: translateX(-150px)
  }
}

.lunbo_text {
  color: white;
  animation: