CSS3怎么实现彩色进度条动画特效
导读：本文共1631字符，通常情况下阅读需要5分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： 代码设计利用HBulider开发工具创建jindutiao.html文件，代码如下所示：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>CSS3彩色进度条动画特效</title><link href=&... ...
目录
(为您整理了一些要点),点击可以直达。- (2):<!DOCTYPE html>
- (3):<html>
- (4):<head>
- (5):<meta charset="UTF-
- (9):</head>
- (10):<body>
- (11):<div>
- (12):<div>
- (13):<div>
- (15):<h4>HTML5</h4>
- (16):<div>
- (18):<div>65%</div>
- (19):</div>
- (20):</div>
- (21):<h4>CSS3</h4>
- (22):<div>
- (24):<div>87%</div>
- (25):</div>
- (26):</div>
- (27):<h4>J-Query</h4>
- (28):<div>
- (30):<div>55%</div>
- (31):</div>
- (32):</div>
- (33):<h4>PHP</h4>
- (34):<div>
- (36):<div>95%</div>
- (37):</div>
- (38):</div>
- (39):</div>
- (40):</div>
- (41):</div>
- (42):</div>
- (43):</body>
- (46):</html>
- (48):.demo{ background: #2c304a;
- (49):.progress-title{
- (55):.progress{
- (65):.progress .progress-bar{
- (68):-webkit-animation: animate-
- (71):.progress .progress-value{
- (87):0% { width: 0; }
- (90):0% { width: 0; }
代码设计
利用HBulider开发工具创建jindutiao.html文件，代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3彩色进度条动画特效</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/jindutiao.css"/>
</head>
<body>
<div>
<div>
<div>
<div class="col-md-offset-3 col-md-6">
<h4>HTML5</h4>
<div>
<div style="width:65%; background:#ef2d56;">
<div>65%</div>
</div>
</div>
<h4>CSS3</h4>
<div>
<div style="width:87%; background:#ff9900;">
<div>87%</div>
</div>
</div>
<h4>J-Query</h4>
<div>
<div style="width:55%; background:#82b700;">
<div>55%</div>
</div>
</div>
<h4>PHP</h4>
<div>
<div style="width:95%; background:#00ebdd;">
<div>95%</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>
创建style.css用于存放制作进度条的各种样式，代码如下所示：
.demo{ background: #2c304a;padding: 2em 0; }
.progress-title{
font-size: 18px;
font-weight: 700;
color: #fff;
margin: 0 0 20px;
}
.progress{
height: 20px;
background: #171b3c;
border-radius: 20px;
border: 1px solid #000;
box-shadow: 0 2px 2px #4f4c4c;
margin-bottom: 40px;
overflow: visible;
position: relative;
}
.progress .progress-bar{
border-radius: 20px;
border: 1px solid #000;
-webkit-animation: animate-positive 2s;
animation: animate-positive 2s;
}
.progress .progress-value{
width: 65px;
height: 25px;
line-height: 25px;
background: #171b3c;
font-size: 15px;
color: #fff;
border-radius: 0 0 15px 15px;
border: 1px solid #000;
border-top: none;
box-shadow: 0 2px 2px #4f4c4c;
position: absolute;
bottom: -25px;
right: 60px;
}
@-webkit-keyframes animate-positive{
0% { width: 0; }
}
@keyframes animate-positive{
0% { width: 0; }
}
CSS3怎么实现彩色进度条动画特效的详细内容，希望对您有所帮助，信息来源于网络。