css 动画圆环_html/css_WEB-ITnose-html教學-PHP中文網

css 动画圆环_html/css_WEB-ITnose

WBOY

發布： 2016-06-21 08:52:59

原創

1458 人瀏覽過

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>cycle</title>	    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    	<style>		#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;		}	</style>  </head>    <body>      	<div id="cycle">  		<div class="pie1-wrapper">  			<div class="pie1"></div>		</div>		<div class="pie2-wrapper">  			<div class="pie2"></div>		</div>  		<div class="pie-grey"></div>  		<div class="pie-white"></div>  	</div>  </body></html>

登入後複製