CSS3 字体发光渐变色

coldriversnow

已于 2022-03-03 15:16:38 修改

阅读量651

点赞数

文章标签： css3 elementui css

于 2022-03-03 13:57:43 首次发布

本文链接：https://blog.csdn.net/coldriversnow/article/details/123252247

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            font-size: 60px;
            background-image: linear-gradient(135deg,red,blue);
            background-clip:text;
            -webkit-background-clip:text;
            color: transparent;
        }
    </style>
</head>
<body>
    <p>
        我是渐变文字
    </p>
</body>
</html>

文字从左到右渐变

background: linear-gradient(to right, #1ca639, #afe311);

<h2 class="text-gradient">从上到下渐变</h2>

   .text-gradient {
        display: inline-block;
        color: green;
        font-size: 10em;  
        background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
}

<p class="first_neon">first_neon</p>
    .first_neon {
        background: none repeat scroll 0 0 #000000;
        border: 1px solid;
        border-radius: 15px;
        color: #FFFFFF;
        cursor: pointer;
        float: left;
        font-family:"Warnes";
        margin: auto;
        padding: 26px 10px;
        text-align: center;
        text-shadow: 0 0 10px #FFFFFF, 0 0 20px #FFFFFF, 0 0 30px #FFFFFF, 0 0 40px #FF00DE, 0 0 70px #FF00DE, 0 0 80px #FF00DE, 0 0 100px #FF00DE;
        transition: text-shadow 0.5s ease 0s;
        width: 250px;
    }

coldriversnow

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS3 字体发光渐变色

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> p{ font-size: 60px; background-image: linear-gradient(135deg,red,blue); .
复制链接

扫一扫

CSS3 字体 发光 渐变色

CSS3 字体发光渐变色