导航菜单
  • 首页
  • 首页>万博manbext3.0首页登录集>CSS3万博manbext3.0首页登录集

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

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

    这里万博manbext3.0首页登录是很早以前就做的齿轮旋转动画万博manbext3.0首页登录,今天才放上来,素材来自于百度浏览器。

    效果如下:

    齿轮旋转动画.jpg

    查看效果

    万博manbext3.0首页登录下载地址:

    链接: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