|
|
|
|
|
我們看到各種各樣的進度條,這些進度條顯示了流程的當前完成狀態(tài),例如下載或文件傳輸。無論是在構(gòu)建桌面應(yīng)用程序還是在構(gòu)建Web應(yīng)用程序,都可能需要使用此UI元素。
在本文中,將介紹如何使用CSS3創(chuàng)建時尚且具有動畫效果的進度條。
CSS3創(chuàng)建時尚且具有動畫效果的進度條
標記很簡單,代碼如下:
<div class="progress-bar blue stripes">
<span style="width: 40%"></span>
</div>
解釋
.progress-bar
-定義進度條的常規(guī)樣式。.blue
-在這種情況下,.blue
CSS類為進度欄添加了藍色樣式。.stripes
-當前進度欄的動畫類型。span
-這將幫助您填充進度欄。內(nèi)聯(lián)集width將幫助您指定fill狀態(tài)。CSS3進度欄和填充區(qū)域的常規(guī)樣式:
.progress-bar {
background-color: #1a1a1a;
height: 25px;
padding: 5px;
width: 350px;
margin: 50px 0;
border-radius: 5px;
box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}
.progress-bar span {
display: inline-block;
height: 100%;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
transition: width .4s ease-in-out;
}
我們添加一些顏色和漸變:
.blue span {
background-color: #34c2e3;
}
.orange span {
background-color: #fecf23;
background-image: linear-gradient(top, #fecf23, #fd9215);
}
.green span {
background-color: #a5df41;
background-image: linear-gradient(top, #a5df41, #4ca916);
}
.stripes span {
background-size: 30px 30px;
background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%,
transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
animation: animate-stripes 3s linear infinite;
}
@keyframes animate-stripes {
0% {
background-position: 0 0;
}
100% {
background-position: 60px 0;
}
}
.shine span {
position: relative;
}
.shine span::after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
border-radius: 3px;
animation: animate-shine 2s ease-out infinite;
}
@keyframes animate-shine {
0% {
opacity: 0;
width: 0;
}
50% {
opacity: .5;
}
100% {
opacity: 0;
width: 95%;
}
}
這個CSS3進度欄示例使用動畫的CSS3 ::after
偽元素。
基于box-shadow
屬性的CSS3關(guān)鍵幀動畫:
.glow span {
box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset,
0 -5px 5px rgba(255, 255, 255, .7) inset;
animation: animate-glow 1s ease-out infinite;
}
@keyframes animate-glow {
0% {
box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset,
0 -5px 5px rgba(255, 255, 255, .7) inset;
}
50% {
box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset,
0 -5px 5px rgba(255, 255, 255, .3) inset;
}
100% {
box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset,
0 -5px 5px rgba(255, 255, 255, .7) inset;
}
}
對于進一步的Web開發(fā),要獲得所需的結(jié)果,只需使用JavaScript或jQuery來更改這些進度條span的width值。
希望喜歡本教程。