css文字裁剪实现渐变

最新推荐文章于 2023-04-06 15:25:47 发布

Smile_ping

最新推荐文章于 2023-04-06 15:25:47 发布

阅读量420

点赞数 2

分类专栏： css 文章标签： css background-clip linear-gradient hue-rotate 文字渐变

本文链接：https://blog.csdn.net/Smile_ping/article/details/128183381

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

css文字裁剪实现渐变效果

文章目录

- css文字裁剪实现渐变效果

效果图

在这里插入图片描述

<view class="gradient-text">世界如此美妙，你却如此暴躁</view>
<view class="gradient-text-position">世界如此美妙，你却如此暴躁</view>
<view class="gradient-text1">世界如此美妙，你却如此暴躁</view>
<view class="gradient-text2">世界如此美妙，你却如此暴躁</view>

基本使用

.gradient-text {
    color: transparent;
    font-size: 40rpx;
    background: -webkit-linear-gradient(30deg, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%);
    // 兼容
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

background-position

使用background-position位置位移

.gradient-text-position {
    font-size: 46rpx;
    color: transparent;
    background: -webkit-linear-gradient(20deg, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%);
    background-clip: text;
    animation: bgPosition 3s infinite linear;
}

@keyframes bgPosition{
    0% {
        background-position: 0;
    }
    100% {
        background-position: 400rpx;
    }
}

filter

使用filter函数的hue-rotate给图像应用色相旋转

.gradient-text1 {
    font-size: 50rpx;
    color: transparent;
    background: linear-gradient(45deg, #ffeb3b, #009688, #ef32d9, #fc67fa, #03a9f4, #9c27b0, #8bc34a);
    background-clip: text;

    // 背景渐变 hue-rotate图像的色调旋转
    animation: huerotate 3s infinite;
}

@keyframes huerotate {
    100% {
        filter: hue-rotate(360deg);
    }
}

background-image

.gradient-text2 {
    font-size: 52rpx;
    color: transparent;
    background: linear-gradient(90deg, #f7797d 0, #CAC531 15%, #F3F9A7 30%, #43C6AC 45%, #12c2e9 60%, #c471ed 75%, #f64f59 90%, #89fffd 100%);
    background-clip: text;
    animation: changeColor .5s linear infinite alternate;
}

@keyframes changeColor {
    0% {
        background-image: linear-gradient(90deg, #f7797d 0, #CAC531 15%, #F3F9A7 30%, #43C6AC 45%, #12c2e9 60%, #c471ed 75%, #f64f59 90%, #89fffd 100%);
    }

    50% {
        background-image: linear-gradient(90deg, #f4c4f3 0, yellowgreen 15%, fuchsia 30%, lime 45%, olive 60%, aqua 75%, #f64f59 90%, #89fffd 100%);
    }

    100% {
        background-image: linear-gradient(-90deg, #f7797d 0, #CAC531 15%, #F3F9A7 30%, #43C6AC 45%, #12c2e9 60%, #c471ed 75%, #f64f59 90%, #89fffd 100%);
    }
}