亚洲必赢登录 > 亚洲必赢app > 用CSS和SVG制作饼图,使用CSS3画出三个叮当猫

原标题:用CSS和SVG制作饼图,使用CSS3画出三个叮当猫

浏览次数:97 时间:2019-10-05

CSS 最基本的几个概念

2017/07/14 · CSS · CSS

原稿出处: geekplux.   

正文将陈说 CSS 中最中央的多少个概念,包罗:盒模型、position、float等。这个是 CSS 的基本功,也是最常用的多少个属性,它们中间就如独立却又相反相成。为了操纵它们,有不可缺少写出来切磋一下,如有错误款待指正。

后边一个程序猿应该驾驭的 CSS 进化史

2016/07/20 · CSS · 2 评论 · 进化史

本文由 伯乐在线 - 刘唱 翻译,艾凌风 校稿。未经许可,制止转发!
斯洛伐克语出处:Sheena Lyonnais。应接参加翻译组。

CSS生日欢欣!你早晚地在你短命的性命里爆发了光辉的震慑,永久地改成了互联网的审美。

层叠样式表(CSS)就好像一个人神童,从一开头就显示出了宏伟的潜能。当它还在“青春期”努力地搜索宽容性的时候,这种体制语言就早就征服了绝大许多的阻碍并表明了温馨能够成为Web手艺的根本。

让大家想起一下迄今CSS的平生。

毫不再在 JavaScript 中写 CSS 了

2017/06/28 · CSS · CSS, Javascript

本文由 伯乐在线 - 古鲁伊 翻译。未经许可,幸免转发!
俄语出处:Gajus Kuizinas。欢迎参预翻译组。

正文我是 react-css-modules 和 babel-plugin-react-css-modules 的撰稿人。并不是对 CSS in JavaScript: The future of component-based styling,或是使用样式组件的不予,而是一种补偿,web 开辟者要打听本身的须求,通晓自个儿使用 styled-components 的着实原因。

使用CSS3画出一个叮当猫

2015/08/03 · CSS · 1 评论 · CSS3

初稿出处: 郭锦荣   

刚上学了那几个案例,然后感到比较有意思,就演练了弹指间。然后开掘其实也轻松,假诺您时临时使用PS也许Flash的话,应该就能精通画个叮当猫是很轻易的事,最少小编是如此以为。然则,用CSS3画出来确实是率先次接触,所以很乐于去品尝一下,对于作者这种新手,确实是协理众多,最少明白怎么去画多个简单易行的人物形象出来,再加上有的卡通效果,就活了,那就越来越风趣了!OK,先导在此以前,先把效能图晒一下:

亚洲必赢登录 1

PS:讲真的,作者认为挺可爱的,小时候平时看多呐A梦,猝然觉获得很紧凑,很天真,弹指间年轻了广大,哈哈!亚洲必赢登录 2

首先,先把HTML结构搭建好:

XHTML

<div class="wrapper"> <!--叮当猫全体--> <div class="doraemon"> <!--头部--> <div class="head"> <!--眼睛--> <div class="eyes"> <div class="eye left"> <!--眼珠--> <div class="black bleft"></div> </div> <div class="eye right"> <div class="black bright"></div> </div> </div> <!--脸部--> <div class="face"> <!--紫铜色脸底--> <div class="white"></div> <!--鼻子--> <div class="nose"> <!--鼻子视网膜病变部分--> <div class="light"></div> </div> <!--鼻子的竖线--> <div class="nose_line"></div> <!--嘴巴--> <div class="mouth"></div> <!--胡须--> <div class="whiskers"> <div class="whisker rTop r160"></div> <div class="whisker rMiddle"></div> <div class="whisker rBottom r20"></div> <div class="whisker lTop r20"></div> <div class="whisker lMiddle"></div> <div class="whisker lBottom r160"></div> </div> </div> </div> <!--脖子和铃铛--> <div class="choker"> <!--铃铛--> <div class="bell"> <div class="bell_line"></div> <div class="bell_circle"></div> <div class="bell_under"></div> <div class="bell_light"></div> </div> </div> <!--身体--> <div class="bodys"> <!--肚子--> <div class="body"></div> <!--肚兜--> <div class="wraps"></div> <!--口袋--> <div class="pocket"></div> <!--遮住八分之四口袋,使其表现半圆--> <div class="pocket_mask"></div> </div> <!--右手--> <div class="hand_right"> <!--手臂--> <div class="arm"></div> <!--手掌--> <div class="circle"></div> <!--遮住手臂和人体交接处的线--> <div class="arm_rewrite"></div> </div> <!--左手--> <div class="hand_left"> <div class="arm"></div> <div class="circle"></div> <div class="arm_rewrite"></div> </div> <!--脚--> <div class="foot"> <div class="left"></div> <div class="right"></div> <!--两脚之间的缝缝--> <div class="foot_rewrite"></div> </div> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<div class="wrapper">
    <!--叮当猫整体-->
    <div class="doraemon">
        <!--头部-->
        <div class="head">
            <!--眼睛-->
            <div class="eyes">
                <div class="eye left">
                    <!--眼珠-->
                    <div class="black bleft"></div>
                </div>
                <div class="eye right">
                    <div class="black bright"></div>
                </div>
            </div>
            <!--脸部-->
            <div class="face">
                <!--白色脸底-->
                <div class="white"></div>
                <!--鼻子-->
                <div class="nose">
                    <!--鼻子高光部分-->
                    <div class="light"></div>
                </div>
                <!--鼻子的竖线-->
                <div class="nose_line"></div>
                <!--嘴巴-->
                <div class="mouth"></div>
                <!--胡须-->
                <div class="whiskers">
                    <div class="whisker rTop r160"></div>
                    <div class="whisker rMiddle"></div>
                    <div class="whisker rBottom r20"></div>
                    <div class="whisker lTop r20"></div>
                    <div class="whisker lMiddle"></div>
                    <div class="whisker lBottom r160"></div>
                </div>
            </div>
        </div>
        <!--脖子和铃铛-->
        <div class="choker">
            <!--铃铛-->
            <div class="bell">
                <div class="bell_line"></div>
                <div class="bell_circle"></div>
                <div class="bell_under"></div>
                <div class="bell_light"></div>
            </div>
        </div>
        <!--身体-->
        <div class="bodys">
            <!--肚子-->
            <div class="body"></div>
            <!--肚兜-->
            <div class="wraps"></div>
            <!--口袋-->
            <div class="pocket"></div>
            <!--遮住一半口袋,使其呈现半圆-->
            <div class="pocket_mask"></div>
        </div>
        <!--右手-->
        <div class="hand_right">
            <!--手臂-->
            <div class="arm"></div>
            <!--手掌-->
            <div class="circle"></div>
            <!--遮住手臂和身子交接处的线-->
            <div class="arm_rewrite"></div>
        </div>
        <!--左手-->
        <div class="hand_left">
            <div class="arm"></div>
            <div class="circle"></div>
            <div class="arm_rewrite"></div>
        </div>
        <!--脚-->
        <div class="foot">
            <div class="left"></div>
            <div class="right"></div>
             <!--双脚之间的缝隙-->
            <div class="foot_rewrite"></div>
        </div>
    </div>
