圆锥渐变,使用CSS3画出一个叮当猫

无缘无故的 conic-gradient 圆锥渐变

2017/06/26 · CSS ·
圆锥渐变

本文小编: 伯乐在线 –
chokcoco
。未经我许可,禁止转载!
欢迎加入伯乐在线 专栏小编。

感谢 LeaVerou 大神,让大家可以提前接纳上那样精美的品质。

conic-gradient 是个如何?说到 conic-gradient ,就不得不提的它的此外八个弟兄:

  • linear-gradient : 线性渐变
    澳门葡京 1
  • radial-gradient : 径向渐变
    澳门葡京 2

说那几个应该照旧有过多人询问并且拔取过的。CSS3
新增的线性渐变及径向渐变给 CSS 世界带来了很大的成形。

而 conic-gradient ,表示圆锥渐变,此外一种渐变格局,给 CSS
世界带来了越多可能。

上面进入正文,本文中有所示例,请在高版本 Chrome 内核下预览。

HTML代码

HTML代码

采取CSS3画出1个叮当猫

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

初稿出处: 郭锦荣   

刚上学了那个案例,然后觉得比较好玩,就训练了须臾间。然后发现实际也简单,借使你平时使用PS或许Flash的话,应该就会驾驭画个叮当猫是很简单的事,至少小编是那般觉得。可是,用CSS3画出来确实是首先次接触,所以很情愿去尝试一下,对于小编那种菜鸟,确实是支援众多,至少精晓怎样去画3个简练的人物形象出来,再添加有个别动画效果,就活了,这就更好玩了!OK,早先以前,先把功效图晒一下:

澳门葡京 3

PS:说实话,小编觉得挺可爱的,小时候平常看多呐A梦,突然感觉到很恩爱,很天真,须臾间后生了重重,哈哈!澳门葡京 4

首先,先把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);
}

探访效果到底什么样:

澳门葡京 5

澳门葡京 6 shenmgui ,这么丑,别急,逐渐让它活过来:

CSS

/*脸部*/ .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; }

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;
        }

写了那般各个式,结果是怎么样的吗:

澳门葡京 7

澳门葡京 8 怎么看都觉着别别扭扭,哦!还差胡须须和反动脸底的边框呢,咱给补上:

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);
        }

澳门葡京 9

澳门葡京 10 那样就对了,望着多舒畅女士啊!连成一气,做脖子和人身:

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;
           }

好吧,脖子和人身都有哇!上图:

澳门葡京 11

今昔看起来有点像安置品,然而笑容依然那么单纯,好了,赶紧把手脚做出来:

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;
            }

好了,最后完整结果:

澳门葡京 12

看一下,效果是或不是和一上马的相同呢 澳门葡京 13 ,固然做好了,不过还可以让它动起来的,比如眼睛,我们可以给它加个动画效果,让眼睛打转起来:

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:就算这只是一个案例,不过真的辅助小编开阔思维,而且实际做1个这么的效益,可能会开支很多小时,至少对本身的话近期实在是那样子,首要难点依旧布局一定和颜料的合理性搭配,才能使形象尤为跃然纸上绘身绘色!或然也有人对PS只怕Flash等图形处理软件不是很熟,对用CSS3画出部分人物可能其余职能相比没有头脑,那么就可以去部分网站参考设计师们的布署构图,图形分解等相关规划学问,扶助大家更好地明白,那里推荐多少个网站:

站酷网

闪吧

网页设计师联盟

原野绿理想

2 赞 4 收藏 1
评论

澳门葡京 14

API

探访它最简便易行的 API:

{ /* Basic example */ background: conic-gradient(deeppink,
yellowgreen); }

1
2
3
4
{
    /* Basic example */
    background: conic-gradient(deeppink, yellowgreen);
}

澳门葡京 15

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>小丸子一家</title>
<link rel=”stylesheet” href=”main.css”>
</head>
<body>
<div class=”main”>
<div class=”me”>
<div class=”hairs”>
<div class=”hair hair1″></div>
<div class=”hair hair2″></div>
<div class=”hair hair3″></div>
<div class=”hair hair4″></div>
<div class=”hair hair5″></div>
<div class=”hair hair6″></div>
<div class=”hair hair7″></div>
</div>

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>小丸子一家</title>
<link rel=”stylesheet” href=”main.css”>
</head>
<body>
<div class=”main”>
<div class=”me”>
<div class=”hairs”>
<div class=”hair hair1″></div>
<div class=”hair hair2″></div>
<div class=”hair hair3″></div>
<div class=”hair hair4″></div>
<div class=”hair hair5″></div>
<div class=”hair hair6″></div>
<div class=”hair hair7″></div>
</div>

与线性渐变及圆锥渐变的异同

圆锥渐变,使用CSS3画出一个叮当猫。那就是说它和别的三个渐变的分别在哪个地方啊?

  • linear-gradient 线性渐变的矛头是一条直线,可以是其他角度
  • radial-gradient向阳渐变是从圆心点以长方形状向外扩散

而从可行性上的话,圆锥渐变的动向是那样的:

澳门葡京 16

划重点:

从图中得以见到,圆锥渐变的渐变方向和早先点。先河点是图片核心,然后以顺时针方向绕大旨完成渐变效果

<div class=”face”>
<div class=”brow left-brow”></div>
<div class=”brow right-brow”></div>
<div class=”eye left-eye”></div>
<div class=”eye right-eye”></div>

<div class=”face”>
<div class=”brow left-brow”></div>
<div class=”brow right-brow”></div>
<div class=”eye left-eye”></div>
<div class=”eye right-eye”></div>

使用 conic-gradient 完结颜色表盘

从上边精通了 conic-gradient 最简单易行的用法,大家运用它完结1个最简易的水彩表盘。

conic-gradient 不仅仅只是从一种颜色渐变到另一种颜色,与此外七个渐变一样,可以兑现多颜色的交接渐变。

透过,想到了彩虹,大家得以依次列出 赤橙黄绿青蓝紫 多种颜色:

  • conic-gradient: (red, orange, yellow, green, teal, blue, purple)

地点表示,在圆锥渐变的进程中,颜色从设定的首先个 red 开始,渐变到 orange ,再到 yellow ,平昔到终极设定的 purple 。并且每1个间距是等分的。

大家再给加上 border-radius: 50% ,倘若大家的 CSS 如下,

{ width: 200px; height: 200px; border-radius: 50%; background:
conic-gradient(red, orange, yellow, green, teal, blue, purple); }

1
2
3
4
5
6
{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(red, orange, yellow, green, teal, blue, purple);
}

探望效果:

澳门葡京 17

wow,已经有了开头形状了。不过,总感到哪里不大自然。同理可得,浑身痛苦 澳门葡京 18

啊?难点出在什么地方呢?一是颜色不够充足不够清楚,二是先河处与结尾处衔接不够自然。让自个儿再稍微调整一下。

咱俩掌握,表示颜色的章程,除了 rgb() 颜色表示法之外,还有 hsl() 表示法。

hsl() 被定义为色相-饱和度-明度(Hue-saturation-lightness)

  • 色相(H)是色彩的主干性情,就是日常所说的颜色名称,如革命、暗黄等。
  • 饱和度(S)是指色彩的纯度,越高色彩越纯,低则日益变灰,取0-百分之百的数值。
  • 明度(V),亮度(L),取0-100%。

此间,大家通过变更色相得到1个较为了然完整的颜色色系。

相当于行使那样壹个连接 hsl(0%, 100%, 50%) –> hsl(100%, 100%, 50%),中间只变动色相,生成
20 个接入状态。借助 SCSS ,CSS 语法如下:

