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