「兔了个兔」用CSS实现拜年文字跑马灯特效Vue组件

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

效果图

VUE组件封装

支持html内容，文字颜色和大小、背景颜色和高度、文字滚动速度的动态配置。

<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
        },
        speed: {
            type: Number,
            default: 0
        },
        bgColor: {
            type: String,
            default: '#CC2529'
        },
        height: {
            type: Number,
            default: 78
        }
    },
    data() {
        return {
            DEFAULT_SPEED: 143, // 默认速度，每秒跑的距离，单位：px/s
            title: ''
        };
    },
    watch: {
        content(value) {
            this.title = value;
            this.calcSpeed();
        }
    },
    created() {
        if (this.content) {
            this.title = this.content;
            this.calcSpeed();
        }
    },
    methods: {
        calcSpeed() {
            if (this.title !== '' && this.speed === 0) {
                this.$nextTick(() => {
                    let width = this.$refs.marqueeTitle.clientWidth;
                    this.speed = Number(width / this.DEFAULT_SPEED).toFixed(2);
                });
            }
        }
    }
};
</script>

<style scoped="scoped">
.marquee {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    word-break: break-all;
    white-space: nowrap;
    overflow: hidden;
}
.marquee__title {
    letter-spacing: 3px;
    cursor: default;
    display: inline-block;
    padding-left: 100%;
    animation: marqueeMove calc(var(--speed) * 1s) linear infinite;
}
.marquee:hover .marquee__title {
    animation-play-state: paused;
}
@keyframes marqueeMove {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}
</style>

使用方式

通过content传入需要显示的文字内容。

<template>
    <div id="app">
        <NoticeBar v-if="marquee.cont" :content="marquee.cont"></NoticeBar>
    </div>
</template>

<script>
import NoticeBar from './components/NoticeBar.vue';

export default {
    name: 'app',
    components: {
        NoticeBar
    },
    data() {
        return {
            marquee: {
                cont: '祝大家兔年快乐，身体健康！'
            }
        };
    }
};
</script>

<style>
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
</style>