</div>

最佳先把叮当猫的一体化结构致密钻探一下,那对以后想要自身入手画别的人物形象很有救助,思路会相比较明朗。

接下来,大家根据尾部,脖子,身体,脚部分别实行身体力行。首先将容器wrapper和叮当猫全体做一些主导的样式,叮当猫全部doraemon 设置position为relative,主即便为着便于 子元素/后代成分进行固化。

CSS

.wrapper{ margin: 50px 0 0 500px; } .doraemon{ position: relative; }

1
2
3
4
5
6
.wrapper{
    margin: 50px 0 0 500px;
}
.doraemon{
    position: relative;
}

头部head的样式,因为叮当猫的头顶不是正圆,所以宽高有几许谬误,然后使用border-radius将底部从矩形变成圆柱形,然后再利用径向渐变从右上角给背景来个放射性渐变,然后在加个影子,使其更有立体感,background:#07bbee;是为了合营低版本浏览器:

CSS

.doraemon .head { position:relative; width: 320px; height: 300px; border-radius: 150px; background: #07bbee; background: -webkit-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000); background: -moz-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000); background: -ms-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000); border:2px solid #555; box-shadow:-5px 10px 15px rgba(0,0,0,0.45); }

1
2
3
4
5
6
7
8
9
10
11
12
.doraemon .head {
            position:relative;
            width: 320px;
            height: 300px;
            border-radius: 150px;
            background: #07bbee;
            background: -webkit-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
            background: -moz-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
            background: -ms-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);          
            border:2px solid #555;
            box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
}

拜望效果到底如何:

亚洲必赢登录 3

亚洲必赢登录 4 shenmgui ,这么丑,别急,逐步让它活过来:

CSS

/*脸部*/ .doraemon .face { position: relative; /*让具备脸部成分可自由一定*/ z-index: 2; /*脸在头顶背景上边*/ } /*绿蓝脸底*/ .doraemon .face .white { width: 265px; /*安装宽高*/ height: 195px; border-radius: 150px; position: absolute; /*用CSS和SVG制作饼图,使用CSS3画出三个叮当猫。举行相对定位*/ top: 75px; left: 25px; background: #fff; /*此放射渐变也是使脸的左下角暗一些,看上去更诚实*/ background: -webkit-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444); background: -moz-radial-gradient(right top,#fff 75%,#亚洲必赢登录,eee 80%,#999 90%,#444); background: –ms-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444); } /*鼻子*/ .doraemon .face .nose{ width:30px; height:30px; border-radius:15px; background:#c93300; border:2px solid #000; position:absolute; top:110px; left:140px; z-index:3; /*鼻头在桃红脸底上边*/ } /*鼻头上的青光眼*/ .doraemon .face .nose .light { width:10px; height:10px; border-radius: 5px; box-shadow: 19px 8px 5px #fff; /*因此阴影达成沙眼*/ } /*鼻头下的线*/ .doraemon .face .nose_line{ width:3px; height:100px; background:#333; position:absolute; top:143px; left:155px; z-index:3; } /*嘴巴*/ .doraemon .face .mouth{ width:220px; height:400px; /*透过尾巴部分框加上圆角模拟微笑嘴巴*/ border-bottom:3px solid #333; border-radius:120px; position:absolute; top:-160px; left:45px; } /*眼睛*/ .doraemon .eyes { position: relative; z-index: 3; /*肉眼在浅黄脸底上面*/ } /*肉眼共同的体制*/ .doraemon .eyes .eye{ width:72px; height:82px; background:#fff; border:2px solid #000; border-radius:35px 35px; position:absolute; top:40px; } /*眼珠*/ .doraemon .eyes .eye .black{ width:14px; height:14px; background:#000; border-radius:7px; position:absolute; top:40px; } .doraemon .eyes .left{ left:82px; } .doraemon .eyes .right { left: 156px; } .doraemon .eyes .eye .bleft { left: 50px; } .doraemon .eyes .eye .bright { left: 7px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
/*脸部*/
         .doraemon .face {
             position: relative; /*让所有脸部元素可自由定位*/
             z-index: 2;    /*脸在头部背景上面*/
         }
        /*白色脸底*/
        .doraemon .face .white {
            width: 265px;       /*设置宽高*/
            height: 195px;
            border-radius: 150px;
            position: absolute; /*进行绝对定位*/
            top: 75px;
            left: 25px;
            background: #fff;
            /*此放射渐变也是使脸的左下角暗一些,看上去更真实*/
            background: -webkit-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
            background: -moz-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
            background: –ms-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);        
         }
        /*鼻子*/
         .doraemon .face .nose{
             width:30px;
             height:30px;
             border-radius:15px;
             background:#c93300;
             border:2px solid #000;
             position:absolute;
             top:110px;
             left:140px;
             z-index:3;   /*鼻子在白色脸底下面*/
         }
        /*鼻子上的高光*/
        .doraemon .face .nose .light {
            width:10px;
            height:10px;
            border-radius: 5px;
            box-shadow: 19px 8px 5px #fff;  /*通过阴影实现高光*/
        }
         /*鼻子下的线*/
         .doraemon .face .nose_line{
             width:3px;
             height:100px;
             background:#333;
             position:absolute;
             top:143px;
             left:155px;
             z-index:3;
         }
         /*嘴巴*/
         .doraemon .face .mouth{
             width:220px;
             height:400px;
             /*通过底边框加上圆角模拟微笑嘴巴*/
             border-bottom:3px solid #333;
             border-radius:120px;
             position:absolute;
             top:-160px;
             left:45px;
         }
         /*眼睛*/
        .doraemon .eyes {
            position: relative;
            z-index: 3; /*眼睛在白色脸底下面*/
        }
        /*眼睛共同的样式*/
        .doraemon .eyes .eye{
            width:72px;
            height:82px;
            background:#fff;
            border:2px solid #000;
            border-radius:35px 35px;
            position:absolute;
            top:40px;
        }
        /*眼珠*/
        .doraemon .eyes .eye .black{
            width:14px;
            height:14px;
            background:#000;
            border-radius:7px;
            position:absolute;
            top:40px;
        }
        .doraemon .eyes .left{
            left:82px;
        }
        .doraemon .eyes .right {
            left: 156px;
        }
        .doraemon .eyes .eye .bleft {
            left: 50px;
        }
 
        .doraemon .eyes .eye .bright {
            left: 7px;
        }

