✖  
登陆

还没有账号? 立即注册

忘记密码?
登陆
✖  
注册

已经有账号?马上登陆 购买邀请码

立即注册

3D立体进度条加载动画特效

首页 建站技术 正文
广告
<div class="container">
<header class="codrops-header">
<h1>3D立体进度条加载动画特效</h1>
</header>
 
<section class="content">
<!-- <h2>h2</h2> -->
<article class="flexy-grid">
<h3>Striped bars</h3>
<input type="checkbox" id="bar-1">
<div class="flexy-column">
<div class="progress-factor flexy-item">
<div class="progress-bar">
<div class="bar has-rotation has-colors navy ruler" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" id="bar-0_0">
<div class="tooltip white"></div>
<div class="bar-face face-position roof percentage"></div>
<div class="bar-face face-position back percentage"></div>
<div class="bar-face face-position floor percentage volume-lights"></div>
<div class="bar-face face-position left"></div>
<div class="bar-face face-position right"></div>
<div class="bar-face face-position front percentage volume-lights shine"></div>
</div>
</div>
</div>
</div>
<div class="flexy-column">
<div class="progress-factor flexy-item">
<div class="progress-bar">
<div class="bar has-rotation has-colors orange ruler-2" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100">
<div class="tooltip white"></div>
<div class="bar-face face-position roof percentage"></div>
<div class="bar-face face-position back percentage"></div>
<div class="bar-face face-position floor percentage volume-lights"></div>
<div class="bar-face face-position left"></div>
<div class="bar-face face-position right"></div>
<div class="bar-face face-position front percentage volume-lights shine"></div>
</div>
</div>
</div>
</div>
<div class="flexy-column">
<div class="progress-factor flexy-item">
<div class="progress-bar">
<div class="bar has-rotation has-colors cyan ruler-3" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
<div class="tooltip white"></div>
<div class="bar-face face-position roof percentage"></div>
<div class="bar-face face-position back percentage"></div>
<div class="bar-face face-position floor percentage volume-lights"></div>
<div class="bar-face face-position left"></div>
<div class="bar-face face-position right"></div>
<div class="bar-face face-position front percentage volume-lights shine"></div>
</div>
</div>
</div>
</div>
<label class="value-label" for="bar-1">[ aria-valuenow = '90%' ]</label>
</article>
<article class="flexy-grid">
<h3>Heat bars</h3>
<input type="checkbox" id="bar-2">
<div class="flexy-column">
<div class="progress-factor flexy-item">
<div class="progress-bar">
<div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
<div class="tooltip heat-gradient-tooltip"></div>
<div class="bar-face face-position roof percentage"></div>
<div class="bar-face face-position back percentage"></div>
<div class="bar-face face-position floor percentage volume-lights"></div>
<div class="bar-face face-position left"></div>
<div class="bar-face face-position right"></div>
<div class="bar-face face-position front percentage volume-lights shine"></div>
</div>
</div>
</div>
</div>
<div class="flexy-column">
<div class="progress-factor flexy-item">
<div class="progress-bar">
<div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
<div class="tooltip heat-gradient-tooltip"></div>
<div class="bar-face face-position roof percentage"></div>
<div class="bar-face face-position back percentage"></div>
<div class="bar-face face-position floor percentage volume-lights"></div>
<div class="bar-face face-position left"></div>
<div class="bar-face face-position right"></div>
<div class="bar-face face-position front percentage volume-lights shine"></div>
</div>
</div>
</div>
</div>
<div class="flexy-column">
<div class="progress-factor flexy-item">
<div class="progress-bar">
<div class="bar has-rotation has-colors red heat-gradient" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
<div class="tooltip heat-gradient-tooltip"></div>
<div class="bar-face face-position roof percentage"></div>
<div class="bar-face face-position back percentage"></div>
<div class="bar-face face-position floor percentage volume-lights"></div>
<div class="bar-face face-position left"></div>
<div class="bar-face face-position right"></div>
<div class="bar-face face-position front percentage volume-lights shine"></div>
</div>
</div>
</div>
</div>
<label class="value-label" for="bar-2">[ aria-valuenow = '90%' ]</label>
</article>
<article class="flexy-grid">
<h3>Dotted bar</h3>
<input type="checkbox" id="bar-0">
<div class="flexy-column">
<div class="progress-factor flexy-item">
<div class="progress-bar">
<div class="bar has-rotation has-colors dark dots-pattern" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="tooltip"></div>
<div class="bar-face face-position roof percentage"></div>
<div class="bar-face face-position back percentage"></div>
<div class="bar-face face-position floor percentage volume-lights"></div>
<div class="bar-face face-position left"></div>
<div class="bar-face face-position right"></div>
<div class="bar-face face-position front percentage volume-lights shine"></div>
</div>
</div>
</div>
</div>
<label class="value-label" for="bar-0">[ aria-valuenow = '90%' ]</label>
</article>
<article class="flexy-grid">
<h3>Hover bar</h3>
<input type="checkbox" id="bar-3">
<div class="flexy-column">
<div class="progress-factor flexy-item">
<div class="progress-bar">
<div class="bar has-rotation has-colors yellow move" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">
<div class="bar-face face-position roof percentage"></div>
<div class="bar-face face-position back percentage"></div>
<div class="bar-face face-position floor percentage volume-lights"></div>
<div class="bar-face face-position left"></div>
<div class="bar-face face-position right"></div>
<div class="bar-face face-position front percentage volume-lights shine"></div>
</div>
</div>
</div>
</div>
<label class="value-label" for="bar-3">[ aria-valuenow = '90%' ]</label>
</article>
</section>
<!-- Related demos -->
 
</div>
 编号:80108

image.png

资源下载

版权说明
文章采用: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。
版权声明:本站资源来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系客服并出示版权证明以便删除!
Discuz魔客吧模板素材资源站模板
« 上一篇 05-01
直播已经是趋势,美团居然上线美团直播助手
下一篇 » 04-30

发表评论

  • 泡泡
  • 阿呆
  • 阿鲁
  • 蛆音娘
    没有更多评论了