首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

css3闪亮进度条效果实现思路及代码

Posted in HTML / CSS onApril 17, 2013

效果图如下：
css3闪亮进度条效果实现思路及代码
html源码：

复制代码
代码如下:

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>New Pure CSS3 Progress Bars Demonstration</title>
<meta name="description" content="Pure CSS3 progress bars demonstration by inWebson.com"/>
<meta name="keywords" content="demonstration,demo,css3,progress,bar,loading,preloader,inwebson"/>
<link rel="stylesheet" media="all" href="vendor.css">
<link rel="stylesheet" media="all" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready( function() {
var delay = 0;
$('.bar').children('span').each( function() {
var num = Math.floor(Math.random()*8)+2;
$(this)
.width(0)
.delay(delay)
.animate({
'width': (num*10)+'%'
}, 3000);
delay += 1500;
});
$('.source span').on('click', function() {
$(this)
.toggleClass('active')
.next().slideToggle(700);
});
$('.source pre').slideUp(0);
});
</script>
</head>
<body>
<!-- Content -->
<section id="wrapper">
<div class="content-inner">
<section id="basic-bar" class="holder">
<h3>基本类型</h3>
<div class="bar color0">
<span></span>
</div>
<div class="source">
<span>View Source</span>
<pre>
<!-- HTML -->
<div class="bar color0">
<span></span>
</div>
<hr/><!-- CSS -->
.bar {
margin: 5px 0 3px;
border: 6px solid #333;
background: #333;
overflow: hidden;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
box-shadow: 1px 1px 1px #777;
-moz-box-shadow: 1px 1px 1px #777;
-webkit-box-shadow: 1px 1px 1px #777;
}
.bar > span {
display: block;
height: 20px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.color0 > span {
background-color: #FF9932;
}
</pre>
</div>
</section>
<section id="gradient-bar" class="holder">
<h3>绿色渐变</h3>
<div class="bar gradient color1">
<span></span>
</div>
<div class="source">
<span>View Source</span>
<pre>
<!-- HTML -->
<div class="bar gradient color1">
<span></span>
</div>
<hr/><!-- CSS -->
.gradient > span {
box-shadow:
0 5px 5px rgba(255,255,255,0.6) inset,
0 -5px 7px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow:
0 5px 5px rgba(255,255,255,0.6) inset,
0 -5px 7px rgba(0, 0, 0, 0.4) inset;
-webkit-box-shadow:
0 5px 5px rgba(255,255,255,0.6) inset,
0 -5px 7px rgba(0, 0, 0, 0.4) inset;
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#33ffffff',
endColorstr='#33000000',
GradientType=0 );
}
.color1 > span {
background-color: #90EE90;
}
</pre>
</div>
</section>
<section id="gloss-bar" class="holder">
<h3>黄色渐变</h3>
<div class="bar gradient gloss color2">
<span></span>
</div>
<div class="source medium">
<span>View Source</span>
<pre>
<!-- HTML -->
<div class="bar gradient gloss color2">
<span></span>
</div>
<hr/><!-- CSS -->
.gloss > span {
background-image: -moz-linear-gradient(top,
rgba(255,255,255,0.2) 0%,
rgba(255,255,255,0.1) 45%,
rgba(0,0,0,0.2) 55%,
rgba(0,0,0,0.1) 100%);
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(255,255,255,0.2)),
color-stop(45%,rgba(255,255,255,0.1)),
color-stop(55%,rgba(0,0,0,0.2)),
color-stop(100%,rgba(0,0,0,0.1)));
background-image: -webkit-linear-gradient(top,
rgba(255,255,255,0.5) 0%,
rgba(255,255,255,0.1) 45%,
rgba(0,0,0,0.2) 55%,
rgba(0,0,0,0.1) 100%);
background-image: -o-linear-gradient(top,
rgba(255,255,255,0.2) 0%,
rgba(255,255,255,0.1) 45%,
rgba(0,0,0,0.2) 55%,
rgba(0,0,0,0.1) 100%);
background-image: -ms-linear-gradient(top,
rgba(255,255,255,0.2) 0%,
rgba(255,255,255,0.1) 45%,
rgba(0,0,0,0.2) 55%,
rgba(0,0,0,0.1) 100%);
background-image: linear-gradient(to bottom,
rgba(255,255,255,0.2) 0%,
rgba(255,255,255,0.1) 45%,
rgba(0,0,0,0.2) 55%,
rgba(0,0,0,0.1) 100%);
}
.color2 > span {
background-color: #dbf043;
}
</pre>
</div>
</section>
<section id="stripe-bar" class="holder">
<h3>蓝色条纹</h3>
<div class="bar gradient stripe color3">
<span></span>
</div>
<div class="source medium">
<span>View Source</span>
<pre>
<!-- HTML -->
<div class="bar gradient stripe color3">
<span></span>
</div>
<hr/><!-- CSS -->
.stripe > span {
background-size:30px 30px;
-moz-background-size:30px 30px;
-webkit-background-size:30px 30px;
-o-background-size:30px 30px;
background-image: -moz-linear-gradient(-45deg,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0.15) 25%,
rgba(255,255,255,0) 25%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.15) 50%,
rgba(255,255,255,0.15) 75%,
rgba(255,255,255,0) 75%,
rgba(255,255,255,0) 100%);
background-image: -webkit-gradient(linear, left top, right bottom,
color-stop(0%,rgba(255,255,255,0.2)),
color-stop(25%,rgba(255,255,255,0.2)),
color-stop(25%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0.2)),
color-stop(75%,rgba(255,255,255,0.2)),
color-stop(75%,rgba(255,255,255,0)),
color-stop(100%,rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(-45deg,
rgba(255,255,255,0.3) 0%,
rgba(255,255,255,0.3) 25%,
rgba(255,255,255,0) 25%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.3) 50%,
rgba(255,255,255,0.3) 75%,
rgba(255,255,255,0) 75%,
rgba(255,255,255,0) 100%);
background-image: -o-linear-gradient(-45deg,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0.15) 25%,
rgba(255,255,255,0) 25%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.15) 50%,
rgba(255,255,255,0.15) 75%,
rgba(255,255,255,0) 75%,
rgba(255,255,255,0) 100%);
background-image: -ms-linear-gradient(-45deg,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0.15) 25%,
rgba(255,255,255,0) 25%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.15) 50%,
rgba(255,255,255,0.15) 75%,
rgba(255,255,255,0) 75%,
rgba(255,255,255,0) 100%);
background-image: linear-gradient(135deg,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0.15) 25%,
rgba(255,255,255,0) 25%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.15) 50%,
rgba(255,255,255,0.15) 75%,
rgba(255,255,255,0) 75%,
rgba(255,255,255,0) 100%);
}
.color3 > span {
background-color: #4169E1;
}
</pre>
</div>
</section>
<section id="stripe-animated-bar" class="holder">
<h3>动画条纹</h3>
<div class="bar gradient stripe color4">
<span class="animate"></span>
</div>
<div class="source medium">
<span>View Source</span>
<pre>
<!-- HTML -->
<div class="bar gradient stripe color4">
<span class="animate"></span>
</div>
<hr/><!-- CSS -->
.color4 > span {
background-color: #4169E1;
}
.animate {
animation: progress 2s linear infinite;
-moz-animation: progress 2s linear infinite;
-webkit-animation: progress 2s linear infinite;
-ms-animation: progress 2s linear infinite;
-o-animation: progress 2s linear infinite;
}
@-webkit-keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
@-moz-keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
@-ms-keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
@-o-keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
@keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
</pre>
</div>
</section>
<section id="threed-animated-bar" class="holder">
<h3>3D效果</h3>
<div class="bar gradient pattern2 color5">
<span class="animate"></span>
</div>
<div class="source medium">
<span>View Source</span>
<pre>
<!-- HTML -->
<div class="bar gradient stripe color6">
<span></span>
</div>
<hr/><!-- CSS -->
.pattern2 > span {
background-size: 10px 60px;
background-position: 0;
background-image: -moz-radial-gradient(center, ellipse cover,
rgba(255,255,255,.9) 0%,
rgba(255,255,255,.2) 20%,
transparent 40%);
background-image: -webkit-gradient( radial, center center, 0, center center, 60,
color-stop(0, rgba(255,255,255,.9)),
color-stop(20%, rgba(255,255,255,.2)),
color-stop(40%, rgba(255,255,255,0)),
color-stop(100%, rgba(255,255,255,0)));
background-image: -webkit-radial-gradient(center, ellipse cover,
rgba(255,255,255,.9) 0%,
rgba(255,255,255,.2) 20%,
transparent 40%);
background-image: -o-radial-gradient(center, ellipse cover,
rgba(255,255,255,.9) 0%,
rgba(255,255,255,.2) 20%,
transparent 40%);
background-image: -ms-radial-gradient(center, ellipse cover,
rgba(255,255,255,.9) 0%,
rgba(255,255,255,.2) 20%,
transparent 40%);
background-image: radial-gradient(ellipse at center,
rgba(255,255,255,.9) 0%,
rgba(255,255,255,.2) 20%,
transparent 40%);
}
.color5 > span {
background-color: #4169E1;
}
</pre>
</div>
</section>
<section id="pattern-animated-bar" class="holder">
<h3>动画渐变</h3>
<div class="bar gradient pattern color6">
<span>
<span class="animate"></span>
</span>
</div>
<div class="source medium">
<span>View Source</span>
<pre>
<!-- HTML -->
<div class="bar gradient pattern color6">
<span>
<span class="animate"></span>
</span>
</div>
<hr/><!-- CSS -->
.pattern > span {
background-size: 13px, 29px, 37px, 53px;
background-image:
-moz-linear-gradient(left,
rgba(255,255,255,0.07) 0%,
rgba(255,255,255,0.07) 50%,
transparent 50%),
-moz-linear-gradient(left,
rgba(255,255,255,0.13) 0%,
rgba(255,255,255,0.13) 50%,
transparent 50%),
-moz-linear-gradient(left,
transparent 0%,
transparent 50%,
rgba(255,255,255,0.17) 50%),
-moz-linear-gradient(left,
transparent 0%,
transparent 50%,
rgba(255,255,255,0.19) 50%);
background-image:
-webkit-linear-gradient(left,
rgba(255,255,255,0.07) 0%,
rgba(255,255,255,0.07) 50%,
transparent 50%),
-webkit-linear-gradient(left,
rgba(255,255,255,0.13) 0%,
rgba(255,255,255,0.13) 50%,
transparent 50%),
-webkit-linear-gradient(left,
transparent 0%,
transparent 50%,
rgba(255,255,255,0.17) 50%),
-webkit-linear-gradient(left,
transparent 0%,
transparent 50%,
rgba(255,255,255,0.19) 50%);
background-image:
-webkit-gradient(linear, left top, right top,
color-stop(0%,rgba(255,255,255,.07)),
color-stop(50%,rgba(255,255,255,.07)),
color-stop(50%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0))),
-webkit-gradient(linear, left top, right top,
color-stop(0%,rgba(255,255,255,.13)),
color-stop(50%,rgba(255,255,255,.13)),
color-stop(50%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0))),
-webkit-gradient(linear, left top, right top,
color-stop(0%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0.17)),
color-stop(50%,rgba(255,255,255,0.17))),
-webkit-gradient(linear, left top, right top,
color-stop(0%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0.19)),
color-stop(50%,rgba(255,255,255,0.19)));
background-image:
-o-linear-gradient(left,
rgba(255,255,255,0.07) 0%,
rgba(255,255,255,0.07) 50%,
transparent 50%),
-o-linear-gradient(left,
rgba(255,255,255,0.13) 0%,
rgba(255,255,255,0.13) 50%,
transparent 50%),
-o-linear-gradient(left,
transparent 0%,
transparent 50%,
rgba(255,255,255,0.17) 50%),
-o-linear-gradient(left,
transparent 0%,
transparent 50%,
rgba(255,255,255,0.19) 50%);
background-image:
-ms-linear-gradient(left,
rgba(255,255,255,0.07) 0%,
rgba(255,255,255,0.07) 50%,
transparent 50%),
-ms-linear-gradient(left,
rgba(255,255,255,0.13) 0%,
rgba(255,255,255,0.13) 50%,
transparent 50%),
-ms-linear-gradient(left,
transparent 0%,
transparent 50%,
rgba(255,255,255,0.17) 50%),
-ms-linear-gradient(left,
transparent 0%,
transparent 50%,
rgba(255,255,255,0.19) 50%);
background-image:
linear-gradient(to right,
rgba(255,255,255,0.07) 0%,
rgba(255,255,255,0.07) 50%,
transparent 50%),
linear-gradient(to right,
rgba(255,255,255,0.13) 0%,
rgba(255,255,255,0.13) 50%,
transparent 50%),
linear-gradient(to right,
transparent 0%,
transparent 50%,
rgba(255,255,255,0.17) 50%),
linear-gradient(to right,
transparent 0%,
transparent 50%,
rgba(255,255,255,0.19) 50%);
}
.pattern > span > span {
display:block;
height:100%;
width:100%;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-size: 12px;
background-image: -moz-linear-gradient(left,
rgba(255,255,255,0.1) 0%,
rgba(255,255,255,0.1) 50%,
transparent 50%);
background-image: -webkit-gradient(linear, left top, right top,
color-stop(0%,rgba(255,255,255,0.1)),
color-stop(50%,rgba(255,255,255,0.1)),
color-stop(50%,rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(left,
rgba(255,255,255,0.1) 0%,
rgba(255,255,255,0.1) 50%,
transparent 50%);
background-image: -o-linear-gradient(left,
rgba(255,255,255,0.1) 0%,
rgba(255,255,255,0.1) 50%,
transparent 50%);
background-image: -ms-linear-gradient(left,
rgba(255,255,255,0.1) 0%,
rgba(255,255,255,0.1) 50%,
transparent 50%);
background-image: linear-gradient(to right,
rgba(255,255,255,0.1) 0%,
rgba(255,255,255,0.1) 50%,
transparent 50%);
}
.color6 > span {
background-color: #026873;
}
</pre>
</div>
</section>
</div>
</section>
</body>
</html>

style.css：
复制代码
代码如下:

.holder{
position:relative;
margin-bottom:10px;
}
.content-inner{
width:500px;
margin:0 auto;
}
.content-inner h3{
color:#fff;
margin:0 10px;
}
.content-inner .source.wide{
width:1000px;
margin-left:-250px;
}
.content-inner .source.medium{
width:650px;
margin-left:-75px;
}
.content-inner .source span{
position:absolute;
top:7px;
right:10px;
color:#35BFFF;
font-size:12px;
cursor:pointer;
}
.content-inner .source span:after{
content:' + ';
}
.content-inner .source span.active{
color:#666;
}
.content-inner .source span.active:after{
content:' - ';
}
.content-inner .source pre{
color:#ccc;
background:#000;
border:1px solid #333;
padding:7px 15px;
box-shadow:0 0 7px #333;
}
.content-inner .source pre hr{
border:none;
border-bottom:1px dashed #333;
}
.bar{
margin:5px 0 3px;
border:6px solid #333;
background:#333;
overflow:hidden;
border-radius:50px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
box-shadow:1px 1px 1px #777;
-moz-box-shadow:1px 1px 1px #777;
-webkit-box-shadow:1px 1px 1px #777;
}
.bar > span{
display:block;
height:20px;
width:20%;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.gradient > span{
box-shadow:0 5px 5px rgba(255,255,255,0.6) inset, 0 -5px 7px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow:0 5px 5px rgba(255,255,255,0.6) inset, 0 -5px 7px rgba(0, 0, 0, 0.4) inset;
-webkit-box-shadow:0 5px 5px rgba(255,255,255,0.6) inset, 0 -5px 7px rgba(0, 0, 0, 0.4) inset;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ffffff', endColorstr='#33000000',GradientType=0 );
}
.gloss > span{
background-image: -moz-linear-gradient(top,
rgba(255,255,255,0.2) 0%,
rgba(255,255,255,0.1) 45%,
rgba(0,0,0,0.2) 55%,
rgba(0,0,0,0.1) 100%);
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(255,255,255,0.2)),
color-stop(45%,rgba(255,255,255,0.1)),
color-stop(55%,rgba(0,0,0,0.2)),
color-stop(100%,rgba(0,0,0,0.1)));
background-image: -webkit-linear-gradient(top,
rgba(255,255,255,0.5) 0%,
rgba(255,255,255,0.1) 45%,
rgba(0,0,0,0.2) 55%,
rgba(0,0,0,0.1) 100%);
background-image: -o-linear-gradient(top,
rgba(255,255,255,0.2) 0%,
rgba(255,255,255,0.1) 45%,
rgba(0,0,0,0.2) 55%,
rgba(0,0,0,0.1) 100%);
background-image: -ms-linear-gradient(top,
rgba(255,255,255,0.2) 0%,
rgba(255,255,255,0.1) 45%,
rgba(0,0,0,0.2) 55%,
rgba(0,0,0,0.1) 100%);
background-image: linear-gradient(to bottom,
rgba(255,255,255,0.2) 0%,
rgba(255,255,255,0.1) 45%,
rgba(0,0,0,0.2) 55%,
rgba(0,0,0,0.1) 100%);
}
.stripe > span{
background-size:30px 30px;
-moz-background-size:30px 30px;
-webkit-background-size:30px 30px;
-o-background-size:30px 30px;
background-image: -moz-linear-gradient(-45deg,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0.15) 25%,
rgba(255,255,255,0) 25%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.15) 50%,
rgba(255,255,255,0.15) 75%,
rgba(255,255,255,0) 75%,
rgba(255,255,255,0) 100%);
background-image: -webkit-gradient(linear, left top, right bottom,
color-stop(0%,rgba(255,255,255,0.2)),
color-stop(25%,rgba(255,255,255,0.2)),
color-stop(25%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0.2)),
color-stop(75%,rgba(255,255,255,0.2)),
color-stop(75%,rgba(255,255,255,0)),
color-stop(100%,rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(-45deg,
rgba(255,255,255,0.3) 0%,
rgba(255,255,255,0.3) 25%,
rgba(255,255,255,0) 25%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.3) 50%,
rgba(255,255,255,0.3) 75%,
rgba(255,255,255,0) 75%,
rgba(255,255,255,0) 100%);
background-image: -o-linear-gradient(-45deg,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0.15) 25%,
rgba(255,255,255,0) 25%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.15) 50%,
rgba(255,255,255,0.15) 75%,
rgba(255,255,255,0) 75%,
rgba(255,255,255,0) 100%);
background-image: -ms-linear-gradient(-45deg,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0.15) 25%,
rgba(255,255,255,0) 25%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.15) 50%,
rgba(255,255,255,0.15) 75%,
rgba(255,255,255,0) 75%,
rgba(255,255,255,0) 100%);
background-image: linear-gradient(135deg,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0.15) 25%,
rgba(255,255,255,0) 25%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.15) 50%,
rgba(255,255,255,0.15) 75%,
rgba(255,255,255,0) 75%,
rgba(255,255,255,0) 100%);
}
.pattern > span{
background-size: 13px, 29px, 37px, 53px;
background-image:
-moz-linear-gradient(left,
rgba(255,255,255,0.07) 0%,
rgba(255,255,255,0.07) 50%,
transparent 50%),
-moz-linear-gradient(left,
rgba(255,255,255,0.13) 0%,
rgba(255,255,255,0.13) 50%,
transparent 50%),
-moz-linear-gradient(left,
transparent 0%,
transparent 50%,
rgba(255,255,255,0.17) 50%),
-moz-linear-gradient(left,
transparent 0%,
transparent 50%,
rgba(255,255,255,0.19) 50%);
background-image:
-webkit-linear-gradient(left,
rgba(255,255,255,0.07) 0%,
rgba(255,255,255,0.07) 50%,
transparent 50%),
-webkit-linear-gradient(left,
rgba(255,255,255,0.13) 0%,
rgba(255,255,255,0.13) 50%,
transparent 50%),
-webkit-linear-gradient(left,
transparent 0%,
transparent 50%,
rgba(255,255,255,0.17) 50%),
-webkit-linear-gradient(left,
transparent 0%,
transparent 50%,
rgba(255,255,255,0.19) 50%);
background-image:
-webkit-gradient(linear, left top, right top,
color-stop(0%,rgba(255,255,255,.07)),
color-stop(50%,rgba(255,255,255,.07)),
color-stop(50%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0))),
-webkit-gradient(linear, left top, right top,
color-stop(0%,rgba(255,255,255,.13)),
color-stop(50%,rgba(255,255,255,.13)),
color-stop(50%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0))),
-webkit-gradient(linear, left top, right top,
color-stop(0%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0.17)),
color-stop(50%,rgba(255,255,255,0.17))),
-webkit-gradient(linear, left top, right top,
color-stop(0%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0.19)),
color-stop(50%,rgba(255,255,255,0.19)));
background-image:
-o-linear-gradient(left,
rgba(255,255,255,0.07) 0%,
rgba(255,255,255,0.07) 50%,
transparent 50%),
-o-linear-gradient(left,
rgba(255,255,255,0.13) 0%,
rgba(255,255,255,0.13) 50%,
transparent 50%),
-o-linear-gradient(left,
transparent 0%,
transparent 50%,
rgba(255,255,255,0.17) 50%),
-o-linear-gradient(left,
transparent 0%,
transparent 50%,
rgba(255,255,255,0.19) 50%);
background-image:
-ms-linear-gradient(left,
rgba(255,255,255,0.07) 0%,
rgba(255,255,255,0.07) 50%,
transparent 50%),
-ms-linear-gradient(left,
rgba(255,255,255,0.13) 0%,
rgba(255,255,255,0.13) 50%,
transparent 50%),
-ms-linear-gradient(left,
transparent 0%,
transparent 50%,
rgba(255,255,255,0.17) 50%),
-ms-linear-gradient(left,
transparent 0%,
transparent 50%,
rgba(255,255,255,0.19) 50%);
background-image:
linear-gradient(to right,
rgba(255,255,255,0.07) 0%,
rgba(255,255,255,0.07) 50%,
transparent 50%),
linear-gradient(to right,
rgba(255,255,255,0.13) 0%,
rgba(255,255,255,0.13) 50%,
transparent 50%),
linear-gradient(to right,
transparent 0%,
transparent 50%,
rgba(255,255,255,0.17) 50%),
linear-gradient(to right,
transparent 0%,
transparent 50%,
rgba(255,255,255,0.19) 50%);
}
.pattern > span > span{
display:block;
height:100%;
width:100%;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-size: 12px;
background-image: -moz-linear-gradient(left,
rgba(255,255,255,0.1) 0%,
rgba(255,255,255,0.1) 50%,
transparent 50%);
background-image: -webkit-gradient(linear, left top, right top,
color-stop(0%,rgba(255,255,255,0.1)),
color-stop(50%,rgba(255,255,255,0.1)),
color-stop(50%,rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(left,
rgba(255,255,255,0.1) 0%,
rgba(255,255,255,0.1) 50%,
transparent 50%);
background-image: -o-linear-gradient(left,
rgba(255,255,255,0.1) 0%,
rgba(255,255,255,0.1) 50%,
transparent 50%);
background-image: -ms-linear-gradient(left,
rgba(255,255,255,0.1) 0%,
rgba(255,255,255,0.1) 50%,
transparent 50%);
background-image: linear-gradient(to right,
rgba(255,255,255,0.1) 0%,
rgba(255,255,255,0.1) 50%,
transparent 50%);
}
.pattern2 > span{
background-size: 10px 60px;
background-position: 0;
background-image: -moz-radial-gradient(center, ellipse cover,
rgba(255,255,255,.9) 0%,
rgba(255,255,255,.2) 20%,
transparent 40%);
background-image: -webkit-gradient( radial, center center, 0, center center, 60,
color-stop(0, rgba(255,255,255,.9)),
color-stop(20%, rgba(255,255,255,.2)),
color-stop(40%, rgba(255,255,255,0)),
color-stop(100%, rgba(255,255,255,0)));
background-image: -webkit-radial-gradient(center, ellipse cover,
rgba(255,255,255,.9) 0%,
rgba(255,255,255,.2) 20%,
transparent 40%);
background-image: -o-radial-gradient(center, ellipse cover,
rgba(255,255,255,.9) 0%,
rgba(255,255,255,.2) 20%,
transparent 40%);
background-image: -ms-radial-gradient(center, ellipse cover,
rgba(255,255,255,.9) 0%,
rgba(255,255,255,.2) 20%,
transparent 40%);
background-image: radial-gradient(ellipse at center,
rgba(255,255,255,.9) 0%,
rgba(255,255,255,.2) 20%,
transparent 40%);
}
.bar.color0 > span{
background-color:#FF9932;
}
.bar.color1 > span{
background-color:#90EE90;
}
.bar.color2 > span{
background-color:#dbf043;
}
.bar.color3 > span{
background-color:#4169E1;
}
.bar.color4 > span{
background-color:#DA70D6;
}
.bar.color5 > span{
background-color:#000;
}
.bar.color6 > span{
background-color:#026873;
}
.animate{
animation:progress 2s linear infinite;
-moz-animation:progress 2s linear infinite;
-webkit-animation:progress 2s linear infinite;
-ms-animation:progress 2s linear infinite;
-o-animation:progress 2s linear infinite;
}
@-webkit-keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
@-moz-keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
@-ms-keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
@-o-keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
@keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}

vendor.css：
复制代码
代码如下:

body{
font-family:Cambria, Georgia, serif;
line-height:1.6em;
font-size:100%;
background:url(bg.png) 0 0 repeat;
margin:0;
padding:0;
}
header, section, footer, nav, hgroup{
display:block;
}
a{
color:#35BFFF;
text-decoration:none;
transition:all 1s;
-moz-transition:all 1s;
-webkit-transition:all 1s;
-ms-transition:all 1s;
-o-transition:all 1s;
}
a:hover, a:active{
color:#91DCFF;
}
img{
max-width:100%;
}
a img{
border:none;
}
/* Header */
#header{
width:100%;
background:#000;
background:rgba(0, 0, 0, 0.8);
color:#ccc;
letter-spacing:1px;
margin-bottom:20px;
padding:3px 0;
position:relative;
box-shadow:0 3px 10px #333;
-moz-box-shadow:0 3px 10px #333;
-webkit-box-shadow:0 3px 10px #333;
top:0;
left:0;
z-index:99;
}
#header h1{
padding:0 20px;
margin:10px 0;
text-shadow:1px 1px 0 #FFF, 2px 1px 1px #CCC;
float:left;
}
#backlinks{
float:right;
padding:5px 20px;
line-height:1.6em;
font-weight:bold;
font-size:11px;
font-family:'arial narrow', arial;
}
#backlinks a{
text-align:right;
display:block;
}
/* Footer */
#footer{
position:relative;
bottom:0;
left:0;
padding-left:20px;
line-height:25px;
color:#888;
font-size:13px;
background:rgb(0, 0, 0);
background:rgba(0, 0, 0, 0.8);
box-shadow:0 -3px 10px #333;
-moz-box-shadow:0 -3px 10px #333;
-webkit-box-shadow:0 -3px 10px #333;
z-index:99;
}
#footer span{
display:inline-block;
}
/* content header */
#wrapper{
position:relative;
margin:3em auto;
}
#wrapper h2{
margin:0;
color:#0082E0;
text-shadow:1px 1px 1px #777;
font-size:33px;
font-family:Arial Narrow, Arial, sans-serif;
}
#wrapper h2 span{
color:#56B8FF;
}
#wrapper hgroup h3{
font-style:italic;
font-weight:normal;
font-size:18px;
text-shadow:0 1px 0 #fafafa;
color:#444;
margin:0;
}
.description{
font-style:italic;
font-size:15px;
color:#aaa;
}
#ad-holder{
position:absolute;
top:-40px;
right:10px;
}
#ad-holder div{
text-align:right;
}
#ad-holder a{
color:#ccc;
font-size:15px;
font-style:italic;
padding-left:10px;
}
/* clearfix */
.clearfix {
clear:both;
}

