【Vue前端】字幕滚动设置

在Web开发中，字幕滚动效果是一种常见的动效，常用于展示新闻头条、广告语等。Vue 3 是目前非常流行的前端框架，通过Vue 3，我们可以轻松实现字幕来回滚动的效果。本文将介绍如何使用Vue 3来实现这一效果。

1.组件模版

<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.样式部分

<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定义滚动动画，从右到左再回到右，形成来回滚动的效果。

关键部分

/* 定义来回滚动动画 */
@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秒，并且无限循环。你可以根据需要调整时间以控制滚动速度。