写了这么三种式,结果是什么的吧:

亚洲必赢登录 5

亚洲必赢登录 6 怎么看都是为别别扭扭,哦!还差胡须须和反动脸底的边框呢,咱给补上:

CSS

/*胡须背景,主要用于挡住嘴巴的一局地,不要显得太长*/ .doraemon .whiskers{ width:220px; height:80px; background:#fff; border-radius:15px; position:absolute; top:120px; left:45px; z-index:2; /*在鼻子和眼睛下边*/ } /*具备胡子的公用样式*/ .doraemon .whiskers .whisker { width: 60px; height: 2px; background: #333; position: absolute; z-index: 2; } /*右上胡子*/ .doraemon .whiskers .rTop { left: 165px; top: 25px; } /*右中胡子*/ .doraemon .whiskers .rMiddle { left: 167px; top: 45px; } /*右下胡子*/ .doraemon .whiskers .rBottom { left: 165px; top: 65px; } /*左上胡子*/ .doraemon .whiskers .lTop { left: 0; top: 25px; } /*左中胡子*/ .doraemon .whiskers .lMiddle { left: -2px; top: 45px; } /*左下胡子*/ .doraemon .whiskers .lBottom { left: 0; top: 65px; } /*胡子旋转角度*/ .doraemon .whiskers .r160 { -webkit-transform: rotate(160deg); -moz-transform: rotate(160deg); -ms-transform: rotate(160deg); -o-transform: rotate(160deg); transform: rotate(160deg); } .doraemon .whiskers .r20 { -webkit-transform: rotate(200deg); -moz-transform: rotate(200deg); -ms-transform: rotate(200deg); -o-transform: rotate(200deg); transform: rotate(200deg); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
/*胡须背景,主要用于挡住嘴巴的一部分,不要显得太长*/
        .doraemon .whiskers{
            width:220px;
            height:80px;
            background:#fff;
            border-radius:15px;
            position:absolute;
            top:120px;
            left:45px;
            z-index:2;   /*在鼻子和眼睛下面*/
        }
        /*所有胡子的公用样式*/
        .doraemon .whiskers .whisker {
            width: 60px;
            height: 2px;
            background: #333;
            position: absolute;
            z-index: 2;
        }
        /*右上胡子*/
        .doraemon .whiskers .rTop {
            left: 165px;
            top: 25px;
        }
        /*右中胡子*/
        .doraemon .whiskers .rMiddle {
            left: 167px;
            top: 45px;
        }
        /*右下胡子*/
        .doraemon .whiskers .rBottom {
            left: 165px;
            top: 65px;
        }
        /*左上胡子*/
        .doraemon .whiskers .lTop {
            left: 0;
            top: 25px;
        }
        /*左中胡子*/
        .doraemon .whiskers .lMiddle {
            left: -2px;
            top: 45px;
        }
        /*左下胡子*/
        .doraemon .whiskers .lBottom {
            left: 0;
            top: 65px;
        }
        /*胡子旋转角度*/
        .doraemon .whiskers .r160 {
            -webkit-transform: rotate(160deg);
            -moz-transform: rotate(160deg);
            -ms-transform: rotate(160deg);
            -o-transform: rotate(160deg);
            transform: rotate(160deg);
        }
        .doraemon .whiskers .r20 {
            -webkit-transform: rotate(200deg);
            -moz-transform: rotate(200deg);
            -ms-transform: rotate(200deg);
            -o-transform: rotate(200deg);
            transform: rotate(200deg);
        }

亚洲必赢登录 7

亚洲必赢登录 8 那样就对了,望着多舒适啊!一气呵成,做脖子和人身:

CSS

/*围脖*/ .doraemon .choker { width: 230px; height: 20px; background: #c40; /*线性渐变 让围巾看上去更自然*/ background: -webkit-gradient(linear,left top,left bottom,from(#c40),to(#800400)); background: -moz-linear-gradient(center top,#c40,#800400); background: -ms-linear-gradient(center top,#c40,#800400); border: 2px solid #000; border-radius: 10px; position: relative; top: -40px; left: 45px; z-index: 4; } /*铃铛*/ .doraemon .choker .bell { width: 40px; height: 40px; _overflow: hidden; /*IE6 hack*/ border: 2px solid #000; border-radius: 50px; background: #f9f12a; background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100)); background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100); background: -ms-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100); box-shadow: -5px 5px 10px rgba(0,0,0,0.25); position: absolute; top: 5px; left: 90px; } /*双横线*/ .doraemon .choker .bell_line { width: 36px; height: 2px; background: #f9f12a; border: 2px solid #333; border-radius: 3px 3px 0 0; position: absolute; top: 10px; } /*黑点*/ .doraemon .choker .bell_circle{ width:12px; height:10px; background:#000; border-radius:5px; position:absolute; top:20px; left:14px; } /*黑点下的线*/ .doraemon .choker .bell_under{ width: 3px; height:15px; background:#000; position:absolute; left: 18px; top:27px; } /*铃铛巩膜炎*/ .doraemon .choker .bell_light{ width:12px; height:12px; border-radius:10px; box-shadow:19px 8px 5px #fff; position:absolute; top:-5px; left:5px; opacity:0.7; } /*身子*/ .doraemon .bodys { position: relative; top: -310px; } /*肚子*/ .doraemon .bodys .body { width: 220px; height: 165px; background: #07beea; background: -webkit-gradient(linear,right top,left top,from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be)); background: -moz-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%); background: -ms-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%); border:2px solid #333; position:absolute; top:265px; left:50px; } /*藤黄肚兜*/ .doraemon .bodys .wraps { width: 170px; height: 170px; background: #fff; background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000)); background: -moz-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000); background: -ms-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000); border: 2px solid #000; border-radius: 85px; position: absolute; left: 72px; top: 230px; } /*口袋*/ .doraemon .bodys .pocket { width: 130px; height: 130px; border-radius: 65px; background: #fff; background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff)); background: -moz-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff); background: -ms-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff); border: 2px solid #000; position:absolute; top: 250px; left: 92px; } /*屏蔽口袋四分之二*/ .doraemon .bodys .pocket_mask { width: 134px; height: 60px; background:#fff; border-bottom: 2px solid #000; position:absolute; top: 259px; left: 92px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
/*围脖*/
        .doraemon .choker {
            width: 230px;
            height: 20px;
            background: #c40;
            /*线性渐变 让围巾看上去更自然*/
            background: -webkit-gradient(linear,left top,left bottom,from(#c40),to(#800400));
            background: -moz-linear-gradient(center top,#c40,#800400);
            background: -ms-linear-gradient(center top,#c40,#800400);
            border: 2px solid #000;
            border-radius: 10px;
            position: relative;
            top: -40px;
            left: 45px;
            z-index: 4;
        }
        /*铃铛*/
        .doraemon .choker .bell {
            width: 40px;
            height: 40px;
            _overflow: hidden; /*IE6 hack*/
            border: 2px solid #000;
            border-radius: 50px;
            background: #f9f12a;
            background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100));
            background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);
            background: -ms-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);
            box-shadow: -5px 5px 10px rgba(0,0,0,0.25);
            position: absolute;
            top: 5px;
            left: 90px;
        }
        /*双横线*/
        .doraemon .choker .bell_line {
            width: 36px;
            height: 2px;
            background: #f9f12a;
            border: 2px solid #333;
            border-radius: 3px 3px 0 0;
            position: absolute;
            top: 10px;
        }
        /*黑点*/
        .doraemon .choker .bell_circle{
            width:12px;
            height:10px;
            background:#000;
            border-radius:5px;
            position:absolute;
            top:20px;
            left:14px;
        }
        /*黑点下的线*/
        .doraemon .choker .bell_under{
            width: 3px;
            height:15px;
            background:#000;
            position:absolute;
            left: 18px;
            top:27px;
        }
        /*铃铛高光*/
        .doraemon .choker .bell_light{
            width:12px;
            height:12px;
            border-radius:10px;
            box-shadow:19px 8px 5px #fff;
            position:absolute;
            top:-5px;
            left:5px;
            opacity:0.7;
        }
        /*身子*/
        .doraemon .bodys {
            position: relative;
            top: -310px;
        }
        /*肚子*/
        .doraemon .bodys .body {
            width: 220px;
            height: 165px;
            background: #07beea;
            background: -webkit-gradient(linear,right top,left top,from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be));
            background: -moz-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
            background: -ms-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);
            border:2px solid #333;
            position:absolute;
            top:265px;
            left:50px;
        }
        /*白色肚兜*/
            .doraemon .bodys .wraps {
                width: 170px;
                height: 170px;
                background: #fff;
                background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000));
                background: -moz-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);
                background: -ms-linear-gradient(right top,#fff,#fff 75%,#eee 83%,#999 90%,#444 95%,#000);
                border: 2px solid #000;
                border-radius: 85px;
                position: absolute;
                left: 72px;
                top: 230px;
            }
            /*口袋*/
            .doraemon .bodys .pocket {
                width: 130px;
                height: 130px;
                border-radius: 65px;
                background: #fff;
                background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff));
                background: -moz-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff);
                background: -ms-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%, #fff);
                border: 2px solid #000;
                position:absolute;
                top: 250px;
                left: 92px;
            }
            /*挡住口袋一半*/
            .doraemon .bodys .pocket_mask {
                width: 134px;
                height: 60px;
                background:#fff;
                border-bottom: 2px solid #000;
                position:absolute;
                top: 259px;
                left: 92px;
           }

