CSS實現進度條和訂單進度條
最近半個月為了期末考試,可要了學渣我半瓶血啊!今天本該好好複習的,可是狀態不好,就隨便找點樂子玩一玩,於是乎就想起之前面試時面試官給的一道題(見標題),那就弄點簡單的小玩意給自己洗洗腦咯。
簡單地效果圖如下:
CSS實現進度條:
html結構:
<div id="progress"> <span>70%</span> </div>
css樣式:
#progress{ width: 50%; height: 30px; border:1px solid #ccc; border-radius: 15px; margin: 50px 0 0 100px; overflow: hidden; box-shadow: 0 0 5px 0px #ddd inset; } #progress span { display: inline-block; width: 70%; height: 100%; background: #2989d8; /* Old browsers */ background: -moz-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(33%,#2989d8), color-stop(34%,#7db9e8), color-stop(59%,#7db9e8), color-stop(60%,#2989d8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Chrome10+,Safari5.1+*/ background: -o-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Opera 11.10+ */ background: -ms-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* IE10+ */ background: linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ background-size: 60px 30px; text-align: center; color:#fff; }
對於進度條,其中的進度顏色也可以是純色,若想要用漸變的話,可以到此網站:http://www.colorzilla.com/gradient-editor/ ,這樣完成漸變效果就變得非常簡單,跟用PS的操作是一樣一樣的。將背景設定為漸變後,還需要設定background-size,這樣才能實現重複效果:
css實現訂單進度條:
html結構:
<div id="progressBar"> <!-- 進度條 --> <div> <span></span> </div> <!-- 五個圓 --> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
css樣式:
#progressBar{ width: 80%; height: 50px; position: relative; margin: 50px 0 0 100px; } #progressBar div{ width: 100%; height: 10px; position: absolute; top:50%; left: 0; margin-top:-20px; border:1px solid #ddd; background: #ccc; } #progressBar div span{ position: absolute; display: inline-block; background: green; height: 10px; width: 25%; } #progressBar>span{ position: absolute; top:0; margin-top: -10px; width: 40px; height: 40px; border:2px solid #ddd; border-radius: 50%; background: green; margin-left: -20px; color:#fff; } #progressBar>span:nth-child(1){ left: 0%; } #progressBar>span:nth-child(2){ left: 25%; background:green; } #progressBar>span:nth-child(3){ left: 50%; background:#ccc; } #progressBar>span:nth-child(4){ left: 75%; background:#ccc; } #progressBar>span:nth-child(5){ left: 100%; background:#ccc; }
然後用JS就能實現動態的進度條啦!
PS:CSS樣式沒怎麼優化,然後除錯CSS程式碼時發現第一個圓的樣式不起作用,所以才將預設背景色改成綠色,希望能幫我解決這個小BUG的博友留言一下喲,謝謝 !!!
相關推薦
CSS實現進度條和訂單進度條
最近半個月為了期末考試,可要了學渣我半瓶血啊!今天本該好好複習的,可是狀態不好,就隨便找點樂子玩一玩,於是乎就想起之前面試時面試官給的一道題(見標題),那就弄點簡單的小玩意給自己洗洗腦咯。 簡單地效果圖如下: CSS實現進度條: html結構: <div id="progress"&
Linux下實現進度條和彩色進度條
一、普通進度條 #include <stdio.h> #include <unistd.h> int main() { char buf[101] = {}; int i =0; char *
android自定義的弧形進度條和圓形進度條-SemicircleProgress
SemicircleProgress 兩個自定義圓形和弧形進度條 第一個SemicircleProgress可以對中間和下面的字自定義 第二個CircularProgressar可
MySQL實現根據當前ID讀取上一條和下一條記錄
以下為MySQL語句演示: SELECT * FROM t_news AS n ORDER BY n.`News_ID` 當前ID為4,讀取上一條記錄: SELECT * FROM t_news AS n WHERE n.`News_ID` < 4 ORD
css製作 平行四邊形和梯形導航條
1.平行四邊形 導航條 這個效果看起來不錯吧! 其實實現起來很簡單 平行四邊形的製作運用了CSS 2D變形中的skew( ) 傾斜屬性,因為我們只是在水平方向上傾斜 所以skew( x, y) 中的第二個引數指定為0,否則x,y 方向上都會發生傾斜
css實現無圖片三角形垂直導航條
效果如下: 前臺程式碼: <div id="Men"> <a href ="addnewbooks.aspx" target="_blank"><span class="left"></span>增
css實現連續數字和英文的自動換行的方法
overflow 邊界 沒有 flow bre ref wid over IE 1.(IE瀏覽器)連續的英文字符和阿拉伯數字,使用word-wrap : break-word ;或者word-break:break-all;實現強制斷行 #wrap{word-break:b
css實現 display: none和display: block的切換動畫
話不多說先上程式碼 .index-detail-list .item-contain{ display: none; overflow: hidden; padding: 14px 14px 9px; border: 1px solid #ecec
python3中給listbox新增垂直滾動條和水平滾動條
#scrolly是垂直滾動條,scrolly2是水平滾動條 scrolly=Scrollbar(win,width=25,orient=VERTICAL) scrolly.grid(row=0,column=1,padx=(0,0),pady=(250,0),s
SQL查詢當前資料以及上一條和下一條三條記錄
想查詢某個表當前資料以及上一條和下一條的記錄,網上找了一下解決辦法都不如意,按網上的方法可以查詢出三條資料,但是當查詢的這條資料沒有上一條或下一條記錄時就不行了。現在我把解決問題的sql語句放上 : 理一下思路,明確的查詢三條語句: SELECT * FROM 表名
oracle函式應用之子查詢的上一條和下一條函式
日期運算 加減年月日 1.oracle中,date型別可以直接加減天數【col-5】,和月數【add_months(col,5)】 2.加減時分秒【col-5/24/60/60】秒 3.間隔月
css實現單行文字和多行文字省略號
單行文字出現省略號的條件: <style> p { width: 200px; /*寬度*/ text-overflow: ellipsis; /*文字以省略號的方式隱藏*/ white-space: nowrap;/*禁止文字內容折行*/
mongodb update更新一條和更新多條
簡單寫法,如下,匹配到,只更新第一條記錄 db.swxx.update({"ZJHM":"xxxxxxxxxxxxxxxxxx"},{"ZJHM":"23060419730523301X"}) 後面加上可以更新多條的第四個引數,這時候需要用$set操作才能更新多條 db.
關於MySqL資料庫查詢當前資料的上一條和下一條資料
如上圖所示第14行資料的上一條和下一條,id都不是連續的,因此意圖通過id-1或者id+1是肯定行不通的,那麼怎麼辦呢?其實也簡單就是查詢比id=14小的元素中的最大值,比id=14大的元素中的最小
mysql查詢上一條和下一條資訊
設MySQL中有一個形如下表的資料表,表名為test: +------+------+---------------+ | ID | No | Other | +------+------+---------------+ | 1 | 1 | Some other
mysql查詢表中前一條和後一條資料
標題 1.查詢前一條記錄: select * from 表名 where id = (select id from 表名 where ranking < #{ranking,
CSS實現實心三角形和空心三角形
一次開發中遇到,記錄程式碼 原理: 1.給一個div,寬和高都為0的時候,盒子什麼都沒有看起來。為空白 2.給一個寬高為0的盒子給一遍畫素給100px的上邊,下邊和右邊, .jiao{ position: relative; //box-sizing: border-b
elementUI樹狀圖豎向滾動條和橫向滾動條問題
在使用vue時,就會有使用到elementUI,之後就是不斷的在入坑和天坑之間徘徊。 elementUI中有個隱藏的元件,就是滾動條-----<el-scrollbar></el-scrollbar> 可以參考elementUI的官網程式碼 這裡用
安卓MP3播放器開發實例(3)之進度條和歌詞更新的實現
tac run detail datetime style mem poll() arc call 上一次談了音樂播放的實現,這次說下最復雜的進度條和歌詞更新。因為須要在播放的Activity和播放的Service間進行交互,所以就涉及了Activi
【CSS】靜態螺紋進度條和靜態流程佈局
為了方便複用,在此記錄一下! 效果如圖所示 css核心程式碼: .active{ background-color:#fea6a2; background-image:repeating-linear-gradient(135deg, transparent 0