CSS3制作彩色进度条样式的代码示例分享

时间：2021-05-08

一、制作静态的紫色条纹进度条
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邮箱联系删除。

    相关文章