用CSS画一个自己的初音

某天在写元素的圆角时突然想起，前阵子看了CSS Screct一部分(Github地址)，在线可以试读一部分。试读的章节说到了可以用CSS3的一些新特性画出一些非常奇特的形状，这提醒了我：

realize-something

可以画出更加生动的东西吧！
于是尝试一下画一个Q版的初音未来，先上预览图：

miku-preview

或者可以直接戳链接。

接下来我简单就图案的几个值得说明的地方来讲解下…

1. 弯弯的呆毛

fringe

其实这个很简单，只用到了border-radius的属性，原理上我们只要设置好div的宽度和高度，再将div的背景色设置为透明，然后根据是要向那个方向弯曲来设置单个方向的border，将border的宽度设置为呆毛的粗度，再控制div单个角的圆角属性就可以了。

1
2
3
4
5
6
7
8
fringe2 {
    top: -10em;
    left: 2.3em;
    width: 2em;
    height: 8em;
    border-right: 2.5em solid #2acccc;
    border-radius: 0 0 5em 0;
}

诶，原来我们看到的那根弯曲的毛其实是div的border呀~

2. 上下宽度不同的圆脸

head

这个形状的头看起来有点怪呀…
将这个头分解一下，其实可以分成三个部分，上下两个大小不同的半圆和中间的上大下小的梯形。所以这里其实是用伪元素::before和:after来做，把中间的梯形当做div，上下两个半圆就是这个div的::before和:after啦~

这里值得说一下伪元素的妙用，只要用的合适，一个div也可以画出很复杂的图形。还有伪元素是无法应用在窗级元素(如input)上的之前踩过这个坑
简单看过资料，据W3C的说明因为窗级元素是不能有子元素的，伪元素某种意义上是其附着元素的子元素。但是Chrome里的input支持伪元素的使用…应该是坑…

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
#head {
    position: relative;
    width: 10em;
    height: 0;
    border-top: 6em solid #fff1cb;
    border-right: 1.5em solid transparent;
    border-bottom: none;
    border-left: 1.5em solid transparent;
    z-index: 21;
    animation: nodding 5s infinite;
}
#head::before {
    content: "";
    position: absolute;
    top: -11em;
    left: -1.5em;
    width: 13em;
    height: 5em;
    background-color: #fff1cb;
    border-radius: 7em 7em 0 0 / 5em 5em 0 0;
}
#head::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10em;
    height: 2em;
    background-color: #fff1cb;
    border-radius: 0 0 5em 5em / 0 0 2em 2em;
}

3. 微笑的小嘴

mouth

微笑的嘴巴是最容易画的！
这个应该是最简单的，先将div设置成圆形or椭圆形，给背景色设置透明，border-bottom设置为solid，颜色为深灰色，宽度为嘴巴线条的宽度就可以啦~

1
2
3
4
5
6
7
8
9
10
11
12
13
#head .mouth {
    position: absolute;
    top: -.8em;
    left: 4.1em;
    width: 1.2em;
    height: 1em;
    border-top: .2em solid transparent;
    border-left: .2em solid transparent;
    border-right: .2em solid transparent;
    border-bottom: .2em solid #333;
    border-radius: 1em;
    z-index: 22;
}

4. 形状规则的领带

tie

为什么说形状规则呢？且看截图，从上到下其实就是三个我们小学都学过的平面图形优呀！一个是倒立的看起来很胖的梯形，一个是正立的很瘦的梯形，最后一个就是倒立的三角形呀！不要问我为什么最上面的看起来不是梯形…因为被挡了一部分…

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
#body .tie {
    position: absolute;
    top: .5em;
    left: 1.3em;
    width: .8em;
    border-top: 1em solid #2aaaaa;
    border-left: .3em solid transparent;
    border-right: .3em solid transparent;
    z-index: 11;
}
#body .tie::before {
    content: "";
    position: absolute;
    top: 0;
    left: -.6em;
    width: .8em;
    border-bottom: 2.5em solid #2aaaaa;
    border-left: .6em solid transparent;
    border-right: .6em solid transparent;
}
#body .tie::after {
    content: "";
    position: absolute;
    top: 2.5em;
    left: -.6em;
    border-top: .6em solid #2aaaaa;
    border-left: 1em solid transparent;
    border-right: 1em solid transparent;
}

5. 形状好像很规则的发夹

hairpin

看到这里读者应该很熟悉作者的尿性了…都是伪元素、圆角，能来点高端点的吗？
为了提升这篇文章的深度，要强行加入点CSS3的特性才行！
一开始也是分解成三个部分，考虑到视角的因素，看得到的只有方形的三个边，所以用一个div加伪元素可以做到。
考虑到三种颜色，可以给div设置背景色，用到linear-gradient属性，给背景分成三段，分别设置不同的颜色。
倾斜的效果可以用transform的skew属性，将弯折的部分对接起来看起来就是有点立体感的发夹了…

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
#head .hair .hairpin.left {
    top: -10em;
    left: -1em;
    transform: skew(18deg);
}
#head .hair .hairpin {
    position: absolute;
    width: .6em;
    height: 2.5em;
    background: #333;
    z-index: 29;
}
#head .hair .hairpin.left::before {
    content: "";
    position: absolute;
    top: 0em;
    left: -1em;
    width: .6em;
    height: 2.5em;
    background: -webkit-linear-gradient(90deg, #333 30%, #e04e7d 30%, #e04e7d 70%, #333 0);
    background: -o-linear-gradient(90deg, #333 30%, #e04e7d 30%, #e04e7d 70%, #333 0);
    background: linear-gradient(90deg, #333 30%, #e04e7d 30%, #e04e7d 70%, #333 0);
    transform: skew(-36deg);
}
#head .hair .hairpin.left::after {
    content: "";
    position: absolute;
    top: 2.5em;
    left: -1.7em;
    width: .6em;
    height: 2em;
    background: -webkit-linear-gradient(90deg, #333 30%, #e04e7d 30%, #e04e7d 70%, #333 0);
    background: -o-linear-gradient(90deg, #333 30%, #e04e7d 30%, #e04e7d 70%, #333 0);
    background: linear-gradient(90deg, #333 30%, #e04e7d 30%, #e04e7d 70%, #333 0);
    transform: skew(9deg);
}

6. 简单的总结

总的来说，要画出这样的形象，可以选择的属性有以下这些：

  • border-top / border-right / border-bottom / border-left
  • border-radius
  • ::before & ::after
  • transform: rotate / skew / scale / translate
  • background: linear-gradient

参考资料：
CSS秘密花园：复杂背景图案 墙裂推荐此书呀！
one div 有点好玩的一个div实现复杂图形，有很多案例，运用到了很多CSS3特效。