通过一个组件实现了文字流光效果

最近看到百度首页有一个文字流光的效果,挺有意思的,在项目中可以找一个让人"眼前一黑"的地方加上这个效果。

保准让人"眼前一黑"。哈哈,效果虽然很简单,但是颇有零几年网页的"赶脚"~

html 复制代码
<template>
    <div class="shine-font-container">
        <div 
            class="shine-font" 
            :style="{ 
                backgroundImage: gradientStyle, 
                animationDuration: animationDuration + 's', 
                animationIterationCount: isAnimationLoop ? 'infinite' : 1 
            }"
        >
            {{ text }}
        </div>
    </div>
</template>

<script>
export default {
    name: 'ShineFont',
    props: {
        text: {
            type: String,
            default: '默认文本'
        },
        gradientColor: {
            type: Array,
            default: () => ['#ff1E0033', '#ff1e00', '#335bff', '#335BFF33']
        },
        animationDuration: {
            type: Number,
            default: 5
        },
        isAnimationLoop: {
            type: Boolean,
            default: true
        }
    },
    computed: {
        gradientStyle() {
            return `linear-gradient(90deg, ${this.gradientColor.join(', ')})`;
        }
    }
}
</script>

<style scoped>
.shine-font-container .shine-font {
    background-size: 120% 100%;
    background-position: -753em 0;
    background-repeat: no-repeat;
    animation: shine 1s linear;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    height: 24px;
    letter-spacing: .06em;
    text-align: left;
    background: #000;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    display: flex;
}

@keyframes shine {
    0% {
        background-position: -150px 0;
    }
    100% {
        background-position: 150px 0;
    }
}
</style>

其实效果比较简单,就是给背景一个渐变色,给文字一个透明色。

通过背景不断地挪动位置实现文字"流光"的效果。

相关推荐
中微子3 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子4 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则5 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele5 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4535 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友6 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir6 小时前
vue3.2 前端动态分页算法
前端·算法
烛阴6 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子6 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead7 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构