CSS3制作彩色进度条样式的代码示例分享
2021-05-08 21:10:41 一、制作静态的紫色条纹进度条
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;}}鼠标放上去之后，动态效果会出现。
声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。 如涉及版权问题，请提交至online#300.cn邮箱联系删除。
网站建设 IT知识 IT知识教程 CSS3制作彩色进度条样式的代码示例分享 
最新文章
热门文章
猜你喜欢
