梦是一种欲望，想是一种行动。梦想是梦与想的结晶。当心灵趋于平静时，精神便是永恒！把欲望降到最低点，把理性升华到最高点，你会感受到：平安是福，清新是禄，寡欲是寿！
一、制作静态的紫色条纹进度条
html代码：
XML/HTML Code复制内容到剪贴板
- <body>
- <divclass="progress-barpurple"><spanstyle="width:40%;"></span></div>
- </body>
css代码：
CSS Code复制内容到剪贴板
- body{
- background-color:#333;
- }
- .progress-bar{
- background-color:#222;
- border-radius:3px;
- width:300px;
- height:24px;
- padding:5px;
- margin:50px;
- border-bottom:1pxsolid#444;
- box-shadow:inset002px0#000;
- }
- .progress-barspan{
- display:inline-block;
- width:140px;
- height:24px;
- border-radius:2px;
- box-shadow:01px0rgba(255,255,255,0.5)inset;
- -moz-box-shadow:01px0rgba(255,255,255,0.5)inset;
- -webkit-box-shadow:rgba(255,255,255,0.5)01px0inset;
- }
- .purplespan{
- background-color:#F09;
- background-image:-moz-linear-gradient(45deg,rgba(255,255,255,0.3)25%,transparent25%,transparent50%,rgba(255,255,255,0.3)50%,rgba(255,255,255,0.3)75%,transparent75%);
- background-image:-webkit-gradient(linear,0100%,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));
- background-size:16px16px;
- }
最终效果如下图所示：
二、制作静态的蓝色进度条
html代码：
XML/HTML Code复制内容到剪贴板
- <divclass="progress-barorange"><spanstyle="width:60%;"></span></div>
css代码：
CSS Code复制内容到剪贴板
- .orangespan{
- background-image:-webkit-gradient(linear,0%0%,0%100%,from(#fecd22),to(#fd9415));
- background-image:-moz-linear-gradient(-90deg,#fecd22,#fd9415);
- }
最终效果如下图所示：
三、制作静态的绿色进度条
html代码：
XML/HTML Code复制内容到剪贴板
- <div><spanstyle="width:80%;"></span></div>
css代码：
CSS Code复制内容到剪贴板
- .greenspan{
- background-color:#00ff24;
- box-shadow:rgba(255,255,255,0.7)05px5pxinser,rgba(255,255,255,0.7)0-5px5pxinset;
- -webkit-box-shadow:rgba(255,255,255,0.7)05px5pxinset,rgba(255,255,255,0.7)0-5px5pxinset;
- -moz-box-shadow:rgba(255,255,255,0.7)05px5pxinset,rgba(255,255,255,0.7)0-5px5pxinset;
- }
最终效果如下图所示：
四、为紫色条纹添加动态效果
css代码：
CSS Code复制内容到剪贴板
- .purplespan:hover{
- -webkit-animation:animate-stripes3slinearinfinite;
- -moz-animation:3slinear0snormalnoneinfiniteanimate-stripes;
- }
- @-webkit-keyframesanimate-stripes{
- 0%{background-position:00;}100%{background-position:60px0;}
- }
- @-moz-keyframesanimate-stripes{
- 0%{background-position:00;}100%{background-position:60px0;}
- }
鼠标放上去之后，动态效果会出现。
到此这篇关于CSS3制作彩色进度条样式的代码示例分享就介绍到这了。人远比自己想象的要，特别是当你回头看看的时候，你会发现自己走了一段自己都没想到的路。生活可以漂泊，可以，但灵魂必须有所归依。只要你地说出再见，生活一定会赐予你一个新的开始。更多相关CSS3制作彩色进度条样式的代码示例分享内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
