首页>案例集>CSS3案例集

css3渐变文字动画和齿轮旋转动画

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

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

效果如下:

齿轮旋转动画.jpg

查看效果

案例下载地址:

链接: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天的假期来说,真的是太少了,我的心情一直不好,不知道怎么回家啊。

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

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

点赞


5
保存到:

相关文章

发表评论:

◎请发表你卖萌撒娇或一针见血的评论,严禁小广告。

Top