1. 静态彩虹字

// 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. 动态彩虹字

 

// 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;}
}