vue:实现顶部消息横向滚动通知

前言

系统顶部展示一个横向滚动的消息通知,就是消息内容从右往左一直滚动。

效果如下:

代码

使用

javascript 复制代码
<template>
  <div class="notic-bar">
    <img :src="notic" class="notice-img" />
    <div class="notice-bar-container">
      <div class="notice-bar__wrap">
        <div
          v-for="(item, index) in list"
          :key="index"
          class="notice-bar__wrap_text"
        >
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import notic from "../../public/notic.png";
const list = [
  "开发不易,感谢理解",
  "",
  "感谢您的理解",
  "",
  "您的支持是我继续完善的动力",
];
</script>

<style lang="scss" scoped>
.notic-bar {
  display: flex;
  background: #67c23a;
  margin: 5px;
  border-radius: 5px;
  padding: 2px 5px;
}
.notice-bar-container {
  display: flex;
  width: calc(100% - 30px);
  height: 20px;
  overflow: hidden;
  margin-left: 5px;
}
.notice-img {
  width: 20px;
  height: 20px;
}
.notice-bar__wrap {
  margin-left: 10px;
  display: flex;
  animation: move 20s linear infinite;
  line-height: 20px;
  color: #f5f6f7;

  .notice-bar__wrap_text {
    width: max-content;
    min-width: 100px;
  }
}
@keyframes move {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>
相关推荐
Thetimezipsby14 小时前
基于Taro4打造的一款最新版微信小程序、H5的多端开发简单模板
前端·javascript·微信小程序·typescript·html5·taro
BUG创建者14 小时前
uni 拍照上传拍视频上传以及相册
前端·javascript·音视频
就是帅我不改15 小时前
敏感词过滤黑科技!SpringBoot+Vue3+TS强强联手,打造无懈可击的内容安全防线
前端·vue.js·后端
菲兹园长15 小时前
CSS(展示效果)
前端·javascript·css
UNbuff_015 小时前
HTML 中的 CSS 使用说明
css·html·tensorflow
香香甜甜的辣椒炒肉16 小时前
vue(7)-单页应用程序&路由
前端·javascript·vue.js
dreams_dream16 小时前
vue中axios与fetch比较
前端·javascript·vue.js
梦鱼17 小时前
Vue 项目图标一把梭:Iconify 自用小记(含 TS/JS 双版本组件)
前端·javascript·vue.js
给月亮点灯|17 小时前
Vue基础知识-脚手架开发-初始化目录解析
前端·javascript·vue.js
周小码17 小时前
CesiumJS详解:打造专业级Web 3D地球仪与地图的JavaScript库
前端·javascript·3d