CSS3制作彩⾊进度条样式的代码⽰例分享
⼀、制作静态的紫⾊条纹进度条
html代码：
XML/HTML Code复制内容到剪贴板
1. <body>
2. <div class="progress-bar purple"> <span ></span> </div>
3. </body>
css代码：
CSS Code复制内容到剪贴板
1. body {
2.  background-color:#333;
3. }
4. .progress-bar {
5.  background-color:#222;
6.  border-radius:3px;
7.  width:300px;
8.  height:24px;
9.  padding:5px;
10.  margin:50px;
11.  border-bottom:1px solid #444;
12.  box-shadow:inset 0 0 2px 0 #000;
13. }
14. .progress-bar span {
15.  display:inline-block;
16.  width:140px;
17.  height:24px;
18.        border-radius:2px;
19.  box-shadow:0 1px 0 rgba(255, 255, 255, 0.5) inset;
20.  -moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5) inset;
21.  -webkit-box-shadow:rgba(255,255,255,0.5) 0 1px 0 inset;
22. }
23. .purple span{
24.  background-color:#F09;
25.  background-image:-moz-linear-
gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%);
26.  background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(25%,rgba(255,255,255,0.3)),color-stop(25%,transparent),color-
stop(50%,transparent),color-stop(50%,rgba(255,255,255,0.3)),color-stop(75%,rgba(255,255,255,0.3)),color-stop(75%,transparent));
27.  background-size:16px 16px;
28. }
最终效果如下图所⽰：
⼆、制作静态的蓝⾊进度条
html代码：
XML/HTML Code复制内容到剪贴板
1. <div class="progress-bar orange"> <span ></span> </div>
css代码：
CSS Code复制内容到剪贴板
1. .orange span{
2.  background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#fecd22),to(#fd9415));
3.  background-image:-moz-linear-gradient(-90deg,#fecd22,#fd9415);
4. }
好看的css代码最终效果如下图所⽰：
三、制作静态的绿⾊进度条
html代码：
XML/HTML Code复制内容到剪贴板
1. <div> <span ></span> </div>
css代码：
CSS Code复制内容到剪贴板
1. .green span{
2.  background-color:#00ff24;
3.  box-shadow:rgba(255,255,255,0.7)0 5px 5px inser,rgba(255,255,255,0.7)0 -5px 5px inset;
4.  -webkit-box-shadow:rgba(255, 255, 255, 0.7) 0 5px 5px inset, rgba(255, 255, 255, 0.7) 0 -5px 5px inset;
5.  -moz-box-shadow:rgba(255, 255, 255, 0.7) 0 5px 5px inset, rgba(255, 255, 255, 0.7) 0 -5px 5px inset;
6. }
最终效果如下图所⽰：
四、为紫⾊条纹添加动态效果
css代码：
CSS Code复制内容到剪贴板
1. .purple span:hover{
2.  -webkit-animation:animate-stripes 3s linear infinite;
3.  -moz-animation:3s linear 0s normal none infinite animate-stripes;
4. }
5. @-webkit-keyframes animate-stripes {
6. 0% {background-position: 0 0;} 100% {background-position: 60px 0;}
7. }
8. @-moz-keyframes animate-stripes {
9. 0% {background-position: 0 0;} 100% {background-position: 60px 0;}
10. }
⿏标放上去之后，动态效果会出现。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。