css3闪亮进度条效果实现思路及代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
对CSS3选择器的研究(详解)
Sep 16 HTML / CSS
css3的图形3d翻转效果应用示例
Apr 08 HTML / CSS
纯css3实现的动画按钮的实例教程
Nov 17 HTML / CSS
简单总结CSS3中视窗单位Viewport的常见用法
Feb 04 HTML / CSS
用CSS3打造HTML5的Logo(实现代码)
Jun 16 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
纯css3制作煽动翅膀的蝴蝶的示例
Apr 23 HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
HTML5拖放效果的实现代码
Nov 17 HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 HTML / CSS
关于CSS Tooltips(鼠标经过时显示)的效果
Apr 10 #HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 #HTML / CSS
纯css3(无图片/js)制作的几个社交媒体网站的图标
Mar 21 #HTML / CSS
用纯css3和html制作泡沫对话框实现代码
Mar 21 #HTML / CSS
css3一款3D字体带阴影效果的实现步骤
Mar 20 #HTML / CSS
css3 iphone玻璃透明气泡完美实现
Mar 20 #HTML / CSS
css3实现一款模仿iphone样式的注册表单
Mar 20 #HTML / CSS
ftpserver(1) OpenAI baselines(1) NFS(1) SeaTunnel(1) tfx(1) 面向接口(1) Odoo(1) tkFileDialog(1) BeautifulSoup4(2) ElementTree(1)
You might like
php生成随机数或者字符串的代码
2008/09/05 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
php实现当前页面点击下载文件的实例代码
2016/11/16 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
浅谈PHP封装CURL
2019/03/06 PHP
Yii框架布局文件的动态切换操作示例
2019/11/11 PHP
js的with语句使用方法
2007/09/21 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
最全正则表达式总结：验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
Python解析nginx日志文件
2015/05/11 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
python 内置函数汇总详解
2019/09/16 Python
python可视化实现KNN算法
2019/10/16 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
凯特王妃父母建立的派对用品网站：Party Pieces
2017/05/28 全球购物
极简鞋类，赤脚的感觉：Lems Shoes
2019/08/06 全球购物
教师自我评价范例
2013/09/24 职场文书
《宿建德江》教学反思
2014/04/23 职场文书
年终考核实施方案
2014/05/26 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
mysql查看表结构的三种方法总结
2022/07/07 MySQL