以前没发现background-clip还有一个-webkit-的私有属性：text，可以实现文字背景，结合渐变，可以实现很棒的文字背景无缝滚动。

这里案例是很早以前就做的齿轮旋转动画案例，今天才放上来，素材来自于百度浏览器。

效果如下：

查看效果

案例下载地址：

链接：https://pan.baidu.com/s/1qZtYk00 密码：ems8

知识点分析：

1、要实现渐变背景在文字里，需要使用到webkit的私有属性。

2、掌握渐变背景设置的规律，实现无缝滚动。

3、掌握animation的动画属性。

部分代码如下：

h1{
	width:550px;
	margin: 50px auto 0;
	font-size:4rem;
	background:linear-gradient(to right,#0B9BA9,#F9C134 25%,#0B9BA9 50%,#F9C134 75%,#0B9BA9);/*颜色的设置非常重要，是1,2,1,2,1这样的顺序。处于第1位置的颜色一样，处于第2位置的颜色一样。结合背景变成200%，从而实现了无缝滚动。*/
	background-size:200% 100%;/*为了实现无缝滚动*/
	-webkit-background-clip:text;/*让背景显示在文字范围内。*/
	-webkit-text-fill-color:transparent;/*webkit的私有属性，让文字颜色透明。*/
	animation:scroll 5s linear infinite;
	}
.yuan{
	position:relative;
	width:200px;
	height:200px;
	left:50%;
	top:150px;
	margin-left:-100px;
	border-radius:50%;
	background-color:#000;
	overflow:hidden;}

.rotate1,.rotate2,.rotate3{
	position:absolute;
	transform:rotate(0deg);
	transform-origin:center;
	}
.rotate1{
	width:126px;
	height:126px;
	z-index:3;
	}
.rotate2,.rotate3{
	width:160px;
	height:160px;
	z-index:2;
	}
.rotate3{
	z-index:1;}
.gear1{
	left:50%;
	top:50%;
	margin-left:-63px;
	margin-top:-63px;
	animation:shun 5s linear infinite;}
.gear2,.gear3{
	top:101px;
	background:url(images/bg-gear-f_089274a.png) no-repeat;
	animation:ni 5s linear infinite;
	}
.gear2{
	left:-60px;
	}
.gear3{
	right:-60px;
	}
.gear4,.gear5,.gear6{
	right:-30px;
	top:60px;
	background:url(images/bg-gear-br_8d4d4b5.png) no-repeat;
	animation:shun 5s linear infinite; }
.gear5{
	left:-10px;
	right:auto;
	top:90px;
	}
.gear6{
	top:-40px;
	right:-12px;
	animation:ni 5s linear infinite;}

@keyframes shun{
	0%{
		transform:rotate(0deg);}
	100%{
		transform:rotate(360deg);}
	}
@keyframes ni{
	0%{
		transform:rotate(0deg);}
	100%{
		transform:rotate(-360deg);}
	}
@keyframes scroll{
	0%{
		background-position:0 0;}
	100%{
		background-position:-100% 0;}/*无缝滚动的背景设置。*/
	}

年底了，很多东西没有整理更新，感觉乱糟糟的，可能是归家心切吧，可惜今年只放假10天，比起以前放23天的假期来说，真的是太少了，我的心情一直不好，不知道怎么回家啊。

回家过年对于我来说，就是回到最初的地方，彻底平静自己，放下所有压力，重新聚集能量，在新的一年继续加油冲刺~~~~~~

最近的负面情绪真的很多，年终总结都没写，来年计划也没有制定，真的有点肌无力的感觉~~~~~~