在Web开发中，字幕滚动效果是一种常见的动效，常用于展示新闻头条、广告语等。Vue 3 是目前非常流行的前端框架，通过Vue 3，我们可以轻松实现字幕来回滚动的效果。本文将介绍如何使用Vue 3来实现这一效果。
1.组件模版
代码语言：vue复制<template>
<div class="header">
<h1 class="title">字幕滚动测试</h1>
<div class="marquee">
<p class="marquee-text">
这是滚动字幕文本
</p>
</div>
</div>
</template>模板部分 (<template>)：
使用<div class="header">
包含标题和滚动通知。
<h1 class="title">字幕滚动测试</h1>
设置标题文本。
<div class="marquee">
包含滚动的文本。
<p class="marquee-text">
包含需要滚动显示文本。
2.样式部分
代码语言：Vue复制<script>
export default {
name: 'App'
};
</script>
<style scoped>
.header {
position: fixed;
top: 0;
width: 100%;
text-align: center;
background-color: #fff;
padding: 10px 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 1000;
}2.1脚本部分 (<script>)：
定义基本的Vue组件。
2.2样式部分 (<style scoped>)：
.header类用于固定页面顶部的容器，并设置背景色、阴影和内边距。
.title类设置标题的颜色、字体大小和样式。
.marquee类用于设置滚动区域的样式，包括隐藏溢出的内容和设置背景色。
.marquee-text类用于设置滚动文本的颜色和动画效果。
@keyframes marquee定义滚动动画，从右到左再回到右，形成来回滚动的效果。
关键部分
代码语言：Vue复制/* 定义来回滚动动画 */
@keyframes marquee {
0% {
transform: translateX(100%);
}
50% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}动画效果：
@keyframes marquee：定义从0%到50%再到100%的关键帧动画，使得文本从右向左滚动到尽头，再从左回到右侧，形成来回滚动的效果。
animation: marquee 10s linear infinite：设置动画的持续时间为10秒，并且无限循环。你可以根据需要调整时间以控制滚动速度。