行吗,脖子和人身皆有哇!上海教室:

亚洲必赢登录 9

近日看起来有一点点像安放品,可是笑容照旧那么单纯,好了,赶紧把手脚做出来:

CSS

/*左右手*/ .doraemon .hand_right, .doraemon .hand_left { height: 100px; width: 100px; position: absolute; top: 272px; left: 248px; } /*左手*/ .doraemon .hand_left { left: -10px; } /*手臂公共部分*/ .doraemon .arm { width:80px; height:50px; background: #07beea; background: -webkit-gradient(linear, left top, left bottom, from(#07beea),color-stop(0.85,#07beea), to(#555)); background: -moz-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555); background: -ms-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555); border: 1px solid #000000; box-shadow: -10px 7px 10px rgba(0, 0, 0, 0.35); z-index: -1; position: relative; } /*左边手手臂*/ .doraemon .hand_right .arm { top: 17px; -webkit-transform: rotate(35deg); -moz-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); transform: rotate(35deg); } /*左臂臂*/ .doraemon .hand_left .arm { top: 17px; background: #0096be; /*背阴一面利用纯色,使其有立体感*/ box-shadow: 5px -7px 10px rgba(0, 0, 0, 0.25); -webkit-transform: rotate(145deg); -moz-transform: rotate(145deg); -ms-transform: rotate(145deg); -o-transform: rotate(145deg); transform: rotate(145deg); } /*圆形手掌公共部分*/ .doraemon .circle { width: 60px; height: 60px; border-radius: 30px; border: 2px solid #000; background: #fff; background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd), to(#999)); background: -moz-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999); background: -ms-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999); position: absolute; } /*左边手手掌*/ .doraemon .hand_right .circle { left: 40px; top: 32px; } /*右臂手掌*/ .doraemon .hand_left .circle { left: -20px; top: 32px; } /*手臂和身体结合处,使用背景遮住边框*/ .doraemon .arm_rewrite { height: 45px; width: 5px; background: #07beea; position: relative; } /*侧边结合处*/ .doraemon .hand_right .arm_rewrite { top: -45px; left: 22px; } /*左手结合处*/ .doraemon .hand_left .arm_rewrite { top: -45px; left: 60px; background: #0096be; /*同理,背光一面利用纯色,使其有立体感*/ } /*脚部*/ .doraemon .foot { width: 280px; height: 40px; position: relative; top: 55px; left: 20px; } /*左左边脚共一样式*/ .doraemon .foot .left, .doraemon .foot .right { width: 125px; height: 30px; background: #fff; background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999)); background: -moz-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999); background: -ms-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999); border: 2px solid #333; border-radius: 80px 60px 60px 40px; box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35); position: relative; } .doraemon .foot .left { left: 8px; top: 65px; } .doraemon .foot .right { top: 31px; left: 141px; } /*两脚中间的缝缝,加阴影使用立体感*/ .doraemon .foot .foot_rewrite { width: 20px; height: 10px; background: #fff; background: -webkit-gradient(linear, right top, left bottom, from(#666),color-stop(0.83,#fff), to(#fff)); background: -moz-linear-gradient(right top, #666, #fff 83%, #fff); background: -ms-linear-gradient(right top, #666, #fff 83%, #fff); /*制作半圆效果*/ border: 2px solid #000; border-bottom: none; border-radius: 40px 40px 0 0; position: relative; top: -11px; left: 130px; _left: 127px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
/*左右手*/
            .doraemon .hand_right, .doraemon .hand_left {
                height: 100px;
                width: 100px;
                position: absolute;
                top: 272px;
                left: 248px;
            }
            /*左手*/
            .doraemon .hand_left {
                left: -10px;
            }
            /*手臂公共部分*/
            .doraemon .arm {
                width:80px;
                height:50px;
                background: #07beea;
                background: -webkit-gradient(linear, left top, left bottom, from(#07beea),color-stop(0.85,#07beea), to(#555));
                background: -moz-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555);
                background: -ms-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555);
                border: 1px solid #000000;
                box-shadow: -10px 7px 10px rgba(0, 0, 0, 0.35);
                z-index: -1;
                position: relative;
            }
            /*右手手臂*/
            .doraemon .hand_right .arm {
                top: 17px;
                -webkit-transform: rotate(35deg);
                -moz-transform: rotate(35deg);
                -ms-transform: rotate(35deg);
                -o-transform: rotate(35deg);
                transform: rotate(35deg);
            }
            /*左手手臂*/
            .doraemon .hand_left .arm {
                top: 17px;
                background: #0096be;   /*背光一面使用纯色,使其有立体感*/
                box-shadow: 5px -7px 10px rgba(0, 0, 0, 0.25);
                -webkit-transform: rotate(145deg);
                -moz-transform: rotate(145deg);
                -ms-transform: rotate(145deg);
                -o-transform: rotate(145deg);
                transform: rotate(145deg);
            }
            /*圆形手掌公共部分*/
            .doraemon .circle {
                width: 60px;
                height: 60px;
                border-radius: 30px;
                border: 2px solid #000;
                background: #fff;
                background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd), to(#999));
                background: -moz-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);
                background: -ms-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);
                position: absolute;
            }
            /*右手手掌*/
            .doraemon .hand_right .circle {
                left: 40px;
                top: 32px;
            }
            /*左手手掌*/
            .doraemon .hand_left .circle {
                left: -20px;
                top: 32px;
            }
            /*手臂和身体结合处,使用背景遮住边框*/
            .doraemon .arm_rewrite {
                height: 45px;
                width: 5px;
                background: #07beea;
                position: relative;
            }
            /*右手结合处*/
            .doraemon .hand_right .arm_rewrite {
                top: -45px;
                left: 22px;
            }
            /*左手结合处*/
            .doraemon .hand_left .arm_rewrite {
                top: -45px;
                left: 60px;
                background: #0096be; /*同理,背光一面使用纯色,使其有立体感*/
            }
            /*脚部*/
            .doraemon .foot {
                width: 280px;
                height: 40px;
                position: relative;
                top: 55px;
                left: 20px;
            }
            /*左右脚共同样式*/
            .doraemon .foot .left, .doraemon .foot .right {
                width: 125px;
                height: 30px;
                background: #fff;
                background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));
                background: -moz-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999);
                background: -ms-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999);
                border: 2px solid #333;
                border-radius: 80px 60px 60px 40px;
                box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35);
                position: relative;
            }
            .doraemon .foot .left {
                left: 8px;
                top: 65px;
            }
 
            .doraemon .foot .right {
                top: 31px;
                left: 141px;
            }
            /*双脚之间的缝隙,加阴影使用立体感*/
            .doraemon .foot .foot_rewrite {
                width: 20px;
                height: 10px;
                background: #fff;
                background: -webkit-gradient(linear, right top, left bottom, from(#666),color-stop(0.83,#fff), to(#fff));
                background: -moz-linear-gradient(right top, #666, #fff 83%, #fff);
                background: -ms-linear-gradient(right top, #666, #fff 83%, #fff);
                /*制作半圆效果*/
                border: 2px solid #000;  
                border-bottom: none;
                border-radius: 40px 40px 0 0;
                position: relative;
                top: -11px;
                left: 130px;
                _left: 127px;
            }

好了,最后完整结果:

亚洲必赢登录 10

看一下,效果是否和一始发的等同呢 亚洲必赢登录 11 ,即便做好了,不过还是能让它动起来的,举例眼睛,我们得以给它加个动画效果,让眼睛打转起来:

CSS

/*眼珠*/ .doraemon .eyes .eye .black { width: 14px; height: 14px; background: #000; border-radius: 7px; position: absolute; top: 40px; -webkit-animation: eyemove 3s linear infinite; -moz-animation: eyemove 3s linear infinite; -ms-animation: eyemove 3s linear infinite; -o-animation: eyemove 3s linear infinite; animation: eyemove 3s linear infinite; } /*让眼睛动起来*/ @-webkit-keyframes eyemove { 70%{ margin:0 0 0 0; } 80% { margin: -22px 0 0 0; } 85% { margin: -22px 0 0 5px; } 90% { margin: -22px 10px 0 0; } 93% { margin: -22px 0 0 0; } 96% { margin: 0 0 0 0; } } @-moz-keyframes eyemove { 70% { margin: 0 0 0 0; } 80% { margin: -22px 0 0 0; } 85% { margin: -22px 0 0 5px; } 90% { margin: -22px 10px 0 0; } 93% { margin: -22px 0 0 0; } 96% { margin: 0 0 0 0; } } @-o-keyframes eyemove { 70% { margin: 0 0 0 0; } 80% { margin: -22px 0 0 0; } 85% { margin: -22px 0 0 5px; } 90% { margin: -22px 10px 0 0; } 93% { margin: -22px 0 0 0; } 96% { margin: 0 0 0 0; } } @keyframes eyemove { 70% { margin: 0 0 0 0; } 80% { margin: -22px 0 0 0; } 85% { margin: -22px 0 0 5px; } 90% { margin: -22px 10px 0 0; } 93% { margin: -22px 0 0 0; } 96% { margin: 0 0 0 0; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
/*眼珠*/
        .doraemon .eyes .eye .black {
            width: 14px;
            height: 14px;
            background: #000;
            border-radius: 7px;
            position: absolute;
            top: 40px;
            -webkit-animation: eyemove 3s linear infinite;
            -moz-animation: eyemove 3s linear infinite;
            -ms-animation: eyemove 3s linear infinite;
            -o-animation: eyemove 3s linear infinite;
            animation: eyemove 3s linear infinite;
        }
 
        /*让眼睛动起来*/
        @-webkit-keyframes eyemove {
            70%{
                margin:0 0 0 0;
            }
            80% {
                margin: -22px 0 0 0;
            }
 
            85% {
                margin: -22px 0 0 5px;
            }
 
            90% {
                margin: -22px 10px 0 0;
            }
 
            93% {
                margin: -22px 0 0 0;
            }
 
            96% {
                margin: 0 0 0 0;
            }
        }
 
        @-moz-keyframes eyemove {
            70% {
                margin: 0 0 0 0;
            }
 
            80% {
                margin: -22px 0 0 0;
            }
 
            85% {
                margin: -22px 0 0 5px;
            }
 
            90% {
                margin: -22px 10px 0 0;
            }
 
            93% {
                margin: -22px 0 0 0;
            }
 
            96% {
                margin: 0 0 0 0;
            }
        }
 
        @-o-keyframes eyemove {
            70% {
                margin: 0 0 0 0;
            }
 
            80% {
                margin: -22px 0 0 0;
            }
 
            85% {
                margin: -22px 0 0 5px;
            }
 
            90% {
                margin: -22px 10px 0 0;
            }
 
            93% {
                margin: -22px 0 0 0;
            }
 
            96% {
                margin: 0 0 0 0;
            }
        }
        @keyframes eyemove {
            70% {
                margin: 0 0 0 0;
            }
 
            80% {
                margin: -22px 0 0 0;
            }
 
            85% {
                margin: -22px 0 0 5px;
            }
 
            90% {
                margin: -22px 10px 0 0;
            }
 
            93% {
                margin: -22px 0 0 0;
            }
 
            96% {
                margin: 0 0 0 0;
            }
        }

OK,这样,眼睛就能够动了,风乐趣的可以试一下,这里就不能浮现了。可是假若你有怎样越来越好的卡通效果也能够品味,那么那几个案例就停止了。

PS:虽说那只是贰个案例,然则真正补助本人开阔思维,并且事实上做一个这么的效应,或者会开支很多时辰,起码对本身的话近些日子的确是那样子,首要难点照旧布局一定和颜料的客体搭配,本领使形象越发有板有眼绘影绘声!只怕也许有人对PS大概Flash等图形处理软件不是很熟,对用CSS3画出某一个职员只怕别的职能相比较未有眉目,那么就能够去部分网址参照他事他说加以考察设计员们的宏图构图,图形分解等城门失火安排学问,帮衬大家越来越好地驾驭,这里推荐多少个网址:

站酷网

闪吧

网页设计员联盟

浅绿灰理想

2 赞 4 收藏 1 评论

亚洲必赢登录 12

用CSS和SVG制作饼图

2015/08/10 · CSS · SVG

原来的小讲出处: Lea Verou   译文出处:lulux的博客   

在涉及到CSS手艺时,未有人会比Lea Verou更执着、可是又充分聪明,努力去搜索难题的各样施工方案。方今,Lea本身写作、设计和出版了一本书——CSS Secrets,那本书那几个风趣,富含部分CSS小本事以及消除广大难题的才具。假如您以为温馨的CSS技艺还不错,看看那本书,你会非常吃惊的。在那篇小说中,大家发布了书里的有的部分,这也被刊登在Lea最近在SmashingConf New York的阐述内容中——用CSS设计简约的饼图。注意,因为浏览器的援救少数,有个别demo或许还是不能够寻常运营。——编辑

饼图,纵然是最简易的独有两种颜色的样式,用Web工夫成立也并不简单,即便都以有的常见的音信内容,从轻易的计算到进程条目款项标还会有沙漏。平时是行使外界图像编辑器来分别为三个值创建两个图像来促成,或是使用大型的JavaScript框架来统一筹划更复杂的图片。

就算那些事物并不像它已经看起来那么难以完毕,不过也远非什么直接何况不难的点子。然而,今后早已有比很多更加好、更便于维护的主意来促成它。

要素类型

HTML 的成分得以分成三种:

  • 块级成分(block level element)
  • 内联元素(inline element 有的人也叫它行内成分)

双面包车型地铁界别在于以下三点:

  1. 块级成分会占据一行(即不能够与别的因素彰显在同一行内,除非你显式修改成分的 display 属性),而内联成分则都会在一行内展现。
  2. 块级元素得以设置 width、height 属性,而内联成分设置无效。
  3. 块级成分的 width 默以为百分百,而内联成分则是基于其自己的内容或子成分来支配其宽度。

最常见块级成分应该是 ``<div>呢,内联成分有 ``<img> ``````等等,完整的要素列表能够Google时而。

具体来讲一下啊,

JavaScript

.example { width: 100px; height: 100px; }

1
2
3
4
.example {
    width: 100px;
    height: 100px;
}

我们为 `<div>` 设置上面的样式,是有效果的,因为其是块级元素,而对 设置上面的样式是没用的。要想让 ` 也可以改变宽高,可以通过设置display: block;` 来完毕效果。当 display 的值设为 block 时,成分将以块级情势显示;当 display 值设为 inline 时,成分将以内联方式表现。 若既想让要素在行内展现,又能设置宽高,可以设置:

JavaScript

display: inline-block;

1
display: inline-block;

inline-block 在作者眼里正是让要素对外呈内联成分,能够和其它因素共处与一行内;对内则让要素呈块级成分,可转移其宽高。


HTML 代码是逐个实践的,一份无任何 CSS 样式的 HTML 代码最后显示出的页面是依据成分出现的依次和项目排列的。块级成分就从上到下排列,碰着内联成分则从左到右排列。这种无样式的景观下,元素的布满叫普通流,元素出现的岗位应该叫健康地方(这是自家瞎起的),同有的时候间负有因素会在页面上占领三个空间,空间大小由其盒模型决定。

1996年12月—CSS 1

互连网络对CSS正式的介绍要追溯到一九九七年,万维网联盟 (W3C) 面向全球发表CSS的时候。CSS实际不是及时独一一种正在开荒中的样式语言,但是层叠这些必须要素和开支连串将它与其余的语言不相同开来。

“HTML 是一种具备语义并用来传达网页内容的言语,CSS 最早的陈设性目标,正是为着使 HTML 的这一见解能够保险下去。”一个人谷歌(Google)的职业黑客(spec 黑客)Tab Atkins Jr.在互连网播客平台说,“特别是让机器能够领略。”

样式表并非斩新的,自从正式通用标志语言(S维生霉素L)的开支以来,它(样式表)就因为有的技能而被使用。但在及时,将它采纳于网页依旧很诡异的。

CSS最早并从未什么样闪光点,但是它的影响力是骤然的。为了科学地来对待它,下图是率先个宣布在互联网上的网页看起来的楷模:

亚洲必赢登录 13

上边是二个近似的运用了CSS的根基网页的事例:

亚洲必赢登录 14

正如你所见到的那么,CSS的到场使得网页成分能够使用特其余特征。其重大的好处是设计员和开垦职员将来得以毫无经过更换HTML就能够改动CSS的一对属性了。举例,梅红的高亮区域能够换到藕灰或纯白。

然则在当时它差不离上也正是那样了。W3C公布的CSS推荐标准有着以下开头属性:

  • 前景和背景颜色/图片
  • 字体属性譬如字体和加粗
  • 文件,包罗单词和字母间距
  • 外边距,边框,内边距
  • 分类和对齐

决不再在 JavaScript 中用 CSS了

基于转变的消除方案


其一方案从HTML的角度来讲是最棒的:它只须要一个因素,其余的都能够用伪成分、调换和CSS渐变实现。大家从下面那个大致的成分开端:

<div class="pie"></div>

1
<div class="pie"></div>

以后,要是大家期望显示多少个 三成 比例的饼图。灵活性的标题大家后边再消除。大家先给元素增多样式,让它成为多个圆,也正是大家的背景:

亚洲必赢登录 15

图1:第一步是先画贰个圆(只怕能够说是突显0%百分比的饼图)

CSS

.pie { width: 100px; height: 100px; border-radius: 50%; background: yellowgreen; }

1
2
3
4
5
.pie {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: yellowgreen;
}

 

咱俩的饼图是银色(特指 yellowgreen )和白灰( #655 )突显的比重。恐怕会在比例部分尝试使用 transform 中的 skew ,不过透过三次考试之后申明,这是叁个要命混乱的方案。由此,我们用这两种颜色为那么些饼图的左右局地各自着色,然后对于我们想要的百分比,使用旋转的伪成分来完成。

大家接纳一个简易的线性渐变,给右半部分着玉石白:

CSS

background-image: linear-gradient(to right, transparent 50%, #655 0);

1
background-image: linear-gradient(to right, transparent 50%, #655 0);

亚洲必赢登录 16

图2:用贰个大约的线性渐变给右半圆着深紫红

如图2所示,那样就水到渠成了。未来,大家得以一而再为伪成分增添样式,让它成为一个蒙版:

CSS

.pie::before { content: ''; display: block; margin-left: 50%; height: 100%; }

1
2
3
4
5
6
.pie::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
}

亚洲必赢登录 17

图3:虚线内的内容表示伪成分将用作蒙版的区域

您能够在图3中来看大家的伪成分当前稳固相对于大家的pie元素。前段时间,它还一贯不加多样式,也远非掩没任何事物,只是二个晶莹剔透的矩形。在初阶增添样式此前,大家先来解析一下:

  • 因为我们意在它覆盖圆的茶色部分,大家须要给它使用三个乌紫的背景,使用 background-color: inherit 来幸免重新定义,因为大家本来就指望它和父成分的背景颜色保持一致。
  • 我们希望它绕着圆的中坚点旋转,中央点在伪成分的左边手,所以大家须要给它的 transform-origin ,应用四个0 二分一 ,或许是向来三个 left 。
  • 我们不想要它是二个矩形,因为它会超越饼图的边缘,所以我们须求给 .pie 应用 overflow: hidden ,也许是一个体面的 border-radius 让它成为一个半圆。

综述,伪成分的CSS样式如下:

CSS

.pie::before { content: ''; display: block; margin-left: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background-color: inherit; transform-origin: left; }

1
2
3
4
5
6
7
8
9
.pie::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
}

亚洲必赢登录 18

图4:加多样式之后的伪成分(这里用虚线表示)

留意:不要选拔 class="crayon-syntax crayon-syntax-inline crayon-theme-github crayon-theme-github-inline crayon-font-monaco" style="font-size: 13px !important; line-height: 15px !important;font-size: 13px !important;"> class="crayon-pre crayon-code" style="font-size: 13px !important; line-height: 15px !important;font-size: 13px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"> class="crayon-e">background class="crayon-sy">: class="crayon-i">inherit class="crayon-sy">; ,要用 id="crayon-5b8f6c8720464547585400" class="crayon-syntax crayon-syntax-inline crayon-theme-github crayon-theme-github-inline crayon-font-monaco" style="font-size: 13px !important; line-height: 15px !important;font-size: 13px !important;"> class="crayon-pre crayon-code" style="font-size: 13px !important; line-height: 15px !important;font-size: 13px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"> class="crayon-e">background-color class="crayon-sy">: class="crayon-i">inherit ;,否则父成分背景图像上的渐变也会被连续

小编们的饼图近来如图4所示。未来始于风趣起来了!大家得以初始转动伪成分,给它应用叁个rotate() 调换。要来得 三分之一 的比例,我们得以给它一个 72deg ( 0.2 x 360 = 72 ),或 .2turn ,这一个可读性更加好。你能够在图第55中学看出不一致旋转角度值的结果。

亚洲必赢登录 19

图5:分别展现不一致比例的饼图,从左到右: 一成  ( 36deg 或 .1turn ), 33.33%  ( 72deg 或  .2turn ), 百分之二十  ( 144deg  或 .4turn )

你或者会想大家早已到位了,不过它可没这么轻巧。我们的饼图在彰显050%的分寸的从头到尾的经过时是未有别的难题的,然则若是我们要描绘三个60% 的转动(通过利用 .6turn ),就能够时有发生如图6的情事。然而,别担忧,我们能够解决那么些工作!

亚洲必赢登录 20

图6:对于抢先二分之一的比例,我们的饼图就跪了orz(这里的是三成)

比方大家把 八分之四-百分之百 比例的图景作为单身的二个主题材料,也许会小心到能够动用在此之前的缓慢解决方案的反相版本:从0.5turn旋转的红紫铜色伪元素。所以,对于一个60%的饼图,伪成分的CSS代码如下:

CSS

.pie::before { content: ''; display: block; margin-left: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background: #655; transform-origin: left; transform: rotate(.1turn); }

1
2
3
4
5
6
7
8
9
10
.pie::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background: #655;
  transform-origin: left;
  transform: rotate(.1turn);
}

亚洲必赢登录 21

图7: 伍分之一 饼图的科学展开药格局~

您能够在图7中见到结果。因为大家早已拟定了贰个方可描绘出任何百分比的点子,我们竟然可认为饼图从0%100%增多动画功用,成立出三个风趣的进程条:

CSS

@keyframes spin { to { transform: rotate(.5turn); } } @keyframes bg { 50% { background: #655; } } .pie::before { content: ''; display: block; margin-left: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background-color: inherit; transform-origin: left; animation: spin 3s linear infinite, bg 6s step-end infinite; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@keyframes spin {
  to { transform: rotate(.5turn); }
}
 
@keyframes bg {
  50% { background: #655; }
}
 
.pie::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
  animation: spin 3s linear infinite,
             bg 6s step-end infinite;
}

 

See the Pen zGbNLJ by Airen (@airen) on CodePen.

来得没卓殊,不过大家要是给八个例外比重的静态饼图增添样式呢,最广大的用例是?在理想状态下,大家愿意可以简轻松单地输入如下的从头到尾的经过:

<div class="pie">20%</div> <div class="pie">60%</div>

1
2
<div class="pie">20%</div>
<div class="pie">60%</div>

接下来就可以得到八个饼图,四个代表20%,三个意味60%。首先,大家先研讨一下什么样使用内联样式来达成,然后我们可以写三个回顾的脚本来深入分析文本内容,对应地抬高内联样式,而且要代码高雅、封装、可维护性,还会有最器重的一点,可访谈性。

应用内联样式调节饼图百分比的三个不方就是:用于安装百分比CSS代码是用伪成分完结的。并且你也明白,我们不能够给伪成分设置内联样式,所以大家须求立异。

留意:假诺您想要使用的值是在有个别不须求通过再次的错综复杂的乘除的范围内的气象,你能够运用同样的本领,满含经过它们一步一步调节和测验动画的图景。看该技艺的一个一言以蔽之的示范。

 

See the Pen YXgNOK by Airen (@airen) on CodePen.

技术方案来自最非常的小概的地点之一。我们将要选用大家早就介绍过的动画,可是它是行车制动器踏板状态的。大家不会让它像四个正规的动画片那样运维,我们将选拔负延迟来让它可以静态地暂停在有些点。很意外?二个负的animation-delay的值不止在标准中是允许的,在周边这样的案例中也是至极好用:

负延迟是平价的。和0s的延迟类似,它象征动画将立刻实践,不过是遵照延迟的相对值来自动运转的,所以只要动画已经在钦命的时光从前就早先运维了,那它就能一向从active的年华东途运转。 —CSS Animations Level 1

因为大家的卡通是搁浅的,它的第一帧正是大家独一体现的那一帧(通过大家的animation-delay概念)。饼图上海展览中心示的比重将会是我们的animation-delay的总时间。举个例子,当前的持续时间是6s,我们的 animation-delay 值为-1.2s则显示20%的百分比。为了简化总计,大家设置五个100s的持续时间。记住因为大家的卡通片是永远暂停的,大家给它钦定的推迟大小并不会有哪些震慑。

还应该有最终贰个难点:动画是赋给伪元素的,不过我们想要给.pie要素设置内联样式。因为<div>上并未有动画,大家能够给它设置animation-delay作为内联样式,然后给伪成分应用 animation-delay: inherit; 。综上所述,20%60%的饼图的HTML代码如下:

<div class="pie" style="animation-delay: -20s"></div> <div class="pie" style="animation-delay: -60s"></div>

1
2
<div class="pie" style="animation-delay: -20s"></div>
<div class="pie" style="animation-delay: -60s"></div>

凑巧提出的这几个动画的CSS代码如下(省略 .pie 准绳,因为未有退换):

CSS

@keyframes spin { to { transform: rotate(.5turn); } } @keyframes bg { 50% { background: #655; } } .pie::before { /* [Rest of styling stays the same] */ animation: spin 50s linear infinite, bg 100s step-end infinite; animation-play-state: paused; animation-delay: inherit; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@keyframes spin {
  to { transform: rotate(.5turn); }
}
 
@keyframes bg {
  50% { background: #655; }
}
 
.pie::before {
  /* [Rest of styling stays the same] */
  animation: spin 50s linear infinite, bg 100s step-end infinite;
  animation-play-state: paused;
  animation-delay: inherit;
}

此刻,能够把HTML标签改成接Nabi例作为内容,和一上马期望的一致,然后经过三个差不离的脚本为其增加animation-delay 内联样式。

JavaScript

$$('.pie').forEach(function(pie) { var p = parseFloat(pie.textContent); pie.style.animationDelay = '-' + p + 's'; });

1
2
3
4
$$('.pie').forEach(function(pie) {
  var p = parseFloat(pie.textContent);
  pie.style.animationDelay = '-' + p + 's';
});

亚洲必赢登录 22

图8:未有隐蔽文本前的图

  • 把饼图的height改换到 line-height (或加上三个和height值极度的line-height,不过那值是毫无意义的双重代码,因为line-height会活动测算height的值)。
  • 经过相对定位给伪成分设置大小和岗位,那样它不会把公文挤下去。
  • 加上 text-align: center; 让文本水平居中。

最后的代码如下:

CSS

.pie { position: relative; width: 100px; line-height: 100px; border-radius: 50%; background: yellowgreen; background-image: linear-gradient(to right, transparent 50%, #655 0); color: transparent; text-align: center; } @keyframes spin { to { transform: rotate(.5turn); } } @keyframes bg { 50% { background: #655; } } .pie::before { content: ''; position: absolute; top: 0; left: 50%; width: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background-color: inherit; transform-origin: left; animation: spin 50s linear infinite, bg 100s step-end infinite; animation-play-state: paused; animation-delay: inherit; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.pie {
  position: relative;
  width: 100px;
  line-height: 100px;
  border-radius: 50%;
  background: yellowgreen;
  background-image: linear-gradient(to right, transparent 50%, #655 0);
  color: transparent;
  text-align: center;
}
 
@keyframes spin {
  to { transform: rotate(.5turn); }
}
@keyframes bg {
  50% { background: #655; }
}
 
.pie::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 50%; height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
  animation: spin 50s linear infinite, bg 100s step-end infinite;
  animation-play-state: paused;
  animation-delay: inherit;
}

 

See the Pen qdvRMv by Airen (@airen) on CodePen.

本文由亚洲必赢登录发布于亚洲必赢app,转载请注明出处:用CSS和SVG制作饼图,使用CSS3画出三个叮当猫

关键词:

上一篇:行内格式化上下文中的各类高度总计,CSS模块化

下一篇:CSS3硬件加速也可能有坑,响应式设计的5个CSS实用