CSS3制作彩色進度條樣式的代碼示例分享

2024-07-11 08:32:46

字體：大中小

來源：轉載

供稿：網友

一、制作靜態的紫色條紋進度條
html代碼：

XML/HTML Code復制內容到剪貼板

<body> <div class="progress-bar purple"> <span style="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:1px solid #444; box-shadow:inset 0 0 2px 0 #000;
} .progress-bar span {
display:inline-block; width:140px;
height:24px; border-radius:2px;
box-shadow:0 1px 0 rgba(255, 255, 255, 0.5) inset; -moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow:rgba(255,255,255,0.5) 0 1px 0 inset; }
.purple span{ background-color:#F09;
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%); 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));
background-size:16px 16px; }

最終效果如下圖所示：
2016623121249918.jpg (340×70)