1.效果分析
纯CSS3实现进度条的制作,效果如下图所示,详见----demo----
2.难点分析
圆角边框,内阴影,
渐变填充实现斜纹效果
斜纹动画
3.实现步骤
a.html架构
<div class="progressBar blue stripes">
<span></span>
</div>
<div class="progressBar orange stripes">
<span></span>
</div>
b.进度条母条.progressBar的实现
.progressBar{
margin: 50px auto;
padding: 5px;
width: 360px;
height: 20px;
background-color: #1a1a1a;
border-radius: 4px;
box-shadow: 0 1px 5px #000 inset;
}
c.进度条字条span的实现
.progressBar span{
display: inline-block;
height: 100%;
width: 60%;
background-color: #777;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
transition:all .5s ease;
position: relative;
z-index: 1;
}
.progressBar:hover span{
width: 100%;
cursor: pointer;
}
d.不同颜色的变化
.blue span{
background-color: #34c2e3;
}
.orange span{
background-color: #fecf23;
background-image: linear-gradient(top, #fecf23, #fd9215);
}
e.斜条纹实现
.stripes span{
background-size: 30px 30px;
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,transparent 75%, transparent);
animation: stripesAnimate 1s linear infinite;
}
@keyframes stripesAnimate{
0%{background-position:0 0;}
100%{background-position: 60px 0;}
}
.stripes:hover span{
background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,transparent 75%, transparent);
}
完工,感谢
w3cplus大漠,感谢
www.red-team-design.com。
深入阅读:
》css3-progress-bars
》how-to-create-progress-bar-with-css3
》Pure-CSS-Animated-Progress-Bar
》30-css3-progress-bars-100-free-for-download
》Very Beautiful CSS3 And JQuery progress bar
》pure-css-progress-bar-with-javascript-for-animation
》progress-bars
》让人不得不爱的进度条设计
》动态进度条及百分比显示
分享到:
相关推荐
Html5炫酷进度条-html5-css3-progress-bar 更多资源: http://cleopard.download.csdn.net
纯CSS3进度条Button,经典案例,绝对好用,初学者必备。
css3-progress-bar-linear-color.zip
css3进度条,快速便捷的实现进度条动画效果,代码简单易懂,直接可以拿来使用
css3-3d-circle-progress-chart.zip
awesome-pure-css-no-javascript, 一份精选的纯CSS资源列表 awesome-pure-css-no-javascript纯 CSS HTML,不使用JavaScript,能实现怎样的视觉效果?资源基于单个 Div CSS绘图。用HTML和CSS来打造一个自己的「大白( ...
今天我们要分享9款极具创意的HTML5/CSS3进度条动画,...3、纯CSS3实现动态Loading加载 仅6个span标签 之前我们介绍过几款具有各种动画效果的CSS3进度条,我们可以在CSS3进度条栏目中查看演示和下载[......] 阅读全文>>
这是一款纯CSS3时尚进度条UI设计效果。给进度条使用bootstrap网格进行布局,通过简单的CSS代码和animation动画来制作带动画效果的进度条。
jquery css3进度条加载动画特效
脚本简介:纯js+css3渐变进度条动画特效是一款css3背景属性绘制渐变的进度条加载动画特效,动态加载效果,背景色动态渐变,纯css+js实现,对于简单页面实现进度条效果可以简单利用此方法。 脚本简介:纯js+css3渐变...
纯CSS3进度条渐变加载特效代码.zip
一款使用纯css3制作的进度条动画效果。进度条在前进时不同的刻度可以设置不同的颜色,是一款效果非常酷的进度条动画。
(常用代码)CSS3 进度条效果的实现(常用代码)CSS3 进度条效果的实现
绿色条纹css3进度条代码是一款纯css3实现的条纹加载条。带有响应式的效果。
css动态的进度条,今天刚封装的!
这是一款基于Bootstrap的纯CSS3进度条动画样式特效。该CSS3进度条通过阴影制作立体效果,并使用CSS3 animation来制作进度条的动画特效。
球形多图3d旋转,纯css3代码
这是一款使用纯CSS3制作的超酷圆形Loading加载进度条特效插件。该loading加载进度条特效有水平进度条和环状进度条两种,该特效在水平或圆形轨道上有一个小球不断运动来达到loading进度条效果。