CSS 彩虹字 动态彩虹字

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