✖

登陆

还没有账号？立即注册

记住我的登录状态忘记密码？

登陆

✖

注册

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

立即注册

搜索

统计

建站日期：2022-01-17
文章总数：4178 篇
评论总数：18802条
分类总数：42 个
最后更新：今天

建站技术

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

阿影学长/ 2022年5月1日 12:25 / 1102 阅读

热爱生活，热爱互联网！阿影资源网

首页 › 建站技术 › 正文

广告

本站同款定制模板购买文字广告位/100月文字广告位/100月文字广告位/100月

<div class="container">

<header class="codrops-header">

<h1>3D立体进度条加载动画特效</h1>

</header>

<section class="content">

<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>

</div>

编号：80108

资源下载

版权说明

文章采用：《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。
版权声明：本站资源来自互联网收集，仅供用于学习和交流，请勿用于商业用途。如有侵权、不妥之处，请联系客服并出示版权证明以便删除!

Discuz魔客吧模板素材资源站模板

« 上一篇 05-01

直播已经是趋势，美团居然上线美团直播助手

下一篇 » 04-30

相关推荐

WordPress网站备案不用闭站的方法(网站备案免闭站)

怎么给网站添加免责声明代码？付代码

如何强制站点网页只能微信打开

网站怎么做好301和302跳转？301重定向跳转教程

发表评论

泡泡
阿呆
阿鲁
蛆音娘

没有更多评论了

让大家也知道你的独特见解立即评论

以上留言仅代表用户个人观点，不代表官方立场