CSS3 画桶图（类似数据库或者磁盘的抽象图）

来源：互联网发布：日版手机网络锁编辑：程序博客网时间：2024/06/03 23:42

先看最终图形效果：

主要的DOM就一个：

<div class="disk" data-content="0"></div>

看CSS，没考虑兼容性，但目前IE11，Chrome 46都没问题：

.disk{height:150px;width:100px;background:#efefef;border-left:2px solid #ddd;border-right:2px solid #ddd;background: linear-gradient(to bottom,#efefef 100%,#ccc 0%);}.disk:before{display: block;content: attr(data-content) '%';height: 30px;width: 100%;border: 2px solid #ddd;border-radius: 50%;transform: rotateX(40deg);background-color: #efefef;text-align: center;line-height: 1.5em;position: relative;top: -15px;left:-2px;}.disk:after{display: block;content: "";height:30px;width:100%;border:2px solid #ddd;border-top:0px;transform: rotateX(40deg);background: linear-gradient(to bottom,rgba(239,239,239,0) 40%,#efefef 50%);border-radius: 50%;border-top-left-radius: 0px;border-top-right-radius: 0px;border-bottom-left-radius: 50%;border-bottom-right-radius: 50%;position: relative;top: 100px;left:-2px;}

动态改变填充部分代码需要用jQuery和一个addRule的插件，因为要修改:after的样式，jQuery不支持目前

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script><script type="text/javascript">/*! * jquery.addrule.js 0.0.2 - https://gist.github.com/yckart/5563717/ * Add css-rules to an existing stylesheet. * * @see http://stackoverflow.com/a/16507264/1250044 * * Copyright (c) 2013 Yannick Albert (http://yckart.com) * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php). * 2013/11/23 **/(function ($) {    window.addRule = function (selector, styles, sheet) {        styles = (function (styles) {            if (typeof styles === "string") return styles;            var clone = "";            for (var prop in styles) {                if (styles.hasOwnProperty(prop)) {                    var val = styles[prop];                    prop = prop.replace(/([A-Z])/g, "-$1").toLowerCase(); // convert to dash-case                    clone += prop + ":" + (prop === "content" ? '"' + val + '"' : val) + "; ";                }            }            return clone;        }(styles));        sheet = sheet || document.styleSheets[document.styleSheets.length - 1];        if (sheet.insertRule) sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);        else if (sheet.addRule) sheet.addRule(selector, styles);        return this;    };    if ($) $.fn.addRule = function (styles, sheet) {        addRule(this.selector, styles, sheet);        return this;    };}(this.jQuery || this.Zepto));</script>

下面看具体的修改逻辑：

<script type="text/javascript">function add(val){if(val == 0){$(".disk:after").addRule({backgroundImage: "linear-gradient(to bottom, rgba(239, 239, 239, 0) 40%, #efefef 50%)"});$(".disk").css({backgroundImage: "linear-gradient(to bottom, #efefef 100%, #ccc 0%)"});}else if(val > 0 && val <= 100){$(".disk:after").addRule({backgroundImage: "linear-gradient(to bottom, rgba(239, 239, 239, 0) 40%, #ccc 50%)"});$(".disk").css({backgroundImage: "linear-gradient(to bottom, #efefef " + (100-val) + "%, #ccc 0%)"});}$(".disk").attr('data-content',val);}</script>

有个网址是用CSS画各种图的集合：https://css-tricks.com/examples/ShapesOfCSS/，有兴趣的自己可以看看，但没有这种简单的桶装图

==========================================================================

实际在项目中，没有用这种一个DOM的结构，因为这样虽然DOM结构简单了，但修改填充就麻烦了。可以用下面这种多个DIV结构，修改填充就简单点：

<div class="disk-chart"><div class="top"><span>{{percentage}}%</span></div><div class="middle"></div><div class="bottom"></div></div>

项目中的样子：

0 0