如何使用CSS3製作彩色進度條樣式-css教學-PHP中文網

首頁

web前端

css教學

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

不言

Jun 20, 2018 pm 05:59 PM

css3 進度條

這篇文章主要介紹了關於如何使用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;   
}

登入後複製

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

二、製作靜態的藍色進度條
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);   
}

登入後複製

最終效果如下圖：

2016623121331800.jpg (330×50)

三、製作靜態的綠色進度條
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;   
}

登入後複製

最終效果如下圖所示：

2016623121411191.jpg (325×43)

四、為紫色條紋加入動態效果
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;}   
}

登入後複製

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

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

熱AI工具

熱工具

熱門話題

Java教學

1664

CakePHP 教程

1423

Laravel 教程

1318

PHP教程

1268

C# 教程

1248

Related knowledge

純CSS3怎麼實現波浪效果？（程式碼範例） Jun 28, 2022 pm 01:39 PM

純CSS3怎麼實現波浪效果？這篇文章就來跟大家介紹一下使用 SVG 和 CSS 動畫來製作波浪效果的方法，希望對大家有幫助！

巧用CSS實現各種奇形怪狀按鈕（附代碼） Jul 19, 2022 am 11:28 AM

這篇文章帶大家看看怎麼使用 CSS 輕鬆實現高頻出現的各類奇形怪狀按鈕，希望對大家有幫助！

css怎麼隱藏元素但不佔空間 Jun 01, 2022 pm 07:15 PM

兩種方法：1、利用display屬性，只要為元素加上「display:none;」樣式即可。 2.利用position和top屬性設定元素絕對定位來隱藏元素，只需為元素加上「position:absolute;top:-9999px;」樣式。

如何使用HTML和CSS設定進度條的顏色？ Sep 19, 2023 pm 08:25 PM

在網站開發中，進度條是網站的重要組成部分。進度條顯示了進程的進度。借助它，用戶可以看到網站上正在進行的工作的狀態，包括載入時間、文件上傳、文件下載和其他類似任務。預設情況下，它呈灰色。然而，為了使進度條突出並具有視覺吸引力，可以使用HTML和CSS來改變它們的顏色。什麼是進度條？進度條用於顯示任務的進度。它是一個圖形使用者介面元素。它基本上由一個水平條組成，隨著任務的進行逐漸填充，同時伴隨著百分比值或其他完成指示器。進度條在網路應用程式中用於向使用者提供關於完成諸如文件上傳、文件下載或軟體安裝等過

JavaScript 如何實作頁面載入進度條功能？ Oct 27, 2023 am 08:57 AM

JavaScript如何實作頁面載入進度條功能？在現代網路應用中，頁面載入速度是使用者體驗的關鍵因素之一。為了向使用者展示載入過程，許多網站和應用程式會使用載入進度條。 JavaScript提供了一種簡單而有效的方法來實作頁面載入進度條功能。具體實現過程如下：建立HTML結構首先，在頁面的適當位置建立進度條的HTML結構，常見的是將進度條放置在

如何使用Vue實現進度條特效 Sep 19, 2023 am 09:22 AM

如何使用Vue實現進度條特效進度條是常見的一種介面元素，它可以用來展示一個任務或操作的完成情況。在Vue框架中，我們可以透過一些簡單的程式碼來實現進度條的特效效果。本文將介紹如何使用Vue來實現進度條特效，並提供具體程式碼範例。建立Vue元件首先，我們需要建立一個Vue元件來實現進度條的功能。在Vue中，元件是可以重複使用的，我們可以在多個地方使用。建立一個名為Pro