當(dāng)前位置：首頁(yè) > 前端技术 > CSS >内容正文

CSS

CSS3制作一个简单的进度条

發(fā)布時(shí)間：2023/12/31 CSS 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS3制作一个简单的进度条小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

這里只是一個(gè)小demo,一個(gè)用CSS3寫的進(jìn)度條。
如圖所示：

具體代碼如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1"> <style> .process-bar {width:100px;display:inline-block;*zoom:1; } .pb-wrapper {border:1px solid #cfd0d2;position:relative;background:#cfd0d2;border-radius: 8px; } .pb-container {height:12px;position:relative;left:-1px;margin-right:-2px;font:1px/0 arial;padding:1px; } .pb-highlight {position:absolute;left:0;top:0;_top:1px;width:100%;opacity:0.6;filter:alpha(opacity=60);height:6px;background:white;font-size:1px;line-height:0;z-index:1 } .pb-text {width:100%;position:absolute;left:0;top:0;text-align:center;font:10px/12px arial;color:black;font:10px/12px arial } </style> </head> <body><div class="process-bar skin-green"><div class="pb-wrapper"><div class="pb-highlight"></div><div class="pb-container"><div class="pb-text">50%</div><div class="pb-value" style="height: 100%;width: 50%;background: #19d73d;border-radius: 8px;"></div></div></div></div> </body> </html>

總結(jié)

以上是生活随笔為你收集整理的CSS3制作一个简单的进度条的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。