css3圆环形旋转

特别声明:如果您喜欢小站的内容,可以点击年卡¥199.00元(原价: ¥598元)季卡¥78.00元(原价: ¥168元)月卡¥28.00元(原价: ¥68元)进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

css3圆环形旋转

本实例看起来有点像太极,其实更如一块环形的玉佩,设计比较好看。先设计一个圆形填充一个135deg的两个颜色的渐变,各位一半。然后设计三个子元素为上中下的小圆,一个为浅色的与渐变背景的浅色的一样,一个为黑色的充当中间的孔,一个为深色的与渐变背景的深色一样,为了表现更佳,给这三个小圆各自应用了box-shadow生成阴影。然后就是父元素的animate转动360deg。

demodownload

html主要代码:

<div id="wrapper" class="wrapper">
	<div id="up"></div>
	<div id="mid"></div>
	<div id="down"></div>
</div>

css主要代码:

#wrapper{
width:150px;
height:150px;
background: -moz-linear-gradient(135deg, rgba(111,219,68,1) 0%,rgba(111,219,68,1) 50%,rgba(3,153,8,1) 50%,rgba(3,153,8,1) 100%);
background: -webkit-linear-gradient(135deg, rgba(111,219,68,1) 0%,rgba(111,219,68,1) 50%,rgba(3,153,8,1) 50%,rgba(3,153,8,1) 100%);
background: linear-gradient(135deg, rgba(111,219,68,1) 0%,rgba(111,219,68,1) 50%,rgba(3,153,8,1) 50%,rgba(3,153,8,1) 100%);

margin:20px auto;
border-radius:100px;
box-shadow:0 0 3px rgba(0,0,0,.7);
}
#up{
float:right;
width:50px;
height:50px;
border-radius:100px;
background:#6fdb44;
/*box-shadow*/
box-shadow:-2px -2px 1px rgba(0,0,0,.6);
margin-right:18px;
margin-top:11px;
}
#down{
float:left;
width:50px;
height:50px;
border-radius:100px;
background:#039908;
margin:-14px 15px;
box-shadow:2px 2px 1px rgba(0,0,0,.6);
}
#mid{
float:left;
width:49px;
height:49px;
border-radius:100px;
background:#333;
margin-left:50px;
margin-top:-10px;
box-shadow:inset 0 0 10px #000;
}
@-moz-keyframes rotate{
0%{ -moz-transform:rotate(0deg);}
	100%{-moz-transform:rotate(-360deg);}
}
@-webkit-keyframes rotate{
0%{ -webkit-transform:rotate(0deg);}
	100%{-webkit-transform:rotate(-360deg);}
}
.wrapper{
 -moz-animation:rotate 2s ease infinite;
 -webkit-animation:rotate 2s ease infinite;
 animation:rotate 2s ease infinite;
}
.wrapper:nth-child(2){
	-moz-animation:rotate 2s linear infinite;
	-webkit-animation:rotate 2s linear infinite;
	animation:rotate 2s linear infinite;
}

demodownload

查看更多:http://cssdeck.com/labs/minimalist-css3-spinner

jordan shoes for sale outlet online

如需转载,烦请注明出处:https://www.w3cplus.com/demo/438.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部