css动画圆环_html/css_WEB-ITnose

          cycle 	                   	 		#cycle{			position: relative;			width:200px;			height:200px;			margin:auto;		}		.pie1-wrapper{			position: absolute;			width:200px;			height:200px;			clip:rect(0px 200px 200px 100px);					}		@-webkit-keyframes pie1-rotate /* Safari 和 Chrome */		{			from {				transform:rotate(0deg);				-webkit-transform: rotate(0deg);			}			to {				transform:rotate(180deg);				-webkit-transform: rotate(180deg);			}		}		.pie1{			position: absolute;			width:200px;			height:200px;			background-color:pink;			border-radius: 100px;			clip:rect(0px 100px 200px 0px);			-webkit-animation: pie1-rotate 2s;	/* Safari 和 Chrome */			-webkit-animation-fill-mode: forwards;			-webkit-animation-timing-function:linear; /* Safari 和 Chrome */		}		.pie2-wrapper{			position: absolute;			width:200px;			height:200px;			clip:rect(0px 100px 200px 0px);					}		@-webkit-keyframes pie2-rotate /* Safari 和 Chrome */		{			from {				transform:rotate(0deg);				-webkit-transform: rotate(0deg);			}			to {				transform:rotate(180deg);				-webkit-transform: rotate(180deg);			}		}		.pie2{			position: absolute;			width:200px;			height:200px;			background-color:pink;			border-radius: 100px;			clip:rect(0px 200px 200px 100px);			-webkit-animation: pie2-rotate 2s;				-webkit-animation-fill-mode: forwards;			-webkit-animation-delay:2s; 			-webkit-animation-timing-function:linear; /* Safari 和 Chrome */		}		.pie-grey{			width:200px;			height:200px;			background-color:#eaeaea;			border-radius: 100px;		}		.pie-white{			position: absolute;			top:0;			bottom:0;			left:0;			right:0;			width:180px;			height:180px;			background-color:#fff;			border-radius: 90px;			margin:auto;		}	               	
  		
  			


      
查看更多关于css动画圆环_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did114543