CSS实现公告栏文字跑马灯特效（VUE组件）

原创

已于 2023-01-13 14:01:26 修改 · 1.8k 阅读

于 2023-01-13 11:35:10 首次发布

效果图

在这里插入图片描述

VUE组件封装

<template>
    <div class="marquee" :style="{ backgroundColor: bgColor, height: height + 'px' }">
        <span class="marquee__title" ref="marqueeTitle" :style="{ color, fontSize: fontSize + 'px', animationDuration: speed + 's', '--speed': speed }" v-html="title"></span>
    </div>
</template>

<script>
/**
 * NoticeBar 公告栏跑马灯
 * @description 从右往左的跑马灯
 * @property {String} content 显示的内容，支持html
 * @property {String} color 文字颜色，默认#EFF0DB
 * @property {Number} fontSize 文字大小，默认40
 * @property {Number} speed 滚动速度，单位s（播放一次所用时间，默认根据内容宽度计算时间）
 * @property {String} bgColor 背景颜色，默认#CC2529
 * @property {Number} height 背景高度，默认78
 */
export default {
   
   
    name: 'NoticeBar',
    props: {
   
   
        content: {
   
   
            type: String,
            default: ''
        },
        color: {
   
   
            type: String,
            default: '#EFF0DB'
        },
        fontSize: {
   
   
            type: Number,
            default: 40