十年風雨路 · 一心鑄精品

接一個官網 留一件精品 做一個項目 樹一塊樣板

CSS漸變統計柱形圖

用作圖工具作一個漸變的長度.看起來能好看一點(寬:187px;高15px) 本來設想是當12%時,圖片從左到12%的位置顯示,余下的88%不顯示,但不占地(看起來和1px的圖片底沒什么區別).下午時去網羅了一班.發現不占地是不太可能的. 要隱藏圖片余下的百分比,先想到了評分.亮和暗用了一張圖片,各占圖片總高度的一半.我寫下了: 依次從10%-100%,見不到效果,換這個是可以不過在盒子內必須要有內容. 昨天晚上沒寫出來.下午google了也沒有找到類4漸變的.不過從其中一個示例中得到了靈感. URL

時間:2013年01月15日 點擊量:

用作圖工具作一個漸變的長度.看起來能好看一點(寬:187px;高15px)
本來設想是當12%時,圖片從左到12%的位置顯示,余下的88%不顯示,但不占地(看起來和1px的圖片底沒什么區別).下午時去網羅了一班.發現不占地是不太可能的.
要隱藏圖片余下的百分比,先想到了評分.亮和暗用了一張圖片,各占圖片總高度的一半.我寫下了:
<div style="background:url(...) 12% left;width:187px;height:15px;"></div>
依次從10%-100%,見不到效果,換<span></span>這個是可以不過在盒子內必須要有內容.
昨天晚上沒寫出來.下午google了也沒有找到類4漸變的.不過從其中一個示例中得到了靈感.
URL:http://apples-to-oranges.com/blog/post/css-for-bar-graphs/?id=55
中的:Complex CSS Bar Graph
馬上得到了這個:

[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
有同需求的兄弟可以參考一下

推薦案例

  • 成都森美啦園林綠化工程公

  • 四川尚恒科技有限公司

  • 成都九邦物流有限責任公司

  • 四川品睿餐飲管理有限公司

  • 美繪陶社陶藝手繪工作室-暖

  • 成都恩多施生物工程技術有

  • 汶川羌人土特產有限公司

  • 印刷設計公司網站No.3138

聯系我們 / CONTACT US

  • 四川省成都市金牛區五福橋東路229號龍湖北城天街28棟903室
  • 服務熱線:400-000-2367 028-86088588
  • 總機:028-62322623-0
  • 傳真:028-62322623-823

掃碼訪問冠辰手機網站

版權所有 Copyright © 2002-2019 四川冠辰科技開發有限公司  www.ecflea.live 保留所有權利  蜀ICP備11012605號

地址:四川省成都市金牛區五福橋東路229號龍湖北城天街28棟903室

服務熱線:400-000-2367 028-86088588 總機:028-62322623-0 傳真:028-62322623-823