<!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>原文地址：http://antlove.blog.51cto.com/10057557/1757305
