CSS 彩虹字动态彩虹字

川长思鸟来 2022-02-01 14:15 206阅读 0赞

## 1. 静态彩虹字 ##

![20190514174559622.png][]

// html
    <div class="this-div">Elegant and Beautiful</div>
    
    // css
    .this-div{
    	margin: 20px;
    	width: 200px;
    	background: linear-gradient(90deg, red, blue);
    	-webkit-text-fill-color: transparent;
    	-webkit-background-clip: text;
    	// 以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉
    }

## 2. 动态彩虹字 ##

![20190514175652254.gif][]

// html
    <div class="this-div">Elegant and Beautiful</div>
    
    // css
    .this-div{
    	background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-background-size: 200% 100%;
        -webkit-animation:  maskedAnimation 4s infinite linear;
        font-size: 18px;
    }
    
    @keyframes maskedAnimation {
    	0% {
        background-position: 0 0;
    	}
    	100% {
    	    background-position: -100% 0;
    	}
    }

[20190514174559622.png]: /images/20220201/a8a453feb65949838a4b97780d69343b.png
[20190514175652254.gif]: /images/20220201/9c9e52a64dc34cdfbdce90daffc682c6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，206人围观）

还没有评论，来说两句吧...

相关阅读

相关 python绘制简单彩虹图_python绘制简单彩虹图

本文实例为大家分享了python绘制彩虹图的具体代码，供大家参考，具体内容如下 ![74eea6df0902428c68de04feb31e779f.png][] 代码：

川长思鸟来/ 2022年11月01日 00:50/ 0 赞/ 183 阅读

相关 html中怎么做彩虹,web前端入门到实战：纯CSS画动态彩虹

效果效果图如下 ![8ffab38f6aa9][] 实现思路使用box-shadow画赤橙黄绿蓝靛紫7个弧形，拼接在一起 after伪元素写投影样式彩虹和投影

水深无声/ 2022年10月13日 02:24/ 0 赞/ 259 阅读

相关 html径向渐变怎么写彩虹,CSS3 彩虹渐变文本

CSS 语言： CSSSCSS 确定 @import url(http://fonts.googleapis.com/css?family=Raleway:400);

落日映苍穹つ/ 2022年10月08日 00:39/ 0 赞/ 79 阅读

相关纯CSS3彩虹加载loading代码

[下载地址][Link 1]纯CSS3彩虹加载loading代码特效，一款使用CSS3绘制的彩虹弹簧式加载效果代码。 ![1631148589.png][] dd: [

墨蓝/ 2022年09月10日 14:23/ 0 赞/ 174 阅读

相关纯 CSS 制作的彩虹条纹文字

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 [https://codepen.io/comehope/pen/ELpRxj][htt

左手的ㄟ右手/ 2022年05月25日 13:14/ 0 赞/ 196 阅读

相关 linux之lolcat彩虹命令

系统环境：CentOs 7 (1)确认是否有rudy apt-get install ruby [在基于 APT 的系统中] yum inst

淩亂°似流年/ 2022年05月09日 08:20/ 0 赞/ 219 阅读

相关如何用纯 CSS 创作彩虹背景文字

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

不念不忘少年蓝@/ 2022年04月13日 03:24/ 0 赞/ 297 阅读

相关彩虹表在线破解

分享一下我老师大神的人工智能教程。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！[https://blog.csdn.net/jiangjuns

比眉伴天荒/ 2022年03月16日 00:24/ 0 赞/ 273 阅读

相关 CSS 彩虹字动态彩虹字

1. 静态彩虹字 ![20190514174559622.png][] // html <div class="this-div">Elegant an

川长思鸟来/ 2022年02月01日 14:15/ 0 赞/ 207 阅读

相关彩虹表

一、简介彩虹表就是一个庞大的、针对各种可能的字母组合预先计算好的哈希值的集合，不一定是针对MD5算法的，各种算法的都有，有了它可以快速的破解各类密码。越是复杂的密码，需

﹏ヽ暗。殇╰゛Y/ 2022年01月29日 09:25/ 0 赞/ 206 阅读