css轻松实现动态渐变色文字

background-clip 默认情况下，background-clip的取值为border-box，即背景会裁剪到边框的内部。当设置为padding-box时，背景会裁剪到内边距的边界。而如果设置为content-box，背景会裁剪到内容区域的边界。而通过调整background-clip取值为text，可以实现背景色和背景图片在统一的位置显示，元素的背景将只在文本所在的区域显示，而文本本身将变为透明。这个效果可以通过设置文字颜色为transparent实现。

p{
	text-align: center;
	line-height: 1.5;
	margin: 200px 0px;
	background-image: -webkit-linear-gradient(left,#3498db,#f47920 10%,#d71345 20%,#f7acbc 30%,#ffd400 40%,#3498db 50%,#f47920 60%,#d71345 70%,#f7acbc 80%,#ffd400 90%,#3498db);
	color: transparent;
	-webkit-background-clip: text;//这是关键
	background-size: 200% 100%;
	-webkit-animation: slide 2s infinite linear;
	animation: slide 5s infinite linear;
	font-size: 20px;
	@keyframes slide {
	0% {
	background-position: 0 0;
	}
	100% {
	background-position: -100% 0;
	}

	}