如何使用CSS3製作彩色進度條樣式

最後更新：2018-06-20 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

這篇文章主要介紹了關於如何使用CSS3製作彩色進度條樣式，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

用CSS3的border-radius、box-shadow、transition、-moz-linear-gradient、-webkit-gradient等樣式就可以完成一個時尚進度條,這裡我們來看幾個CSS3製作彩色進度條樣式的程式碼範例分享:

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

<body><p class="progress-bar purple"> <span style="width:40%;"></span> </p></body>

css代碼：

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;   }

最終效果如所示：

二、製作靜態藍色進度條
html代碼：

<p class="progress-bar orange"> <span style="width:60%;"></span> </p>

css代碼：

.orange span{    background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#fecd22),to(#fd9415));    background-image:-moz-linear-gradient(-90deg,#fecd22,#fd9415);   }

最終效果如所示：

三、製作靜態綠色進度條
html代碼：

<p> <span style="width:80%;"></span> </p>

css代碼：

.green span{    background-color:#00ff24;    box-shadow:rgba(255,255,255,0.7)0 5px 5px inser,rgba(255,255,255,0.7)0 -5px 5px inset;    -webkit-box-shadow:rgba(255, 255, 255, 0.7) 0 5px 5px inset, rgba(255, 255, 255, 0.7) 0 -5px 5px inset;    -moz-box-shadow:rgba(255, 255, 255, 0.7) 0 5px 5px inset, rgba(255, 255, 255, 0.7) 0 -5px 5px inset;   }

最終效果如所示：

四、為紫色條紋添加動態效果
css代碼：

.purple span:hover{    -webkit-animation:animate-stripes 3s linear infinite;    -moz-animation:3s linear 0s normal none infinite animate-stripes;   }   @-webkit-keyframes animate-stripes {   0% {background-position: 0 0;} 100% {background-position: 60px 0;}   }   @-moz-keyframes animate-stripes {   0% {background-position: 0 0;} 100% {background-position: 60px 0;}   }

滑鼠放上去之後，動態效果會出現。

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More