css+jquery实现投票结果进度动画效果代码
代码语言:html
所属分类:进度条
代码描述:css+jquery实现投票结果进度动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> p { color: #525252; font-size: 12px; } .skillbar { position: relative; display: block; margin-bottom: 15px; width: 100%; background: #eee; height: 35px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -webkit-transition: 0.4s linear; -moz-transition: 0.4s linear; -ms-transition: 0.4s linear; -o-transition: 0.4s linear; transition: 0.4s linear; -webkit-transition-property: width, background-color; -moz-transition-property: width, background-color; -ms-transition-property: width, background-color; -o-transition-property: width, background-color; transition-property: width, background-color; } .skillbar-title { position: absolute; top: 0; left: 0; width: 110px; font-weight: bold; font-size: 13px; color: #ffffff; background: #6adcfa; -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .skillbar-title span { display: block; background: rgba(0, 0, 0, 0.1); padding: 0 20px; height: 35px; line-height: 35px; -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .skillbar-bar { height: 35px; width: 0px; background: #6adcfa; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .skill-bar-percent { position: absolute; right: 10px; top: 0; font-size: 11px; height: 35px; line-height: 35px; color: #ffffff; color: rgba(0, 0, 0, 0.4); } </style> </head> <body> <div class="skillbar clearfix " data-percent="20%"> <div class="skillbar-title" style="background: #d35400;"> <span>HTML5</span> </div> <div class="skillbar-bar" style="background: #e67e22;"></div> <div class="skill-bar-percent"> 20% </div> </div> <!-- End Skill Bar --> <div class="skillbar clearfix " data-percent="25%"> <div class="skillbar-title" style="backgrou.........完整代码请登录后点击上方下载按钮下载查看
网友评论0