纯CSS3实现苹果iOS 7风格进度条
浏览数：47 /
时间：2015年06月11日
还记得iOS 7的“颠覆性”扁平化设计吗？其中的各种扁平化UI界面都让我们为之惊叹，其中的进度条更是让人喜欢 的不得了。今天就给大家分享一个用CSS3制作的iOS7进度条小教程，这是一款非常优秀的UI交互设计。下面就来看看演示效果以及实现方式吧！
HTML结构代码
首先设计HTML的基本结构，大概如下：
<div class="container">
<h1 class="text-center">iOS 7进度条</h1>
<div class="progress">
<div class="progress-bar">
<div class="progress-shadow"></div>
</div>
</div>
</div>
CSS3样式代码
结构写好后，那么我们接下来就是根据iOS的UI设计风格来编写css样式。仔细研究下界面元素，我们可以使用CSS3的渐变属性linear-gradient来完成彩色的横条，除此之外，我们可以注意到横条的下方有一条倾斜的投影，这个细节处理非常好，让整体看起来更加立体、更具美感！但这投影实现比较特殊，我们就不采用box-shadow来制作，我们还是采用渐变属性来完成，然后通过transform来修改其角度，从而达到我们需要的效果。好了，具体全部css代码如下，大家可以参考一下。
<style>
/* www.datouwang.com */
/* VARIABLES */
/* COLORS */
/* BASE */
html, body {
height: 100%;
}
body {
background-color: #f5f7f9;
color: #6c6c6c;
font: 300 1em/1.5em "Helvetica Neue", sans-serif;
margin: 0;
position: relative;
}
h1 {
font-size: 2.25em;
font-weight: 100;
line-height: 1.2em;
margin: 0 0 1.5em;
}
/* HELPERS */
.text-center {
text-align: center;
}
/* GRID */
.container {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
/* PROGRESS */
.progress {
background-color: #e5e9eb;
height: 0.25em;
position: relative;
width: 24em;
}
.progress-bar {
animation-duration: 3s;
animation-name: width;
background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
background-size: 24em 0.25em;
height: 100%;
position: relative;
}
.progress-shadow {
background-image: linear-gradient(to bottom, #eaecee, transparent);
height: 4em;
position: absolute;
top: 100%;
transform: skew(45deg);
transform-origin: 0 0;
width: 100%;
}
/* ANIMATIONS */
@keyframes width {
0%, 100% {
transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
}
0% {
width: 0;
}
100% {
width: 100%;
}
}
</style>
添加CSS3无前缀脚本prefixfree.js
到这里之后，进度条基本已经制作完成了，看着界面是不是有很熟悉的感觉。但是如果细心的你一定会发现，上面的css3代码都没有添加浏览器兼容的前缀。这样子就会导致在不同浏览器下会没有动画效果。这个时候我们可以使用prefixfree.js脚本，这个脚本会自动补上需要的前缀，让各种浏览器支持该CSS3属性。（当然，如果你手动添加所有css3前缀，那么就不需要引入这个插件）
<script src="http://www.datouwang.com/uploads/demo/jiaoben/201501/jiaoben467/js/prefixfree.min.js"></script>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
