其他代码

纯CSS3进度条动画效果

阿里云


一款使用纯 css3 制作的进度条动画效果。进度条在前进时不同的刻度可以设置不同的颜色,是一款效果非常酷的进度条动画。这个彩色的进度条动画效果在增加刻度时颜色从红色渐变到绿色,效果非常不错。它使用纯 css 制作,没有使用任何的 javascript。
HTML 部分

  1. <section class="container">
  2.   <input type="radio" class="radio" name="progress" value="five" id="five">
  3.   <label for="five" class="label">5%</label>
  4.  
  5.   <input type="radio" class="radio" name="progress" value="twentyfive" id="twentyfive" checked>
  6.   <label for="twentyfive" class="label">25%</label>
  7.  
  8.   <input type="radio" class="radio" name="progress" value="fifty" id="fifty">
  9.   <label for="fifty" class="label">50%</label>
  10.  
  11.   <input type="radio" class="radio" name="progress" value="seventyfive" id="seventyfive">
  12.   <label for="seventyfive" class="label">75%</label>
  13.  
  14.   <input type="radio" class="radio" name="progress" value="onehundred" id="onehundred">
  15.   <label for="onehundred" class="label">100%</label>
  16.  
  17.   <div class="progress">
  18.     <div class="progress-bar"></div>
  19.   </div>
  20. </section>
也想出现在这里?联系我们
创客主机

纯 CSS3 进度条动画效果

已有 351 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址

收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!