css3动画--文字光影

最新推荐文章于 2024-07-24 10:22:02 发布

RAY_CHEN.

最新推荐文章于 2024-07-24 10:22:02 发布

阅读量368

点赞数

文章标签： CSS动画背景-clip text-fill-color 动画效果网页设计

本文链接：https://blog.csdn.net/weixin_44707050/article/details/124718124

版权

<template>
    <div class="container">
        <div class="wenzi">happy everyday~</div>
    </div>
</template>


<style lang="scss" scoped>
.container {
    height: 1000px;
    width: 100%;
    background: #000;
    .wenzi {
       font-size: 30px;
       color: pink;
       font-weight: 700;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%,-50%);
       background: linear-gradient(to right , rgb(229, 88, 88) 0, #fff 20px , rgb(213, 29, 29) 30px);
       background-clip: text;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-position: 0;
       animation: shine 2.5s linear infinite;
    }
    @keyframes shine {
        0% {
            background-position: 0;
        }
        50% {
            background-position: 230px;
        }
        100% {
            background-position: 230px;
        }
    }
}
</style>

background-clip和text-fill-color配合使用；

再加上animate动画~