vue 顶部消息横向滚动通知效果实现
作者：努力学习的木子
系统顶部展示一个横向滚动的消息通知,就是消息内容从右往左一直滚动,这篇文章主要介绍了vue顶部消息横向滚动通知,需要的朋友可以参考下
前言
系统顶部展示一个横向滚动的消息通知，就是消息内容从右往左一直滚动。
效果如下：
代码
使用
<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>到此这篇关于vue 顶部消息横向滚动通知效果实现的文章就介绍到这了,更多相关vue 消息横向滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！