公告栏的跑马灯效果

废话不多说先来上张图给大家看一下

 

 

 中间的字母vvvvvvv在公告栏中一直滚动播出

 （1）先看看页面的结构代码，喇叭图片用的是svg格式的

  <div class="remind-block iss-shadow">
    <div class="marquee-left">
      <span>
        <svg
          class="iss-icon mr-10"
          id="公告"
          width="1em"
          height="1em"
          viewBox="0 0 22.8 24"
          fill="currentColor"
        >
          <path
            id="形状"
            class="cls-1"
            d="M12.9,17.144V6.859L21.15,0A1.683,1.683,0,0,1,22.8,1.715V22.284A1.683,1.683,0,0,1,21.15,24h0ZM4.889,22.29V17.16c0-.057.012-.107.015-.164-4,0-4.9-1.774-4.9-4.968C0,8.25,1.29,6.9,4.885,6.9H11.4V17.16H8.148v5.129A1.52,1.52,0,0,1,6.8,23.94c.536.06-.28.06-.28.06A1.67,1.67,0,0,1,4.889,22.29Z"
          />
        </svg>
      </span>
    </div>
    <div class="marquee-block">
      <div class="marquee">
        {{ $store.state.common.notice }}&nbsp;&nbsp;&nbsp;
      </div>
      <div class="marqueeT">
        {{ $store.state.common.notice }}&nbsp;&nbsp;&nbsp;
      </div>
    </div>
  </div>

（2）再来瞧瞧样式代码，这个滚动播出的动画使用css写的

<style lang="less" scoped>
.remind-block {
  height: 30px;
  display: flex;
  padding-left: 15px;
  line-height: 30px;
  background-color: #fff;
  color: #947334;
  position: relative;
  overflow: hidden;
  text-align: center;
  width: 100%;
  padding-right: 20px;
  z-index: 100;
}

  .iss-shadow {

    box-shadow: 5px 6px 8px #bfb9b9;

  }

.marquee-left {
  .iss-icon {
    margin-right: 20px;
    margin-bottom: 4px;
  }
}
.marquee-block {
  display: inline-block;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  overflow: hidden;
  box-sizing: border-box;
  padding-left: 15px;
  position: relative;
}
.marquee {
  animation: marquee 10s linear infinite;
  color: #171d2c;
  white-space: nowrap;
  position: absolute;
}
.marqueeT {
  animation: marqueeT 10s linear infinite;
  color: #171d2c;
  white-space: nowrap;
  position: absolute;
}
@keyframes marquee {
  0% {
    left: 0;
  }
  100% {
    left: -105%;
  }
}
@keyframes marqueeT {
  0% {
    left: 105%;
  }
  100% {
    left: 0;
  }
}
</style>