<!DOCTYPE html ><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>倒计时</title>
<style type="text/css">
/*css实现圆形倒计时效果*/
.countdown{width:200px;height:200px;margin: 0 auto;position: relative;overflow:hidden;border-radius: 50%; background-color: cyan; }
.countdown p{ margin:0px; padding:0px;}
.countdown u{ display:block}
.cltbox,.crtbox{position: absolute;top: 0;width:100px;height:200px;overflow: hidden;z-index: 1;}
.cltbox{left: 0;}
.crtbox{right: 0;}
.lti,.rti{width: 100px;height: 200px;background-color: pink;}
.lti{-webkit-transform-origin: right center;transform-origin: right center;-webkit-animation: loading_left 10s linear;}
.rti{-webkit-transform-origin: left center;transform-origin: left center;-webkit-animation: loading_right 10s linear;}
@-webkit-keyframes loading_left{
0%{-webkit-transform: rotate(0deg);}
50%{-webkit-transform: rotate(0deg);}
100%{-webkit-transform: rotate(180deg);}
}
@-webkit-keyframes loading_right{
0%{-webkit-transform: rotate(0deg);}
50%{-webkit-transform: rotate(180deg);}
100%{-webkit-transform: rotate(180deg);}
}
.mask{position: absolute;top: 15px;left: 15px;right: 15px;bottom: 15px;z-index: 2;border-radius: 50%;background-color: #fff; line-height:180px; text-align:center}
</style>
</head>
<body>
<div class="countdown">
<p class="cltbox"><u class="lti"></u></p>
<p class="crtbox"><u class="rti"></u></p>
<p class="mask">倒计时</p>
</div>
</body>
</html>