$colors: (); $totalStops:20; <a
href=”; $i
from 0 through $totalStops{ $colors: append($colors, hsl($i
*(360deg/$totalStops), 100%, 50%), comma); } .colors { width: 200px;
height: 200px; background: conic-gradient($colors); border-radius: 50%;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
$colors: ();
$totalStops:20;
 
<a href="http://www.jobbole.com/members/lowkey2046">@for</a> $i from 0 through $totalStops{
    $colors: append($colors, hsl($i *(360deg/$totalStops), 100%, 50%), comma);
}
 
.colors {
    width: 200px;
    height: 200px;
    background: conic-gradient($colors);
    border-radius: 50%;
}

得到如下效果图,本次的作用很好:

澳门葡京 19

CodePen Demo — conic-gradinet
colors

<div class=”blusher left-blusher”></div>
<div class=”blusher right-blusher”></div>

<div class=”blusher left-blusher”></div>
<div class=”blusher right-blusher”></div>

13分百分比使用

本来,大家可以更进一步切实的钦点圆锥渐变每一段的比重,同盟百分比,可以很轻松的兑现饼图。

设若大家有如下 CSS:

{ width: 200px; height: 200px; background: conic-gradient(deeppink 0,
deeppink 30%, yellowgreen 30%, yellowgreen 70%, teal 70%, teal 100%);
border-radius: 50%; }

1
2
3
4
5
6
{
    width: 200px;
    height: 200px;
    background: conic-gradient(deeppink 0, deeppink 30%, yellowgreen 30%, yellowgreen 70%, teal 70%, teal 100%);
    border-radius: 50%;
}

上图,大家分别内定了 0~30%,30%~70%,70%~百分百五个区间的颜色分别为 deeppink(深红)yellowgreen(黄绿) 以及 teal(青) ,可以拿走如下饼图:

澳门葡京 20

本来,上边只是比例的率先种写法,还有另一种写法也能完毕:

{ background: conic-gradient(deeppink 0 30%, yellowgreen 0 70%, teal 0
100%); }

1
2
3
{
    background: conic-gradient(deeppink 0 30%, yellowgreen 0 70%, teal 0 100%);
}

那边表示 :

  1. 0-百分之三十 的距离使用 deeppink
  2. 0-七成 的间距使用 yellowgreen
  3. 0-百分百 的间隔使用 teal

还要,先定义的颜色的层叠在后定义的水彩之上。

CodePen Demo — use proportion in
conic-gradient

<div class=”mouth”></div>

<div class=”mouth”></div>

配合 background-size 使用

利用了百分比控制了区间,再同盟使用 background-size 就可以完结种种贴图啦。

大家率先落到实处2个基础圆锥渐变图形如下:

{ width: 250px; height: 250px; margin: 50px auto; background:
conic-gradient(#000 12.5%, #fff 0 37.5%, #000 0 62.5%, #fff 0 87.5%,
#000 0); }

1
2
3
4
5
6
{
    width: 250px;
    height: 250px;
    margin: 50px auto;
    background: conic-gradient(#000 12.5%, #fff 0 37.5%, #000 0 62.5%, #fff 0 87.5%, #000 0);
}

效果图:

澳门葡京 21

再加上 background-size: 50px 50px;,也就是:

{ width: 250px; height: 250px; margin: 50px auto; background:
conic-gradient(#000 12.5%, #fff 0 37.5%, #000 0 62.5%, #fff 0 87.5%,
#000 0); background-size: 50px 50px; }

1
2
3
4
5
6
7
{
    width: 250px;
    height: 250px;
    margin: 50px auto;
    background: conic-gradient(#000 12.5%, #fff 0 37.5%, #000 0 62.5%, #fff 0 87.5%, #000 0);
    background-size: 50px 50px;
}

得到:

澳门葡京 22

CodePen Demo — conic-gradient
wallpaper

<div class=”ear left-ear”></div>
<div class=”ear right-ear”></div>
</div>

<div class=”ear left-ear”></div>
<div class=”ear right-ear”></div>
</div>

重新圆锥渐变 repaeting-conic-gradient

与线性渐变及径向渐变一样,圆锥渐变也是存在双重圆锥渐变 repaet-conic-gradient 的。

我们只要希望持续重复的有的是 0~30° 的三个有的,它的 CSS
代码是 conic-gradient(deeppink 0 15deg, yellowgreen 0 30deg) 。

澳门葡京 23

那么,使用了 repaeting-conic-gradient 之后,会自行填充满整个区域,CSS
代码如下:

{ width: 200px; height: 200px; background:
repeating-conic-gradient(deeppink 0 15deg, yellowgreen 0 30deg); border:
1px solid #000; }

1
2
3
4
5
6
{
    width: 200px;
    height: 200px;
    background: repeating-conic-gradient(deeppink 0 15deg, yellowgreen 0 30deg);
    border: 1px solid #000;
}

澳门葡京 24

CodePen Demo —
repeating-conic-gradient

<div class=”clothes”>
<div class=”collar left-collar”></div>
<div class=”collar right-collar”></div>
<div class=”straps left-straps”></div>
<div class=”straps right-straps”></div>
</div>

<div class=”clothes”>
<div class=”collar left-collar”></div>
<div class=”collar right-collar”></div>
<div class=”straps left-straps”></div>
<div class=”straps right-straps”></div>
</div>

圆锥渐变动画

主旨的一部分用法精通完了,看看使用圆锥渐变可以玩出什么花来。

借助 SCSS 的有力,大家得以打造出一部分相当酷炫的背景展板。

行使 SCSS ,我们随便生成三个多颜色的圆锥渐变图案:

如若我们的 HTML 结构如下:

<div></div>

1
<div></div>

CSS/SCSS 代码如下:

@function randomNum($max, $min: 0, $u: 1) { <a
href=’;
($min + random($max)) * $u; } @function randomConicGradient() { $n:
random(30) + 10; $list: (); <a
href=’; $i
from 0 to $n { $list: $list, rgb(randomNum(255), randomNum(255),
randomNum(255)); } <a
href=’;
conic-gradient($list, nth($list, 1)); } div { width: 100vw; height:
100vh; background: randomConicGradient(); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@function randomNum($max, $min: 0, $u: 1) {
    <a href=’http://www.jobbole.com/members/wx1409399284′>@return</a> ($min + random($max)) * $u;
}
@function randomConicGradient() {
    $n: random(30) + 10;
    $list: ();
    
    <a href=’http://www.jobbole.com/members/lowkey2046′>@for</a> $i from 0 to $n {
        $list: $list, rgb(randomNum(255), randomNum(255), randomNum(255));
    }
        
    <a href=’http://www.jobbole.com/members/wx1409399284′>@return</a> conic-gradient($list, nth($list, 1));
}
div {
    width: 100vw;
    height: 100vh;
    background: randomConicGradient();
}

简短表明下方面的 SCSS 代码,

  • randomNum() 用于转移随机数,randomNum(255) 约等于自由生成 1~255
    的自由数;
  • randomConicGradient() 用于转移整个 conic-gradient() 内的参数,约等于每一距离的颜色;
  • vw 和 vh 是相比新的 CSS 单位,2个页面而言,它的视窗的可观就是
    100vh,宽度就是 100vw 。

OK,刷新页面,得到如下效果图:

澳门葡京 25

卧槽,很酷炫,bling bling
闪闪发光的感到啊!而且是随机生成的各类颜色,所以每便刷新都有新体验有木有!!

澳门葡京 26

还没完,接下去给它丰盛旋转动画,蹬蹬蹬,旋转起来大约是那样:

澳门葡京 27

是因为 GIF 图大小的限制,只看 GIF
不可以感受到全屏下那种科幻眩晕的觉得,墙裂指出您戳进去看看:

CodePen Demo — conic-gradient
Animation

<div class=”arm left-arm”></div>
<div class=”arm right-arm”></div>

<div class=”arm left-arm”></div>
<div class=”arm right-arm”></div>

脑洞时刻

到此地本身依旧不是很满意。想到了后边的 mix-blend-mode 属性。

想了解 mix-blend-mode 这么些脾气,可以戳作者看看:不堪设想的颜色混合方式mix-blend-mode

假诺四个圆锥渐变层级叠加,并且利用上 mix-blend-mode 会发生哪些?好可怕的想法…

澳门葡京 28

最终捣鼓出那种极度科幻的意义:

澳门葡京 29

上图使用了 3个半透明的圆锥渐变,相对反向进行旋转,并且在尾部使用 mix-blend-mode: overlay 叠加了贰个白黑径向渐变图层。可以看看代码及功能:

CodePen Demo — conic-gradient
Animation

<div class=”belt”></div>
<div class=”skirt”>
<div class=”line line1″></div>
<div class=”line line2″></div>
<div class=”line line3″></div>
<div class=”line line4″></div>
<div class=”line line5″></div>
</div>
<div class=”leg left-leg”></div>
<div class=”leg right-leg”></div>

<div class=”belt”></div>
<div class=”skirt”>
<div class=”line line1″></div>
<div class=”line line2″></div>
<div class=”line line3″></div>
<div class=”line line4″></div>
<div class=”line line5″></div>
</div>
<div class=”leg left-leg”></div>
<div class=”leg right-leg”></div>

在档次中使用 conic-gradient

上边的事例酷炫归酷炫,不过在档次中实用性不强。那么圆锥渐变是或不是能用于工作中的?答案是任天由命的。

探望下边那一个图,芝麻信用分背景渐变颜色条,不行使 JS,纯 CSS
借助 conic-gradient 怎么着画出来。

澳门葡京 30

若是我们的布局如下:

<div class=”bg”> <div class=”point”></div>
</div>

1
2
3
<div class="bg">
    <div class="point"></div>
</div>

CSS:

.bg { position: relative; margin: 50px auto; width: 400px; height:
400px; border-radius: 50%; background: conic-gradient(#f1462c 0%,
#fc5d2c 12.4%, #fff 12.5%, #fff 12.5%, #fc5d2c 12.5%, #fba73e
24.9%, #fff 24.9%, #fff 25%, #fba73e 25%, #e0fa4e 37.4%, #fff
37.4%, #fff 37.5%, #e0fa4e 37.5%, #12dd7e 49.9%, #fff 49.9%, #fff
50%, #12dd7e 50%, #0a6e3f 62.4%, #fff 62.4%, #fff 62.5%); transform:
rotate(-112.5deg); transform-origin: 50% 50%; } .bg::before { content:
“”; position: absolute; top: 50%; left: 50%; transform: translate(-50%,
-50%); width: 370px; height: 370px; border-radius: 50%; background:
#fff; } .bg::after { content: “”; position: absolute; top: 50%; left:
50%; transform: translate(-50%, -50%); width: 320px; height: 320px;
border-radius: 50%; background: radial-gradient(#fff 0%, #fff 25%,
transparent 25%, transparent 100%), conic-gradient(#f1462c 0 12.5%,
#fba73e 0 25%, #e0fa4e 0 37.5%, #12dd7e 0 50%, #0a6e3f 0 62.5%,
#fff 0 100%); } .point { position: absolute; width: 30px; height: 30px;
transform: translate(-50%, -50%); left: 50%; top: 50%; background:
radial-gradient(#467dc6 0%, #a4c6f3 100%); border-radius: 50%;
z-index: 999; } .point::before { content: “”; position: absolute; width:
5px; height: 350px; left: 50%; top: 50%; transform: translate(-50%,
-50%) rotate(0); border-radius: 100% 100% 5% 5%; background:
linear-gradient( 180deg, #9bc7f6 0, #467dc6 50%, transparent 50%,
transparent 100% ); animation: rotate 3s cubic-bezier(.93, 1.32, .89,
1.15) infinite; } @keyframes rotate { 50% { transform: translate(-50%,
-50%) rotate(150deg); } 100% { transform: translate(-50%, -50%)
rotate(150deg); } }

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
.bg {
    position: relative;
    margin: 50px auto;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: conic-gradient(#f1462c 0%, #fc5d2c 12.4%, #fff 12.5%, #fff 12.5%, #fc5d2c 12.5%, #fba73e 24.9%, #fff 24.9%, #fff 25%, #fba73e 25%, #e0fa4e 37.4%, #fff 37.4%, #fff 37.5%, #e0fa4e 37.5%, #12dd7e 49.9%, #fff 49.9%, #fff 50%, #12dd7e 50%, #0a6e3f 62.4%, #fff 62.4%, #fff 62.5%);
    transform: rotate(-112.5deg);
    transform-origin: 50% 50%;
}
 
.bg::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 370px;
    height: 370px;
    border-radius: 50%;
    background: #fff;
}
 
.bg::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background:
        radial-gradient(#fff 0%, #fff 25%, transparent 25%, transparent 100%),
        conic-gradient(#f1462c 0 12.5%, #fba73e 0 25%, #e0fa4e 0 37.5%, #12dd7e 0 50%, #0a6e3f 0 62.5%, #fff 0 100%);
        
}
 
.point {
    position: absolute;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    background: radial-gradient(#467dc6 0%, #a4c6f3 100%);
    border-radius: 50%;
    z-index: 999;
}
 
.point::before {
    content: "";
    position: absolute;
    width: 5px;
    height: 350px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0);
    border-radius: 100% 100% 5% 5%;
    background: linear-gradient(
        180deg,
        #9bc7f6 0,
        #467dc6 50%,
        transparent 50%,
        transparent 100%
    );
    animation: rotate 3s cubic-bezier(.93, 1.32, .89, 1.15) infinite;
}
 
@keyframes rotate {
50% {
transform: translate(-50%, -50%) rotate(150deg);
}
100% {
transform: translate(-50%, -50%) rotate(150deg);
}
}

为了呈现 conic-gradient 的实用性,简单将两端融合为一,模拟了一晃。看看效果,马到成功,所以说 conic-gradient 依然有用武之地的:

澳门葡京 31

CodePen 德姆o — 使用 conic-gradient
达成表盘信用分示例

<div class=”stockings left-stockings”></div>
<div class=”stockings right-stockings”></div>

<div class=”stockings left-stockings”></div>
<div class=”stockings right-stockings”></div>

圆锥渐变 conic-gradient polyfill 垫片库

总的来看此间,想必读者们都尝试这么神奇的质量。

唯独,依据惯例,那种 “高科技(science and technology)”
平时包容性都多少滴。conic-gradient 包容性又怎么着呢?

那些惨烈,CSS 官方对其的叙述是:

  • 处于修正阶段的模块(Modules in the revising phase)

远在改正阶段的模块没有处在改革阶段的模块稳定。平日它们的语法还须要详细审查,说不定还会有很大的转移,而且不有限支撑和事先的十三分。替代的语法日常经过测试并已经落到实处。

侥幸的是,在篇章初叶作者也涉及了,感激 LeaVerou 大神,让我们得以提前选拔上那样美好的属性。

LeaVerou
提供了三个垫片库,按照本文上述的语法,添加那么些垫片库,就足以满面红光的利用起来啦。

您必要加上如下的 JS ,垫片库会根据 CSS
语法,生成对应的圆锥渐变图案,并且转化为 BASE64 代码:

<script
src=”//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js”/>
<script
src=”//leaverou.github.io/conic-gradient/conic-gradient.js”/>

1
2
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"/>
<script src="//leaverou.github.io/conic-gradient/conic-gradient.js"/>

因为垫片库的功效是将大家的 CSS 语法转化成为 BASE64
代码替换 background-image: url() 中的内容,所以,上线后是不须求再添加那多个库的。

<div class=”shoes left-shoes”></div>
<div class=”shoes right-shoes”></div>
</div>

<div class=”shoes left-shoes”></div>
<div class=”shoes right-shoes”></div>
</div>

参考文献

CSS conic-gradient()
polyfill

<div class=”grandpa”>
<div class=”hairs”>
<div class=”hair hair1″></div>
<div class=”hair hair2″></div>
<div class=”hair hair3″></div>
<div class=”hair hair4″></div>
<div class=”hair hair5″></div>
</div>
<div class=”ear left-ear”></div>
<div class=”ear right-ear”></div>
<div class=”header”>

<div class=”grandpa”>
<div class=”hairs”>
<div class=”hair hair1″></div>
<div class=”hair hair2″></div>
<div class=”hair hair3″></div>
<div class=”hair hair4″></div>
<div class=”hair hair5″></div>
</div>
<div class=”ear left-ear”></div>
<div class=”ear right-ear”></div>
<div class=”header”>

最后

多重 CSS 小说汇总在自个儿的 Github 。

好了,本文到此为止,希望对您有匡助 🙂

若是还有啥样疑难照旧提议,可以多多沟通,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏襄助笔者写出越来越多好小说,多谢!

打赏小编

<div class=”bangs”>
<div class=”bang bang1″></div>
<div class=”bang bang2″></div>
<div class=”bang bang3″></div>
</div>

<div class=”bangs”>
<div class=”bang bang1″></div>
<div class=”bang bang2″></div>
<div class=”bang bang3″></div>
</div>

打赏帮忙我写出越来越多好小说,多谢!

任选一种支付办法

澳门葡京 32
澳门葡京 33

1 赞 1 收藏
评论

<div class=”wrinkle wrinkle1″></div>
<div class=”wrinkle wrinkle2″></div>

<div class=”wrinkle wrinkle1″></div>
<div class=”wrinkle wrinkle2″></div>

有关小编:chokcoco

澳门葡京 34

经不住流年似水,逃但是此间少年。

个人主页 ·
小编的文章 ·
63 ·
   

澳门葡京 35

<div class=”brow left-brow”></div>
<div class=”brow right-brow”></div>

<div class=”brow left-brow”></div>
<div class=”brow right-brow”></div>

<div class=”eye left-eye”></div>
<div class=”eye right-eye”></div>

<div class=”eye left-eye”></div>
<div class=”eye right-eye”></div>

<div class=”nose”></div>

<div class=”nose”></div>

<div class=”mouth”></div>
</div>

<div class=”mouth”></div>
</div>

<div class=”clothes”>
<div class=”collar”></div>
<div class=”cover”></div>
</div>
<div class=”hand”></div>

<div class=”clothes”>
<div class=”collar”></div>
<div class=”cover”></div>
</div>
<div class=”hand”></div>

<div class=”trousers”></div>
<div class=”footer left-footer”></div>
<div class=”footer right-footer”></div>
<div class=”shoes left-shoes”></div>
<div class=”shoes right-shoes”></div>

<div class=”trousers”></div>
<div class=”footer left-footer”></div>
<div class=”footer right-footer”></div>
<div class=”shoes left-shoes”></div>
<div class=”shoes right-shoes”></div>

</div>

</div>

</div>
</body>
</html>

</div>
</body>
</html>

 

 

 CSS代码

 CSS代码

@-webkit-keyframes eye {
/* line 2, main.less */
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
/* line 5, main.less */
20% {
-webkit-transform: scale(1, 0.1);
transform: scale(1, 0.1);
}
/* line 9, main.less */
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@keyframes eye {
/* line 2, main.less */
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
/* line 5, main.less */
20% {
-webkit-transform: scale(1, 0.1);
transform: scale(1, 0.1);
}
/* line 9, main.less */
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
/* line 13, main.less */
body {
background: #ffef5e;
}
/* line 16, main.less */
body,
div {
margin: 0;
padding: 0;
background: #ffef5e;
}
/* line 21, main.less */
.border {
border: 1px solid #152131;
}
/* line 24, main.less */
.main {
position: relative;
width: 700px;
margin: 50px auto;
}
/* line 29, main.less */
.me {
position: absolute;
top: 250px;
left: 100px;
z-index: 10;
}
/* line 34, main.less */
.me .hairs {
background: #152131;
width: 190px;
height: 250px;
border-radius: 50% 50% 0 0;
left: -30px;
top: -50px;
position: absolute;
overflow: hidden;
}
/* line 43, main.less */
.me .hairs:after {
content: ”;
position: absolute;
width: 300px;
height: 200px;
background: #ffef5e;
top: 120px;
}
/* line 51, main.less */
.me .hairs .hair {
width: 35px;
height: 45px;
background: #152131;
position: absolute;
z-index: 1;
-webkit-transform: rotate(70deg) scale(1) skew(44deg) translate(8px);
-ms-transform: rotate(70deg) scale(1) skew(44deg) translate(8px);
transform: rotate(70deg) scale(1) skew(44deg) translate(8px);
}
/* line 58, main.less */
.me .hairs .hair.hair1 {
top: 17px;
left: 27px;
}
/* line 62, main.less */
.me .hairs .hair.hair2 {
top: 8px;
left: 52px;
}
/* line 66, main.less */
.me .hairs .hair.hair3 {
top: 4px;
left: 73px;
}
/* line 70, main.less */
.me .hairs .hair.hair4 {
top: 0;
left: 90px;
}
/* line 74, main.less */
.me .hairs .hair.hair5 {
top: 4px;
left: 108px;
}
/* line 78, main.less */
.me .hairs .hair.hair6 {
top: 8px;
left: 125px;
}
/* line 82, main.less */
.me .hairs .hair.hair7 {
top: 17px;
right: 17px;
}
/* line 88, main.less */
.me .face {
background: #fbdac7;
width: 130px;
height: 100px;
position: absolute;
top: 0;
border-radius: 20px 20px 50px 50px;
border: 1px solid #152131;
}
/* line 95, main.less */
.me .face:after {
content: “”;
width: 14px;
height: 10px;
background: #fbdac7;
position: absolute;
bottom: -12px;
left: 50%;
margin-left: -7px;
border: 1px solid #152131;
}
/* line 107, main.less */
.me .face .brow {
width: 42px;
height: 10px;
background: #152131;
position: absolute;
top: 26px;
border-radius: 50%;
}
/* line 114, main.less */
.me .face .brow:after {
content: “”;
background: #fbdac7;
position: absolute;
width: 50px;
height: 10px;
top: 1px;
border-radius: 50%;
}
/* line 123, main.less */
.me .face .brow.left-brow {
left: 18px;
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
/* line 127, main.less */
.me .face .brow.right-brow {
right: 14px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
/* line 132, main.less */
.me .face .eye {
width: 14px;
height: 14px;
border-radius: 50%;
background: #000;
position: absolute;
top: 40px;
z-index: 2;
}
/* line 140, main.less */
.me .face .eye.left-eye {
left: 32%;
}
/* line 143, main.less */
.me .face .eye.right-eye {
right: 32%;
}
/* line 148, main.less */
.me .face .blusher {
width: 12px;
height: 12px;
澳门葡京,border-radius: 50%;
background: #f79c99;
position: absolute;
top: 70px;
}
/* line 155, main.less */
.me .face .blusher.left-blusher {
left: 8px;
}
/* line 158, main.less */
.me .face .blusher.right-blusher {
right: 8px;
}
/* line 162, main.less */
.me .face .mouth {
border: 1px solid #152131;
z-index: 1;
width: 30px;
height: 30px;
background: #d96b6e;
position: absolute;
top: 50px;
left: 50px;
border-radius: 50%;
}
/* line 172, main.less */
.me .face .mouth:after {
content: “”;
width: 60px;
height: 30px;
background: #fbdac7;
position: absolute;
top: -10px;
left: -20px;
border-radius: 30%;
}
/* line 183, main.less */
.me .face .ear {
width: 10px;
height: 20px;
background: #fbdac7;
position: absolute;
top: 30px;
z-index: 2;
}
/* line 190, main.less */
.me .face .ear.left-ear {
left: -11px;
border-radius: 5px 0 0 10px;
}
/* line 194, main.less */
.me .face .ear.right-ear {
right: -11px;
border-radius: 0 5px 10px 0;
}
/* line 200, main.less */
.me .clothes {
background: #fff;
width: 70px;
height: 80px;
position: absolute;
top: 112px;
left: 31px;
z-index: 2;
border-radius: 30% 30% 10px 10px;
overflow: hidden;
border: 1px solid #152131;
}
/* line 211, main.less */
.me .clothes .sleeve {
background: #fff;
width: 40px;
height: 40px;
position: absolute;
top: 10px;
border-radius: 10px;
}
/* line 231, main.less */
.me .clothes .collar {
z-index: 3;
position: absolute;
border: 1px solid #152131;
width: 20px;
height: 10px;
background: #fff;
}
/* line 238, main.less */
.me .clothes .collar.left-collar {
left: 12px;
-webkit-transform: rotate(50deg);
-ms-transform: rotate(50deg);
transform: rotate(50deg);
}
/* line 242, main.less */
.me .clothes .collar.right-collar {
right: 12px;
-webkit-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
transform: rotate(-50deg);
}
/* line 247, main.less */
.me .clothes .straps {
z-index: 2;
position: absolute;
width: 6px;
height: 100px;
background: #e9003a;
border: 1px solid #152131;
}
/* line 254, main.less */
.me .clothes .straps.left-straps {
left: 12px;
}
/* line 257, main.less */
.me .clothes .straps.right-straps {
right: 12px;
}
/* line 262, main.less */
.me .arm {
width: 70px;
height: 70px;
border-radius: 50%;
background: #fff;
border: 1px solid #152131;
z-index: 1;
position: absolute;
top: 115px;
z-index: 0;
}
/* line 272, main.less */
.me .arm.left-arm {
left: 10px;
}
/* line 274, main.less */
.me .arm.left-arm:after {
content: “”;
position: absolute;
background: #ffef5e;
width: 60px;
height: 60px;
left: 12px;
top: 5px;
border-radius: 50%;
border: 1px solid #152131;
}
/* line 286, main.less */
.me .arm.right-arm {
left: 52px;
}
/* line 288, main.less */
.me .arm.right-arm:after {
content: “”;
position: absolute;
background: #ffef5e;
width: 60px;
height: 60px;
left: -4px;
top: 5px;
border-radius: 50%;
border: 1px solid #152131;
}
/* line 301, main.less */
.me .belt {
background: #ed023a;
border: 1px solid #152131;
height: 10px;
left: 31px;
position: absolute;
top: 182px;
width: 70px;
z-index: 3;
}
/* line 311, main.less */
.me .skirt {
background: #ed023a;
background: none;
border-color: #e9003a transparent;
-webkit-border-image: none;
-o-border-image: none;
border-image: none;
border-style: solid;
border-width: 0px 30px 50px;
height: 0;
left: 1px;
position: absolute;
top: 194px;
width: 72px;
z-index: 3;
border-radius: 0 0 50% 50%;
}
/* line 326, main.less */
.me .skirt .line {
width: 1px;
height: 30px;
position: absolute;
background: #000;
top: 10px;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
/* line 333, main.less */
.me .skirt .line.line1 {
left: 10px;
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
/* line 337, main.less */
.me .skirt .line.line2 {
left: 25px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
/* line 341, main.less */
.me .skirt .line.line3 {
left: 35px;
}
/* line 344, main.less */
.me .skirt .line.line4 {
right: 25px;
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
/* line 348, main.less */
.me .skirt .line.line5 {
right: 10px;
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
}
/* line 354, main.less */
.me .leg {
width: 12px;
height: 40px;
background: #fadbc7;
border: 1px solid #152131;
position: absolute;
top: 220px;
z-index: 2;
}
/* line 362, main.less */
.me .leg.left-leg {
left: 40px;
}
/* line 365, main.less */
.me .leg.right-leg {
left: 78px;
}
/* line 368, main.less */
.me .leg:after {
content: ”;
width: 12px;
height: 16px;
background: #fff;
border: 1px solid #152131;
border-bottom: 0;
top: 40px;
left: -1px;
position: absolute;
}
/* line 380, main.less */
.me .stockings {
width: 28px;
height: 12px;
background: #fff;
border: 1px solid #152131;
position: absolute;
z-index: 1;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
/* line 388, main.less */
.me .stockings.left-stockings {
left: 21px;
top: 275px;
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
border-radius: 50% 0 0 50%;
}
/* line 394, main.less */
.me .stockings.right-stockings {
left: 83px;
top: 265px;
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
border-radius: 0 50% 50% 0;
}
/* line 401, main.less */
.me .shoes {
width: 40px;
height: 17px;
position: absolute;
z-index: 0;
background: #a23030;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
border-radius: 50%;
}
/* line 409, main.less */
.me .shoes.left-shoes {
left: 13px;
top: 280px;
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
border-radius: 50% 0 0 50%;
}
/* line 415, main.less */
.me .shoes.right-shoes {
left: 81px;
top: 267px;
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
border-radius: 0 50% 50% 0;
}
/* line 424, main.less */
.grandpa {
position: absolute;
top: 40px;
left: 280px;
z-index: 10;
width: 126px;
}
/* line 430, main.less */
.grandpa .hairs {
position: absolute;
z-index: 3;
width: 126px;
}
/* line 435, main.less */
.grandpa .hairs .hair {
background: #152131;
width: 1px;
height: 5px;
position: absolute;
}
/* line 440, main.less */
.grandpa .hairs .hair.hair1 {
left: 40px;
top: 12px;
}
/* line 444, main.less */
.grandpa .hairs .hair.hair2 {
left: 50px;
top: 8px;
}
/* line 448, main.less */
.grandpa .hairs .hair.hair3 {
left: 62px;
top: 5px;
}
/* line 452, main.less */
.grandpa .hairs .hair.hair4 {
right: 50px;
top: 8px;
}
/* line 456, main.less */
.grandpa .hairs .hair.hair5 {
right: 40px;
top: 12px;
}
/* line 462, main.less */
.grandpa .ear {
width: 20px;
height: 20px;
background: #f8bb9f;
border: 1px solid #152131;
position: absolute;
top: 90px;
border-radius: 50%;
z-index: 1;
}
/* line 471, main.less */
.grandpa .ear.left-ear {
left: -10px;
}
/* line 474, main.less */
.grandpa .ear.right-ear {
right: -10px;
}
/* line 478, main.less */
.grandpa .header {
top: 10px;
position: absolute;
width: 126px;
height: 180px;
background: #f8bb9f;
display: block;
border-radius: 175% 175% 150% 150%;
z-index: 2;
border: 1px solid #152131;
}
/* line 488, main.less */
.grandpa .header:after {
background: #f8bb9f;
bottom: -12px;
content: “”;
height: 10px;
left: 50%;
margin-left: -7px;
position: absolute;
width: 14px;
border: 1px solid #152131;
}
/* line 499, main.less */
.grandpa .header .bang {
background: #152131;
width: 1px;
height: 3px;
position: absolute;
z-index: 1;
top: 12px;
}
/* line 506, main.less */
.grandpa .header .bang.bang1 {
left: 50px;
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
}
/* line 510, main.less */
.grandpa .header .bang.bang2 {
left: 63px;
}
/* line 513, main.less */
.grandpa .header .bang.bang3 {
right: 50px;
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
/* line 518, main.less */
.grandpa .header .wrinkle {
position: absolute;
height: 1px;
background: #152131;
border-radius: 50%;
}
/* line 523, main.less */
.grandpa .header .wrinkle.wrinkle1 {
top: 30px;
width: 30px;
left: 48px;
}
/* line 528, main.less */
.grandpa .header .wrinkle.wrinkle2 {
top: 40px;
width: 20px;
left: 53px;
}
/* line 534, main.less */
.grandpa .header .brow {
position: absolute;
top: 60px;
width: 50px;
height: 30px;
border-radius: 50%;
background: #152131;
}
/* line 541, main.less */
.grandpa .header .brow:after {
content: “”;
position: absolute;
border-radius: 50%;
width: 60px;
height: 30px;
background: #f8bb9f;
top: 1px;
left: -1px;
}
/* line 551, main.less */
.grandpa .header .brow.left-brow {
left: 20px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
/* line 555, main.less */
.grandpa .header .brow.right-brow {
left: 67px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
/* line 560, main.less */
.grandpa .header .eye {
position: absolute;
top: 80px;
width: 30px;
height: 50px;
border-radius: 50%;
background: #152131;
}
/* line 568, main.less */
.grandpa .header .eye:after {
content: “”;
position: absolute;
border-radius: 50%;
width: 34px;
height: 55px;
background: #f8bb9f;
top: 1px;
left: 0px;
}
/* line 578, main.less */
.grandpa .header .eye.left-eye {
left: 20px;
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
/* line 583, main.less */
.grandpa .header .eye.right-eye {
left: 80px;
top: 79px;
-webkit-transform: rotate(-40deg) rotateY(160deg);
transform: rotate(-40deg) rotateY(160deg);
}
/* line 589, main.less */
.grandpa .header .nose {
width: 6px;
height: 22px;
position: absolute;
top: 105px;
left: 58px;
background: #f8bb9f;
z-index: 2;
border: 1px solid #152131;
border-radius: 50%;
}
/* line 599, main.less */
.grandpa .header .nose:after {
content: “”;
position: absolute;
width: 4px;
height: 22px;
top: -5px;
left: 1px;
background: #f8bb9f;
}
/* line 609, main.less */
.grandpa .header .mouth {
border: 1px solid #152131;
z-index: 1;
width: 30px;
height: 30px;
background: #d96b6e;
position: absolute;
top: 130px;
left: 46px;
border-radius: 50%;
}
/* line 619, main.less */
.grandpa .header .mouth:after {
content: “”;
width: 60px;
height: 30px;
background: #f8bb9f;
position: absolute;
top: -10px;
left: -20px;
border-radius: 50%;
}
/* line 632, main.less */
.grandpa .clothes {
background: #a5d1d2;
width: 100px;
position: absolute;
top: 200px;
height: 130px;
left: 14px;
border-radius: 50% 50% 10% 10%;
z-index: 2;
border: 1px solid #152131;
}
/* line 642, main.less */
.grandpa .clothes .cover {
border-radius: 50% 50% 10% 10%;
width: 102px;
height: 60px;
background: #a5d1d2;
position: absolute;
top: 0;
z-index: 3;
}
/* line 651, main.less */
.grandpa .clothes .collar {
border-radius: 50% 50% 10% 10%;
height: 130px;
width: 100px;
position: absolute;
z-index: 4;
background: #a5d1d2;
overflow: hidden;
}
/* line 659, main.less */
.grandpa .clothes .collar:after {
content: “”;
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
background: #a5d1d2;
left: 30px;
top: -20px;
border: 1px solid #152131;
z-index: 5;
}
/* line 673, main.less */
.grandpa .hand {
z-index: 1;
background: #a5d1d2;
border: 1px solid #152131;
border-radius: 90% 90% 50% 50%;
height: 110px;
left: -13px;
position: absolute;
top: 200px;
width: 150px;
}
/* line 685, main.less */
.grandpa .trousers {
border: 1px solid #152131;
height: 140px;
left: 16px;
position: absolute;
top: 331px;
width: 96px;
background: #6c8d6e;
}
/* line 693, main.less */
.grandpa .trousers:after {
content: “”;
-webkit-transform: rotate(82deg) scale(0.825) skew(70deg)
translate(0px);
-ms-transform: rotate(82deg) scale(0.825) skew(70deg) translate(0px);
transform: rotate(82deg) scale(0.825) skew(70deg) translate(0px);
width: 400px;
background: #ffef5e;
height: 100px;
left: -152px;
position: absolute;
top: 250px;
}
/* line 705, main.less */
.grandpa .footer {
width: 30px;
height: 15px;
background: #a18883;
position: absolute;
top: 473px;
}
/* line 711, main.less */
.grandpa .footer.left-footer {
width: 25px;
left: 16px;
}
/* line 715, main.less */
.grandpa .footer.right-footer {
left: 84px;
}
/* line 719, main.less */
.grandpa .shoes {
width: 45px;
height: 18px;
position: absolute;
top: 483px;
background: #555a6d;
}
/* line 725, main.less */
.grandpa .shoes.left-shoes {
border-radius: 50% 0 30% 50%;
left: -4px;
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
/* line 730, main.less */
.grandpa .shoes.right-shoes {
border-radius: 0 50% 50% 30%;
left: 84px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}

@-webkit-keyframes eye {
/* line 2, main.less */
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
/* line 5, main.less */
20% {
-webkit-transform: scale(1, 0.1);
transform: scale(1, 0.1);
}
/* line 9, main.less */
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@keyframes eye {
/* line 2, main.less */
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
/* line 5, main.less */
20% {
-webkit-transform: scale(1, 0.1);
transform: scale(1, 0.1);
}
/* line 9, main.less */
100% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
/* line 13, main.less */
body {
background: #ffef5e;
}
/* line 16, main.less */
body,
div {
margin: 0;
padding: 0;
background: #ffef5e;
}
/* line 21, main.less */
.border {
border: 1px solid #152131;
}
/* line 24, main.less */
.main {
position: relative;
width: 700px;
margin: 50px auto;
}
/* line 29, main.less */
.me {
position: absolute;
top: 250px;
left: 100px;
z-index: 10;
}
/* line 34, main.less */
.me .hairs {
background: #152131;
width: 190px;
height: 250px;
border-radius: 50% 50% 0 0;
left: -30px;
top: -50px;
position: absolute;
overflow: hidden;
}
/* line 43, main.less */
.me .hairs:after {
content: ”;
position: absolute;
width: 300px;
height: 200px;
background: #ffef5e;
top: 120px;
}
/* line 51, main.less */
.me .hairs .hair {
width: 35px;
height: 45px;
background: #152131;
position: absolute;
z-index: 1;
-webkit-transform: rotate(70deg) scale(1) skew(44deg) translate(8px);
-ms-transform: rotate(70deg) scale(1) skew(44deg) translate(8px);
transform: rotate(70deg) scale(1) skew(44deg) translate(8px);
}
/* line 58, main.less */
.me .hairs .hair.hair1 {
top: 17px;
left: 27px;
}
/* line 62, main.less */
.me .hairs .hair.hair2 {
top: 8px;
left: 52px;
}
/* line 66, main.less */
.me .hairs .hair.hair3 {
top: 4px;
left: 73px;
}
/* line 70, main.less */
.me .hairs .hair.hair4 {
top: 0;
left: 90px;
}
/* line 74, main.less */
.me .hairs .hair.hair5 {
top: 4px;
left: 108px;
}
/* line 78, main.less */
.me .hairs .hair.hair6 {
top: 8px;
left: 125px;
}
/* line 82, main.less */
.me .hairs .hair.hair7 {
top: 17px;
right: 17px;
}
/* line 88, main.less */
.me .face {
background: #fbdac7;
width: 130px;
height: 100px;
position: absolute;
top: 0;
border-radius: 20px 20px 50px 50px;
border: 1px solid #152131;
}
/* line 95, main.less */
.me .face:after {
content: “”;
width: 14px;
height: 10px;
background: #fbdac7;
position: absolute;
bottom: -12px;
left: 50%;
margin-left: -7px;
border: 1px solid #152131;
}
/* line 107, main.less */
.me .face .brow {
width: 42px;
height: 10px;
background: #152131;
position: absolute;
top: 26px;
border-radius: 50%;
}
/* line 114, main.less */
.me .face .brow:after {
content: “”;
background: #fbdac7;
position: absolute;
width: 50px;
height: 10px;
top: 1px;
border-radius: 50%;
}
/* line 123, main.less */
.me .face .brow.left-brow {
left: 18px;
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
/* line 127, main.less */
.me .face .brow.right-brow {
right: 14px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
/* line 132, main.less */
.me .face .eye {
width: 14px;
height: 14px;
border-radius: 50%;
background: #000;
position: absolute;
top: 40px;
z-index: 2;
}
/* line 140, main.less */
.me .face .eye.left-eye {
left: 32%;
}
/* line 143, main.less */
.me .face .eye.right-eye {
right: 32%;
}
/* line 148, main.less */
.me .face .blusher {
width: 12px;
height: 12px;
border-radius: 50%;
background: #f79c99;
position: absolute;
top: 70px;
}
/* line 155, main.less */
.me .face .blusher.left-blusher {
left: 8px;
}
/* line 158, main.less */
.me .face .blusher.right-blusher {
right: 8px;
}
/* line 162, main.less */
.me .face .mouth {
border: 1px solid #152131;
z-index: 1;
width: 30px;
height: 30px;
background: #d96b6e;
position: absolute;
top: 50px;
left: 50px;
border-radius: 50%;
}
/* line 172, main.less */
.me .face .mouth:after {
content: “”;
width: 60px;
height: 30px;
background: #fbdac7;
position: absolute;
top: -10px;
left: -20px;
border-radius: 30%;
}
/* line 183, main.less */
.me .face .ear {
width: 10px;
height: 20px;
background: #fbdac7;
position: absolute;
top: 30px;
z-index: 2;
}
/* line 190, main.less */
.me .face .ear.left-ear {
left: -11px;
border-radius: 5px 0 0 10px;
}
/* line 194, main.less */
.me .face .ear.right-ear {
right: -11px;
border-radius: 0 5px 10px 0;
}
/* line 200, main.less */
.me .clothes {
background: #fff;
width: 70px;
height: 80px;
position: absolute;
top: 112px;
left: 31px;
z-index: 2;
border-radius: 30% 30% 10px 10px;
overflow: hidden;
border: 1px solid #152131;
}
/* line 211, main.less */
.me .clothes .sleeve {
background: #fff;
width: 40px;
height: 40px;
position: absolute;
top: 10px;
border-radius: 10px;
}
/* line 231, main.less */
.me .clothes .collar {
z-index: 3;
position: absolute;
border: 1px solid #152131;
width: 20px;
height: 10px;
background: #fff;
}
/* line 238, main.less */
.me .clothes .collar.left-collar {
left: 12px;
-webkit-transform: rotate(50deg);
-ms-transform: rotate(50deg);
transform: rotate(50deg);
}
/* line 242, main.less */
.me .clothes .collar.right-collar {
right: 12px;
-webkit-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
transform: rotate(-50deg);
}
/* line 247, main.less */
.me .clothes .straps {
z-index: 2;
position: absolute;
width: 6px;
height: 100px;
background: #e9003a;
border: 1px solid #152131;
}
/* line 254, main.less */
.me .clothes .straps.left-straps {
left: 12px;
}
/* line 257, main.less */
.me .clothes .straps.right-straps {
right: 12px;
}
/* line 262, main.less */
.me .arm {
width: 70px;
height: 70px;
border-radius: 50%;
background: #fff;
border: 1px solid #152131;
z-index: 1;
position: absolute;
top: 115px;
z-index: 0;
}
/* line 272, main.less */
.me .arm.left-arm {
left: 10px;
}
/* line 274, main.less */
.me .arm.left-arm:after {
content: “”;
position: absolute;
background: #ffef5e;
width: 60px;
height: 60px;
left: 12px;
top: 5px;
border-radius: 50%;
border: 1px solid #152131;
}
/* line 286, main.less */
.me .arm.right-arm {
left: 52px;
}
/* line 288, main.less */
.me .arm.right-arm:after {
content: “”;
position: absolute;
background: #ffef5e;
width: 60px;
height: 60px;
left: -4px;
top: 5px;
border-radius: 50%;
border: 1px solid #152131;
}
/* line 301, main.less */
.me .belt {
background: #ed023a;
border: 1px solid #152131;
height: 10px;
left: 31px;
position: absolute;
top: 182px;
width: 70px;
z-index: 3;
}
/* line 311, main.less */
.me .skirt {
background: #ed023a;
background: none;
border-color: #e9003a transparent;
-webkit-border-image: none;
-o-border-image: none;
border-image: none;
border-style: solid;
border-width: 0px 30px 50px;
height: 0;
left: 1px;
position: absolute;
top: 194px;
width: 72px;
z-index: 3;
border-radius: 0 0 50% 50%;
}
/* line 326, main.less */
.me .skirt .line {
width: 1px;
height: 30px;
position: absolute;
background: #000;
top: 10px;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
/* line 333, main.less */
.me .skirt .line.line1 {
left: 10px;
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
/* line 337, main.less */
.me .skirt .line.line2 {
left: 25px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
/* line 341, main.less */
.me .skirt .line.line3 {
left: 35px;
}
/* line 344, main.less */
.me .skirt .line.line4 {
right: 25px;
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
/* line 348, main.less */
.me .skirt .line.line5 {
right: 10px;
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
}
/* line 354, main.less */
.me .leg {
width: 12px;
height: 40px;
background: #fadbc7;
border: 1px solid #152131;
position: absolute;
top: 220px;
z-index: 2;
}
/* line 362, main.less */
.me .leg.left-leg {
left: 40px;
}
/* line 365, main.less */
.me .leg.right-leg {
left: 78px;
}
/* line 368, main.less */
.me .leg:after {
content: ”;
width: 12px;
height: 16px;
background: #fff;
border: 1px solid #152131;
border-bottom: 0;
top: 40px;
left: -1px;
position: absolute;
}
/* line 380, main.less */
.me .stockings {
width: 28px;
height: 12px;
background: #fff;
border: 1px solid #152131;
position: absolute;
z-index: 1;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
/* line 388, main.less */
.me .stockings.left-stockings {
left: 21px;
top: 275px;
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
border-radius: 50% 0 0 50%;
}
/* line 394, main.less */
.me .stockings.right-stockings {
left: 83px;
top: 265px;
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
border-radius: 0 50% 50% 0;
}
/* line 401, main.less */
.me .shoes {
width: 40px;
height: 17px;
position: absolute;
z-index: 0;
background: #a23030;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
border-radius: 50%;
}
/* line 409, main.less */
.me .shoes.left-shoes {
left: 13px;
top: 280px;
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
border-radius: 50% 0 0 50%;
}
/* line 415, main.less */
.me .shoes.right-shoes {
left: 81px;
top: 267px;
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
border-radius: 0 50% 50% 0;
}
/* line 424, main.less */
.grandpa {
position: absolute;
top: 40px;
left: 280px;
z-index: 10;
width: 126px;
}
/* line 430, main.less */
.grandpa .hairs {
position: absolute;
z-index: 3;
width: 126px;
}
/* line 435, main.less */
.grandpa .hairs .hair {
background: #152131;
width: 1px;
height: 5px;
position: absolute;
}
/* line 440, main.less */
.grandpa .hairs .hair.hair1 {
left: 40px;
top: 12px;
}
/* line 444, main.less */
.grandpa .hairs .hair.hair2 {
left: 50px;
top: 8px;
}
/* line 448, main.less */
.grandpa .hairs .hair.hair3 {
left: 62px;
top: 5px;
}
/* line 452, main.less */
.grandpa .hairs .hair.hair4 {
right: 50px;
top: 8px;
}
/* line 456, main.less */
.grandpa .hairs .hair.hair5 {
right: 40px;
top: 12px;
}
/* line 462, main.less */
.grandpa .ear {
width: 20px;
height: 20px;
background: #f8bb9f;
border: 1px solid #152131;
position: absolute;
top: 90px;
border-radius: 50%;
z-index: 1;
}
/* line 471, main.less */
.grandpa .ear.left-ear {
left: -10px;
}
/* line 474, main.less */
.grandpa .ear.right-ear {
right: -10px;
}
/* line 478, main.less */
.grandpa .header {
top: 10px;
position: absolute;
width: 126px;
height: 180px;
background: #f8bb9f;
display: block;
border-radius: 175% 175% 150% 150%;
z-index: 2;
border: 1px solid #152131;
}
/* line 488, main.less */
.grandpa .header:after {
background: #f8bb9f;
bottom: -12px;
content: “”;
height: 10px;
left: 50%;
margin-left: -7px;
position: absolute;
width: 14px;
border: 1px solid #152131;
}
/* line 499, main.less */
.grandpa .header .bang {
background: #152131;
width: 1px;
height: 3px;
position: absolute;
z-index: 1;
top: 12px;
}
/* line 506, main.less */
.grandpa .header .bang.bang1 {
left: 50px;
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
}
/* line 510, main.less */
.grandpa .header .bang.bang2 {
left: 63px;
}
/* line 513, main.less */
.grandpa .header .bang.bang3 {
right: 50px;
-webkit-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
/* line 518, main.less */
.grandpa .header .wrinkle {
position: absolute;
height: 1px;
background: #152131;
border-radius: 50%;
}
/* line 523, main.less */
.grandpa .header .wrinkle.wrinkle1 {
top: 30px;
width: 30px;
left: 48px;
}
/* line 528, main.less */
.grandpa .header .wrinkle.wrinkle2 {
top: 40px;
width: 20px;
left: 53px;
}
/* line 534, main.less */
.grandpa .header .brow {
position: absolute;
top: 60px;
width: 50px;
height: 30px;
border-radius: 50%;
background: #152131;
}
/* line 541, main.less */
.grandpa .header .brow:after {
content: “”;
position: absolute;
border-radius: 50%;
width: 60px;
height: 30px;
background: #f8bb9f;
top: 1px;
left: -1px;
}
/* line 551, main.less */
.grandpa .header .brow.left-brow {
left: 20px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
/* line 555, main.less */
.grandpa .header .brow.right-brow {
left: 67px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
/* line 560, main.less */
.grandpa .header .eye {
position: absolute;
top: 80px;
width: 30px;
height: 50px;
border-radius: 50%;
background: #152131;
}
/* line 568, main.less */
.grandpa .header .eye:after {
content: “”;
position: absolute;
border-radius: 50%;
width: 34px;
height: 55px;
background: #f8bb9f;
top: 1px;
left: 0px;
}
/* line 578, main.less */
.grandpa .header .eye.left-eye {
left: 20px;
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
/* line 583, main.less */
.grandpa .header .eye.right-eye {
left: 80px;
top: 79px;
-webkit-transform: rotate(-40deg) rotateY(160deg);
transform: rotate(-40deg) rotateY(160deg);
}
/* line 589, main.less */
.grandpa .header .nose {
width: 6px;
height: 22px;
position: absolute;
top: 105px;
left: 58px;
background: #f8bb9f;
z-index: 2;
border: 1px solid #152131;
border-radius: 50%;
}
/* line 599, main.less */
.grandpa .header .nose:after {
content: “”;
position: absolute;
width: 4px;
height: 22px;
top: -5px;
left: 1px;
background: #f8bb9f;
}
/* line 609, main.less */
.grandpa .header .mouth {
border: 1px solid #152131;
z-index: 1;
width: 30px;
height: 30px;
background: #d96b6e;
position: absolute;
top: 130px;
left: 46px;
border-radius: 50%;
}
/* line 619, main.less */
.grandpa .header .mouth:after {
content: “”;
width: 60px;
height: 30px;
background: #f8bb9f;
position: absolute;
top: -10px;
left: -20px;
border-radius: 50%;
}
/* line 632, main.less */
.grandpa .clothes {
background: #a5d1d2;
width: 100px;
position: absolute;
top: 200px;
height: 130px;
left: 14px;
border-radius: 50% 50% 10% 10%;
z-index: 2;
border: 1px solid #152131;
}
/* line 642, main.less */
.grandpa .clothes .cover {
border-radius: 50% 50% 10% 10%;
width: 102px;
height: 60px;
background: #a5d1d2;
position: absolute;
top: 0;
z-index: 3;
}
/* line 651, main.less */
.grandpa .clothes .collar {
border-radius: 50% 50% 10% 10%;
height: 130px;
width: 100px;
position: absolute;
z-index: 4;
background: #a5d1d2;
overflow: hidden;
}
/* line 659, main.less */
.grandpa .clothes .collar:after {
content: “”;
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
background: #a5d1d2;
left: 30px;
top: -20px;
border: 1px solid #152131;
z-index: 5;
}
/* line 673, main.less */
.grandpa .hand {
z-index: 1;
background: #a5d1d2;
border: 1px solid #152131;
border-radius: 90% 90% 50% 50%;
height: 110px;
left: -13px;
position: absolute;
top: 200px;
width: 150px;
}
/* line 685, main.less */
.grandpa .trousers {
border: 1px solid #152131;
height: 140px;
left: 16px;
position: absolute;
top: 331px;
width: 96px;
background: #6c8d6e;
}
/* line 693, main.less */
.grandpa .trousers:after {
content: “”;
-webkit-transform: rotate(82deg) scale(0.825) skew(70deg)
translate(0px);
-ms-transform: rotate(82deg) scale(0.825) skew(70deg) translate(0px);
transform: rotate(82deg) scale(0.825) skew(70deg) translate(0px);
width: 400px;
background: #ffef5e;
height: 100px;
left: -152px;
position: absolute;
top: 250px;
}
/* line 705, main.less */
.grandpa .footer {
width: 30px;
height: 15px;
background: #a18883;
position: absolute;
top: 473px;
}
/* line 711, main.less */
.grandpa .footer.left-footer {
width: 25px;
left: 16px;
}
/* line 715, main.less */
.grandpa .footer.right-footer {
left: 84px;
}
/* line 719, main.less */
.grandpa .shoes {
width: 45px;
height: 18px;
position: absolute;
top: 483px;
background: #555a6d;
}
/* line 725, main.less */
.grandpa .shoes.left-shoes {
border-radius: 50% 0 30% 50%;
left: -4px;
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
/* line 730, main.less */
.grandpa .shoes.right-shoes {
border-radius: 0 50% 50% 30%;
left: 84px;
-webkit-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}

less代码

less代码

@keyframes eye {
0% {
transform:scale(1,1);
}
20% {
transform:scale(1,0.1);
}

@keyframes eye {
0% {
transform:scale(1,1);
}
20% {
transform:scale(1,0.1);
}

100% {
transform:scale(1,1);
}
}
body{
background: #ffef5e;
}
body,div{
margin: 0;
padding: 0;
background: #ffef5e;
}
.border{
border:1px solid #152131;
}
.main{
position: relative;
width: 700px;
margin: 50px auto;
}
.me{
position: absolute;
top: 250px;
left: 100px;
z-index: 10;
.hairs{
background: #152131;
width: 190px;
height: 250px;
border-radius: 50% 50% 0 0;
left: -30px;
top: -50px;
position: absolute;
overflow: hidden;
&:after{
content: ”;
position: absolute;
width: 300px;
height: 200px;
background: #ffef5e;
top: 120px;
}
.hair{
width: 35px;
height: 45px;
background: #152131;
position: absolute;
z-index: 1;
transform: rotate(70deg) scale(1) skew(44deg) translate(8px);
&.hair1{
top: 17px;
left: 27px;
}
&.hair2{
top: 8px;
left: 52px;
}
&.hair3{
top: 4px;
left: 73px;
}
&.hair4{
top: 0;
left: 90px;
}
&.hair5{
top: 4px;
left:108px;
}
&.hair6{
top: 8px;
left: 125px;
}
&.hair7{
top: 17px;
right: 17px;
}
}
}
.face{
background: #fbdac7;
width: 130px;
height: 100px;
position: absolute;
top: 0;
border-radius: 20px 20px 50px 50px;
&:after{ //脖子
content: “”;
width: 14px;
height: 10px;
background: #fbdac7;
position: absolute;
bottom:-12px;
left: 50%;
margin-left: -7px;
.border;
}
.border;
.brow{
width: 42px;
height: 10px;
background: #152131;
position: absolute;
top: 26px;
border-radius: 50%;
&:after{
content: “”;
background: #fbdac7;
position: absolute;
width: 50px;
height: 10px;
top: 1px;
border-radius: 50%;
}
&.left-brow{
left : 18px;
transform:rotate(-10deg);
}
&.right-brow{
right: 14px;
transform:rotate(10deg);
}
}
.eye{
width: 14px;
height: 14px;
border-radius: 50%;
background: #000;
position: absolute;
top: 40px;
z-index: 2;
&.left-eye{
left: 32%;
}
&.right-eye{
right: 32%;
//animation: eye 1s infinite ease;
}
}
.blusher{
width: 12px;
height: 12px;
border-radius: 50%;
background: #f79c99;
position: absolute;
top: 70px;
&.left-blusher{
left: 8px;
}
&.right-blusher{
right: 8px;
}
}
.mouth{
.border;
z-index: 1;
width: 30px;
height: 30px;
background: #d96b6e;
position: absolute;
top: 50px;
left: 50px;
border-radius: 50%;
&:after{
content: “”;
width: 60px;
height: 30px;
background: #fbdac7;
position: absolute;
top: -10px;
left: -20px;
border-radius: 30%;
}
}
.ear{
width: 10px;
height: 20px;
background: #fbdac7;
position: absolute;
top: 30px;
z-index: 2;
&.left-ear{
left: -11px;
border-radius: 5px 0 0 10px;
}
&.right-ear{
right: -11px;
border-radius: 0 5px 10px 0;
}
}
}
.clothes{
background: #fff;
width: 70px;
height: 80px;
position: absolute;
top:112px;
left: 31px;
z-index: 2;
border-radius: 30% 30% 10px 10px;
overflow: hidden;
.border;
.sleeve{
background: #fff;
width: 40px;
height: 40px;
position: absolute;
top: 10px;
border-radius: 10px;
}
// &:before{ //左袖子
// content: “”;
// .sleeve;
// left: -10px;
// transform:rotate(50deg);
// }
// &:after{ //右袖子
// content :””;
// .sleeve;
// right: -10px;
// transform:rotate(-50deg);
// }
.collar{
z-index: 3;
position: absolute;
.border;
width: 20px;
height: 10px;
background: #fff;
&.left-collar{
left: 12px;
transform:rotate(50deg);
}
&.right-collar{
right: 12px;
transform:rotate(-50deg);
}
}
.straps{
z-index: 2;
position: absolute;
width: 6px;
height: 100px;
background: #e9003a;
.border;
&.left-straps{
left: 12px;
}
&.right-straps{
right: 12px;
}
}
}
.arm{
width: 70px;
height: 70px;
border-radius: 50%;
background: #fff;
.border;
z-index: 1;
position: absolute;
top: 115px;
z-index: 0;
&.left-arm{
left: 10px;
&:after{
content: “”;
position: absolute;
background:#ffef5e;
width: 60px;
height: 60px;
left: 12px;
top: 5px;
border-radius: 50%;
.border;
}
}
&.right-arm{
left: 52px;
&:after{
content: “”;
position: absolute;
background:#ffef5e;
width: 60px;
height: 60px;
left: -4px;
top: 5px;
border-radius: 50%;
.border;
}
}
}
.belt{
background: #ed023a;
border: 1px solid #152131;
height: 10px;
left: 31px;
position: absolute;
top: 182px;
width: 70px;
z-index: 3;
}
.skirt{
background: #ed023a;
position: absolute;
background: none;
border-color: #e9003a transparent;
border-image: none;
border-style: solid;
border-width: 0px 30px 50px;
height: 0;
left: 1px;
position: absolute;
top: 194px;
width: 72px;
z-index: 3;
border-radius: 0 0 50% 50%;
.line{
width: 1px;
height: 30px;
position: absolute;
background: #000;
top:10px;
transform-origin:0 0;
&.line1{
left: 10px;
transform:rotate(20deg);
}
&.line2{
left: 25px;
transform:rotate(10deg);
}
&.line3{
left: 35px;
}
&.line4{
right: 25px;
transform:rotate(-10deg);
}
&.line5{
right: 10px;
transform:rotate(-20deg);
}
}
}
.leg{
width: 12px;
height: 40px;
background: #fadbc7;
.border;
position: absolute;
top: 220px;
z-index: 2;
&.left-leg{
left: 40px;
}
&.right-leg{
left: 78px;
}
&:after{
content: ”;
width: 12px;
height: 16px;
background: #fff;
.border;
border-bottom: 0;
top: 40px;
left: -1px;
position: absolute;
}
}
.stockings{
width: 28px;
height: 12px;
background: #fff;
.border;
position: absolute;
z-index: 1;
transform-origin:0 0;
&.left-stockings{
left: 21px;
top: 275px;
transform:rotate(-20deg);
border-radius: 50% 0 0 50%;
}
&.right-stockings{
left: 83px;
top: 265px;
transform:rotate(20deg);
border-radius: 0 50% 50% 0;
}
}
.shoes{
width: 40px;
height: 17px;
position: absolute;
z-index: 0;
background: #a23030;
transform-origin:0 0;
border-radius: 50%;
&.left-shoes{
left: 13px;
top: 280px;
transform:rotate(-20deg);
border-radius: 50% 0 0 50%;
}
&.right-shoes{
left: 81px;
top: 267px;
transform:rotate(20deg);
border-radius: 0 50% 50% 0;
}
}
}

100% {
transform:scale(1,1);
}
}
body{
background: #ffef5e;
}
body,div{
margin: 0;
padding: 0;
background: #ffef5e;
}
.border{
border:1px solid #152131;
}
.main{
position: relative;
width: 700px;
margin: 50px auto;
}
.me{
position: absolute;
top: 250px;
left: 100px;
z-index: 10;
.hairs{
background: #152131;
width: 190px;
height: 250px;
border-radius: 50% 50% 0 0;
left: -30px;
top: -50px;
position: absolute;
overflow: hidden;
&:after{
content: ”;
position: absolute;
width: 300px;
height: 200px;
background: #ffef5e;
top: 120px;
}
.hair{
width: 35px;
height: 45px;
background: #152131;
position: absolute;
z-index: 1;
transform: rotate(70deg) scale(1) skew(44deg) translate(8px);
&.hair1{
top: 17px;
left: 27px;
}
&.hair2{
top: 8px;
left: 52px;
}
&.hair3{
top: 4px;
left: 73px;
}
&.hair4{
top: 0;
left: 90px;
}
&.hair5{
top: 4px;
left:108px;
}
&.hair6{
top: 8px;
left: 125px;
}
&.hair7{
top: 17px;
right: 17px;
}
}
}
.face{
background: #fbdac7;
width: 130px;
height: 100px;
position: absolute;
top: 0;
border-radius: 20px 20px 50px 50px;
&:after{ //脖子
content: “”;
width: 14px;
height: 10px;
background: #fbdac7;
position: absolute;
bottom:-12px;
left: 50%;
margin-left: -7px;
.border;
}
.border;
.brow{
width: 42px;
height: 10px;
background: #152131;
position: absolute;
top: 26px;
border-radius: 50%;
&:after{
content: “”;
background: #fbdac7;
position: absolute;
width: 50px;
height: 10px;
top: 1px;
border-radius: 50%;
}
&.left-brow{
left : 18px;
transform:rotate(-10deg);
}
&.right-brow{
right: 14px;
transform:rotate(10deg);
}
}
.eye{
width: 14px;
height: 14px;
border-radius: 50%;
background: #000;
position: absolute;
top: 40px;
z-index: 2;
&.left-eye{
left: 32%;
}
&.right-eye{
right: 32%;
//animation: eye 1s infinite ease;
}
}
.blusher{
width: 12px;
height: 12px;
border-radius: 50%;
background: #f79c99;
position: absolute;
top: 70px;
&.left-blusher{
left: 8px;
}
&.right-blusher{
right: 8px;
}
}
.mouth{
.border;
z-index: 1;
width: 30px;
height: 30px;
background: #d96b6e;
position: absolute;
top: 50px;
left: 50px;
border-radius: 50%;
&:after{
content: “”;
width: 60px;
height: 30px;
background: #fbdac7;
position: absolute;
top: -10px;
left: -20px;
border-radius: 30%;
}
}
.ear{
width: 10px;
height: 20px;
background: #fbdac7;
position: absolute;
top: 30px;
z-index: 2;
&.left-ear{
left: -11px;
border-radius: 5px 0 0 10px;
}
&.right-ear{
right: -11px;
border-radius: 0 5px 10px 0;
}
}
}
.clothes{
background: #fff;
width: 70px;
height: 80px;
position: absolute;
top:112px;
left: 31px;
z-index: 2;
border-radius: 30% 30% 10px 10px;
overflow: hidden;
.border;
.sleeve{
background: #fff;
width: 40px;
height: 40px;
position: absolute;
top: 10px;
border-radius: 10px;
}
// &:before{ //左袖子
// content: “”;
// .sleeve;
// left: -10px;
// transform:rotate(50deg);
// }
// &:after{ //右袖子
// content :””;
// .sleeve;
// right: -10px;
// transform:rotate(-50deg);
// }
.collar{
z-index: 3;
position: absolute;
.border;
width: 20px;
height: 10px;
background: #fff;
&.left-collar{
left: 12px;
transform:rotate(50deg);
}
&.right-collar{
right: 12px;
transform:rotate(-50deg);
}
}
.straps{
z-index: 2;
position: absolute;
width: 6px;
height: 100px;
background: #e9003a;
.border;
&.left-straps{
left: 12px;
}
&.right-straps{
right: 12px;
}
}
}
.arm{
width: 70px;
height: 70px;
border-radius: 50%;
background: #fff;
.border;
z-index: 1;
position: absolute;
top: 115px;
z-index: 0;
&.left-arm{
left: 10px;
&:after{
content: “”;
position: absolute;
background:#ffef5e;
width: 60px;
height: 60px;
left: 12px;
top: 5px;
border-radius: 50%;
.border;
}
}
&.right-arm{
left: 52px;
&:after{
content: “”;
position: absolute;
background:#ffef5e;
width: 60px;
height: 60px;
left: -4px;
top: 5px;
border-radius: 50%;
.border;
}
}
}
.belt{
background: #ed023a;
border: 1px solid #152131;
height: 10px;
left: 31px;
position: absolute;
top: 182px;
width: 70px;
z-index: 3;
}
.skirt{
background: #ed023a;
position: absolute;
background: none;
border-color: #e9003a transparent;
border-image: none;
border-style: solid;
border-width: 0px 30px 50px;
height: 0;
left: 1px;
position: absolute;
top: 194px;
width: 72px;
z-index: 3;
border-radius: 0 0 50% 50%;
.line{
width: 1px;
height: 30px;
position: absolute;
background: #000;
top:10px;
transform-origin:0 0;
&.line1{
left: 10px;
transform:rotate(20deg);
}
&.line2{
left: 25px;
transform:rotate(10deg);
}
&.line3{
left: 35px;
}
&.line4{
right: 25px;
transform:rotate(-10deg);
}
&.line5{
right: 10px;
transform:rotate(-20deg);
}
}
}
.leg{
width: 12px;
height: 40px;
background: #fadbc7;
.border;
position: absolute;
top: 220px;
z-index: 2;
&.left-leg{
left: 40px;
}
&.right-leg{
left: 78px;
}
&:after{
content: ”;
width: 12px;
height: 16px;
background: #fff;
.border;
border-bottom: 0;
top: 40px;
left: -1px;
position: absolute;
}
}
.stockings{
width: 28px;
height: 12px;
background: #fff;
.border;
position: absolute;
z-index: 1;
transform-origin:0 0;
&.left-stockings{
left: 21px;
top: 275px;
transform:rotate(-20deg);
border-radius: 50% 0 0 50%;
}
&.right-stockings{
left: 83px;
top: 265px;
transform:rotate(20deg);
border-radius: 0 50% 50% 0;
}
}
.shoes{
width: 40px;
height: 17px;
position: absolute;
z-index: 0;
background: #a23030;
transform-origin:0 0;
border-radius: 50%;
&.left-shoes{
left: 13px;
top: 280px;
transform:rotate(-20deg);
border-radius: 50% 0 0 50%;
}
&.right-shoes{
left: 81px;
top: 267px;
transform:rotate(20deg);
border-radius: 0 50% 50% 0;
}
}
}

.grandpa{
position: absolute;
top: 40px;
left: 280px;
z-index: 10;
width: 126px;
.hairs{
position: absolute;

.grandpa{
position: absolute;
top: 40px;
left: 280px;
z-index: 10;
width: 126px;
.hairs{
position: absolute;

z-index: 3;
width: 126px;
.hair{
background: #152131;
width: 1px;
height: 5px;
position: absolute;
&.hair1{
left: 40px;
top: 12px;
}
&.hair2{
left: 50px;
top: 8px;
}
&.hair3{
left: 62px;
top: 5px;
}
&.hair4{
right: 50px;
top: 8px;
}
&.hair5{
right: 40px;
top: 12px;
}
}
}
.ear{
width: 20px;
height: 20px;
background: #f8bb9f;
.border;
position: absolute;
top: 90px;
border-radius: 50%;
z-index: 1;
&.left-ear{
left: -10px;
}
&.right-ear{
right: -10px;
}
}
.header{
top: 10px;
position: absolute;
width: 126px;
height: 180px;
background: #f8bb9f;
display: block;
border-radius: 175% 175% 150% 150%;
z-index: 2;
.border;
&:after{
background: #f8bb9f;
bottom: -12px;
content: “”;
height: 10px;
left: 50%;
margin-left: -7px;
position: absolute;
width: 14px;
.border;
}
.bang{
background: #152131;
width: 1px;
height: 3px;
position: absolute;
z-index: 1;
top: 12px;
&.bang1{
left: 50px;
transform:rotate(-20deg);
}
&.bang2{
left: 63px;
}
&.bang3{
right:50px;
transform:rotate(20deg);
}
}
.wrinkle{
position: absolute;
height: 1px;
background: #152131;
border-radius: 50%;
&.wrinkle1{
top: 30px;
width:30px;
left: 48px;
}
&.wrinkle2{
top: 40px;
width:20px;
left: 53px;
}
}
.brow{
position: absolute;
top: 60px;
width: 50px;
height: 30px;
border-radius: 50%;
background: #152131;
&:after{
content: “”;
position: absolute;
border-radius: 50%;
width: 60px;
height: 30px;
background: #f8bb9f;
top: 1px;
left: -1px;
}
&.left-brow{
left: 20px;
transform:rotate(10deg);
}
&.right-brow{
left: 67px;
transform:rotate(10deg);
}
}
.eye{
position: absolute;
top: 80px;
width: 30px;
height: 50px;
border-radius: 50%;
background: #152131;

z-index: 3;
width: 126px;
.hair{
background: #152131;
width: 1px;
height: 5px;
position: absolute;
&.hair1{
left: 40px;
top: 12px;
}
&.hair2{
left: 50px;
top: 8px;
}
&.hair3{
left: 62px;
top: 5px;
}
&.hair4{
right: 50px;
top: 8px;
}
&.hair5{
right: 40px;
top: 12px;
}
}
}
.ear{
width: 20px;
height: 20px;
background: #f8bb9f;
.border;
position: absolute;
top: 90px;
border-radius: 50%;
z-index: 1;
&.left-ear{
left: -10px;
}
&.right-ear{
right: -10px;
}
}
.header{
top: 10px;
position: absolute;
width: 126px;
height: 180px;
background: #f8bb9f;
display: block;
border-radius: 175% 175% 150% 150%;
z-index: 2;
.border;
&:after{
background: #f8bb9f;
bottom: -12px;
content: “”;
height: 10px;
left: 50%;
margin-left: -7px;
position: absolute;
width: 14px;
.border;
}
.bang{
background: #152131;
width: 1px;
height: 3px;
position: absolute;
z-index: 1;
top: 12px;
&.bang1{
left: 50px;
transform:rotate(-20deg);
}
&.bang2{
left: 63px;
}
&.bang3{
right:50px;
transform:rotate(20deg);
}
}
.wrinkle{
position: absolute;
height: 1px;
background: #152131;
border-radius: 50%;
&.wrinkle1{
top: 30px;
width:30px;
left: 48px;
}
&.wrinkle2{
top: 40px;
width:20px;
left: 53px;
}
}
.brow{
position: absolute;
top: 60px;
width: 50px;
height: 30px;
border-radius: 50%;
background: #152131;
&:after{
content: “”;
position: absolute;
border-radius: 50%;
width: 60px;
height: 30px;
background: #f8bb9f;
top: 1px;
left: -1px;
}
&.left-brow{
left: 20px;
transform:rotate(10deg);
}
&.right-brow{
left: 67px;
transform:rotate(10deg);
}
}
.eye{
position: absolute;
top: 80px;
width: 30px;
height: 50px;
border-radius: 50%;
background: #152131;

&:after{
content: “”;
position: absolute;
border-radius: 50%;
width: 34px;
height: 55px;
background: #f8bb9f;
top: 1px;
left: 0px;
}
&.left-eye{
left: 20px;
transform:rotate(30deg);

&:after{
content: “”;
position: absolute;
border-radius: 50%;
width: 34px;
height: 55px;
background: #f8bb9f;
top: 1px;
left: 0px;
}
&.left-eye{
left: 20px;
transform:rotate(30deg);

}
&.right-eye{
left: 80px;
top: 79px;
transform: rotate(-40deg) rotateY(160deg);
}
}
.nose{
width: 6px;
height: 22px;
position: absolute;
top: 105px;
left: 58px;
background: #f8bb9f;
z-index: 2;
.border;
border-radius: 50%;
&:after{
content: “”;
position: absolute;
width: 4px;
height: 22px;
top: -5px;
left: 1px;
background: #f8bb9f;
}
}
.mouth{
.border;
z-index: 1;
width: 30px;
height: 30px;
background: #d96b6e;
position: absolute;
top: 130px;
left: 46px;
border-radius: 50%;
&:after{
content: “”;
width: 60px;
height: 30px;
background: #f8bb9f;
position: absolute;
top: -10px;
left: -20px;
border-radius: 50%;
}
}
}

}
&.right-eye{
left: 80px;
top: 79px;
transform: rotate(-40deg) rotateY(160deg);
}
}
.nose{
width: 6px;
height: 22px;
position: absolute;
top: 105px;
left: 58px;
background: #f8bb9f;
z-index: 2;
.border;
border-radius: 50%;
&:after{
content: “”;
position: absolute;
width: 4px;
height: 22px;
top: -5px;
left: 1px;
background: #f8bb9f;
}
}
.mouth{
.border;
z-index: 1;
width: 30px;
height: 30px;
background: #d96b6e;
position: absolute;
top: 130px;
left: 46px;
border-radius: 50%;
&:after{
content: “”;
width: 60px;
height: 30px;
background: #f8bb9f;
position: absolute;
top: -10px;
left: -20px;
border-radius: 50%;
}
}
}

.clothes{
background: #a5d1d2;
width: 100px;
position: absolute;
top: 200px;
height: 130px;
left: 14px;
border-radius: 50% 50% 10% 10%;
z-index: 2;
.border;
.cover{
border-radius: 50% 50% 10% 10%;
width: 102px;
height: 60px;
background: #a5d1d2;
position: absolute;
top: 0;
z-index: 3;
}
.collar{
border-radius: 50% 50% 10% 10%;
height: 130px;
width: 100px;
position: absolute;
z-index: 4;
background: #a5d1d2;
overflow: hidden;
&:after{
content: “”;
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
background: #a5d1d2;
left: 30px;
top: -20px;
.border;
z-index: 5;
}
}
}
.hand{
.border;
z-index: 1;
background: #a5d1d2;
border: 1px solid #152131;
border-radius: 90% 90% 50% 50%;
height: 110px;
left: -13px;
position: absolute;
top: 200px;
width: 150px;
}
.trousers{
.border;
height: 140px;
left: 16px;
position: absolute;
top: 331px;
width: 96px;
background: #6c8d6e;
&:after{
content: “”;
transform: rotate(82deg) scale(0.825) skew(70deg) translate(0px);
height: 100px;
width: 400px;
background: #ffef5e;
height: 100px;
left: -152px;
position: absolute;
top: 250px;
}
}
.footer{
width: 30px;
height: 15px;
background: #a18883;
position: absolute;
top: 473px;
&.left-footer{
width: 25px;
left: 16px;
}
&.right-footer{
left: 84px;
}
}
.shoes{
width: 45px;
height: 18px;
position: absolute;
top: 483px;
background: #555a6d;
&.left-shoes{
border-radius: 50% 0 30% 50%;
left: -4px;
transform:rotate(-10deg);
}
&.right-shoes{
border-radius: 0 50% 50% 30%;
left: 84px;
transform:rotate(10deg);
}
}
}

.clothes{
background: #a5d1d2;
width: 100px;
position: absolute;
top: 200px;
height: 130px;
left: 14px;
border-radius: 50% 50% 10% 10%;
z-index: 2;
.border;
.cover{
border-radius: 50% 50% 10% 10%;
width: 102px;
height: 60px;
background: #a5d1d2;
position: absolute;
top: 0;
z-index: 3;
}
.collar{
border-radius: 50% 50% 10% 10%;
height: 130px;
width: 100px;
position: absolute;
z-index: 4;
background: #a5d1d2;
overflow: hidden;
&:after{
content: “”;
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
background: #a5d1d2;
left: 30px;
top: -20px;
.border;
z-index: 5;
}
}
}
.hand{
.border;
z-index: 1;
background: #a5d1d2;
border: 1px solid #152131;
border-radius: 90% 90% 50% 50%;
height: 110px;
left: -13px;
position: absolute;
top: 200px;
width: 150px;
}
.trousers{
.border;
height: 140px;
left: 16px;
position: absolute;
top: 331px;
width: 96px;
background: #6c8d6e;
&:after{
content: “”;
transform: rotate(82deg) scale(0.825) skew(70deg) translate(0px);
height: 100px;
width: 400px;
background: #ffef5e;
height: 100px;
left: -152px;
position: absolute;
top: 250px;
}
}
.footer{
width: 30px;
height: 15px;
background: #a18883;
position: absolute;
top: 473px;
&.left-footer{
width: 25px;
left: 16px;
}
&.right-footer{
left: 84px;
}
}
.shoes{
width: 45px;
height: 18px;
position: absolute;
top: 483px;
background: #555a6d;
&.left-shoes{
border-radius: 50% 0 30% 50%;
left: -4px;
transform:rotate(-10deg);
}
&.right-shoes{
border-radius: 0 50% 50% 30%;
left: 84px;
transform:rotate(10deg);
}
}
}

 

 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website