今天被世界上第一张黑洞照片刷屏。
一整天，哪里都是这张照片。看的多了。我就想用css做一个吧。
建议在chrome上查看。
访问地址：/work/blankHole.html
老规矩，先看效果：
完成这种效果，就需要对图像进行虚化、模糊。
刚好CSS有这个能力。那就是filter。
基本上，filter这个样式有很多选项。这里。我们使用blur就足以满足此次效果。
首先说一下思路。
其实这个做起来相对简单，代码工作只是最少的一部分，想象力到了，代码很快就会实现。
这个效果，按层次来分。一共四层
1、黑洞主体红色主体部分
2、黑洞背景红色虚化部分
3、能量的高亮部分
4、黑洞核心黑色部分。
依次画出几个形状。然后blur就可以了。
下边开始代码实现：
一、先画出主体大致轮廓，我这里上下左右用了4个大小不一圆形：
然后filter:blur(20px)，得到：
这个主体内容就达成了。
二、虚化的红色背景部分。
主体周围杂乱放置一些透明底比较低的红色椭圆。
然后blur(20px)
三、黄色高光样式
使用两个黄色椭圆。里边放两个白色的椭圆。
filter:blur(12px)
四、黑色中心部分，一个黑色的椭圆。blur(13px)，效果完成。
整体实现比较简单的。不过，你们想不想看看黑洞的不模糊的真实样子呢？
铛铛铛铛，是不是很可爱。。
更多特效，请关注我们公众号
最后部分，是源代码：
1
2
3
4
5
6
7
黑洞
8
9 #box{
10 position:relative;
11 width:200px;
12 height:200px;
13 margin:100px auto;
14 }
15 .red-box{
16 position:absolute;
17 left:50px;
18 top:50px;
19 width:100px;
20 height:100px;
21 filter:blur(20px);
22 opacity:.7;
23 }
24 .red{
25 position:absolute;
26 width:100%;
27 height:100%;
28 border-radius:50%;
29 background:#f00;
30 }
31 .yellow-box{
32 position:absolute;
33 left:50px;
34 top:50px;
35 width:80px;
36 height:80px;
37 filter:blur(12px) brightness(1.1);
38 animation:move 2s linear infinite;
39 }
40 .yellow{
41 position:absolute;
42 width:100%;
43 height:100%;
44 border-radius:50%;
45 background:yellow;
46 }
47 .white{
48 position:absolute;
49 left:15px;
50 top:15px;
51 width:46px;
52 height:46px;
53 border-radius:50%;
54 background:#FFF;
55 }
56 .blank-box{
57 position:absolute;
58 left:70px;
59 top:60px;
60 width:60px;
61 height:60px;
62 filter:blur(13px);
63 }
64 .blank{
65 position:absolute;
66 width:100%;
67 height:100%;
68 border-radius:50%;
69 background:#000;
70 }
71 @keyframes move{
72 0%{73 transform:translateX(0)74 }
75 50%{
76 transform:translateX(3px)77 }
78 100%{
79 transform:translateX(0)80 }
81 }82
83
84
85
86
87
