css 動(dòng)畫(huà)圓環(huán)

發(fā)布時(shí)間：2020-07-27 16:22:13 來(lái)源：網(wǎng)絡(luò) 閱讀：469 作者：antlove 欄目：開(kāi)發(fā)技術(shù)

<!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>

向AI問(wèn)一下細(xì)節(jié)

css 動(dòng)畫(huà)圓環(huán)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