CSS3制作彩色進(jìn)度條樣式的代碼示例分享
rainleaves 發(fā)布時(shí)間:2016-06-23 12:15:04 作者:雨打浮萍
我要評(píng)論

用CSS3的border-radius、box-shadow、transition、-moz-linear-gradient、-webkit-gradient等樣式就可以完成一個(gè)時(shí)尚進(jìn)度條,這里我們來看幾個(gè)CSS3制作彩色進(jìn)度條樣式的代碼示例分享:
一、制作靜態(tài)的紫色條紋進(jìn)度條
html代碼:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <body>
- <div class="progress-bar purple"> <span style="width:40%;"></span> </div>
- </body>
css代碼:
CSS Code復(fù)制內(nèi)容到剪貼板
- 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;
- }
最終效果如下圖所示:
二、制作靜態(tài)的藍(lán)色進(jìn)度條
html代碼:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <div class="progress-bar orange"> <span style="width:60%;"></span> </div>
css代碼:
CSS Code復(fù)制內(nèi)容到剪貼板
- .orange span{
- background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#fecd22),to(#fd9415));
- background-image:-moz-linear-gradient(-90deg,#fecd22,#fd9415);
- }
最終效果如下圖所示:
三、制作靜態(tài)的綠色進(jìn)度條
html代碼:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <div> <span style="width:80%;"></span> </div>
css代碼:
CSS Code復(fù)制內(nèi)容到剪貼板
- .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;
- }
最終效果如下圖所示:
四、為紫色條紋添加動(dòng)態(tài)效果
css代碼:
CSS Code復(fù)制內(nèi)容到剪貼板
- .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;}
- }
鼠標(biāo)放上去之后,動(dòng)態(tài)效果會(huì)出現(xiàn)。
相關(guān)文章
CSS Bootstrap炫酷進(jìn)度條動(dòng)畫樣式效果
這是一組炫酷的Bootstrap進(jìn)度條動(dòng)畫樣式,通過CSS代碼來進(jìn)行美化,制作炫酷的進(jìn)度條動(dòng)畫樣式效果,歡迎下載2017-11-03CSS3結(jié)合jQuery實(shí)現(xiàn)的3中不同樣式手動(dòng)控制的進(jìn)度條效果
不需要?jiǎng)赢嬓Ч恍枰狢SS3即可,只需要簡(jiǎn)單的代碼即可手動(dòng)控制進(jìn)度顯示的比例2013-04-28使用css實(shí)現(xiàn)物流進(jìn)度的樣式的實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了使用css實(shí)現(xiàn)物流進(jìn)度的樣式,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-10-23