CSS 彩虹字动态彩虹字

川长思鸟来 2022-02-01 14:15 289阅读 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 条评论，289人围观）

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

相关阅读

相关 css彩虹文字

用CSS3实现彩虹文字的效果，只在Webkit内核的浏览器（谷歌浏览器或移动端）上有效果。 background-image: -webkit-gr

淡淡的烟草味﹌/ 2023年06月04日 04:49/ 0 赞/ 54 阅读

相关数据结构彩虹瓶

彩虹瓶的制作过程（并不）是这样的：先把一大批空瓶铺放在装填场地上，然后按照一定的顺序将每种颜色的小球均匀撒到这批瓶子里。假设彩虹瓶里要按顺序装 N 种颜色的小球（不妨将顺序

ゞ浴缸里的玫瑰/ 2023年03月14日 08:19/ 0 赞/ 13 阅读

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

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

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

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

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

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

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

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

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

相关纯CSS3彩虹加载loading代码

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

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

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

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

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

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

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

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

相关 CSS 彩虹字动态彩虹字

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

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

相关彩虹表

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

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