vue 网页横向滚动播放消息

陪小甜甜赏月

已于 2024-08-29 18:04:07 修改

阅读量297

点赞数 3

分类专栏： Element Plus 文章标签：前端 elementui

于 2024-08-12 17:01:22 首次发布

本文链接：https://blog.csdn.net/weixin_40920919/article/details/141136341

版权

Element Plus 专栏收录该内容

7 篇文章 1 订阅

订阅专栏


<template>

  <div class="notice">

    <div class="notice-container">

      <div class="notice-bar">

        <div class="bar_text" v-for="(item,index) in noticeList" :key="index" >

          {{item}}

        </div>

      </div>

    </div>

  </div>

</template>



<script lang="ts" setup>



const noticeList = [

  '你好！！！',



]

</script>

<style >

.notice{

  display: flex;

  background: #4073fa;

  margin-top: 10px;

  padding: 2px 5px;

}

.notice-container{

  display: flex;

  width:calc(100% - 30px);

  height: 25px;

  overflow: hidden;

  margin-left: 5px;

}

.notice-bar{

  font-size: 15px;

  margin-left: 10px;

  display: flex;

  animation: move 15s linear infinite;

  line-height: 20px;

  color: #f5f6f7;

  .bar_text{

    width: max-content;

    min-width: 100px;

  }

}

@keyframes move{

  0% {

    transform: translateX(400%);

  }

  100%{

    transform: translateX(-100%);

  }

}

</style>

播放速度和位移，根据自己需求调整，效果图：