<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><head><title>cycle</title><metahttp-equiv="keywords"content="keyword1,keyword2,keyword3"><metahttp-equiv="description"content="thisismypage"><metahttp-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(0px200px200px100px);}@-webkit-keyframespie1-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(0px100px200px0px);-webkit-animation:pie1-rotate2s;/*Safari和Chrome*/-webkit-animation-fill-mode:forwards;-webkit-animation-timing-function:linear;/*Safari和Chrome*/}.pie2-wrapper{position:absolute;width:200px;height:200px;clip:rect(0px100px200px0px);}@-webkit-keyframespie2-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(0px200px200px100px);-webkit-animation:pie2-rotate2s;-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><divid="cycle"><divclass="pie1-wrapper"><divclass="pie1"></div></div><divclass="pie2-wrapper"><divclass="pie2"></div></div><divclass="pie-grey"></div><divclass="pie-white"></div></div></body></html>