CSS圆环倒计时效果.docVIP

HYPERLINK /thread-3044063-1-1.htmlCSS3圆环倒计时效果 源码： HYPERLINK 长沙网站建设提供 htmlheadmeta charset=utf-8titleCSS3圆环倒计时效果 by liumiao.me/titlestyle.pie { width:200px; height:200px; background-color:blue; border-radius:100px; position:absolute; }.pie1 { clip:rect(0px,200px,200px,100px); -o-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); background:-moz-radial-gradient(20% 50% 0deg, #333, #0000ff); background:-webkit-gradient(radial, 100 100, 0, 100 100, 110, from(#000), to(#0000ff)); }.pie2 { clip:rect(0px,100px,200px,0px); -o-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); background:-moz-radial-gradient(80% 50% 0deg, #333, #0000ff); background:-webkit-gradient(radial, 100 100, 0, 100 100, 110, from(#000), to(#0000ff)); }.hold { width:200px; height:200px; position:absolute; z-index:1; }.hold1 { clip:rect(0px,200px,200px,100px); }.hold2 { clip:rect(0px,100px,200px,0px); }.bg { width:200px; height:200px; background-color:red; border-radius:100px; position:absolute; box-shadow:0px 0px 8px #333; background:-moz-radial-gradient(0% 50% 0deg, #900, #ff0000); background:-webkit-gradient(radial, 100 100, 0, 100 100, 110, from(#900), to(#ff0000)); }.time { width:160px; height:160px; margin:20px 0 0 20px; background-color:#fff; border-radius:100px; position:absolute; z-index:1; box-shadow:0px 0px 8px #333 inset; text-align:center; line-height:160px; font-family:Book Antiqua, Palatino, serif; font-size:35px; font-weight:bold; text-shadow: 1px 1px 3px #333; }.time em { background:#fff; position:absolute; top:62px; left:12px; height:18px; width:140px; opacity:0.4; }/style/headbodydiv class=hold hold1div class=pie pie1/div/divdiv class=hold hold2div class=pie pie2/div/divdiv class=bg/divdiv class=timespan/spanem/em/divscript src=HYPERLINK http://liumiao.me/demo/count/jquery-1.7.min.jsjquery-1.7.min.js/scriptscript src=HY