CSS 实现的各种球体效果【附在线演示】
CSS 可以实现很多你想不到的效果，今天我们来尝试使用 CSS 实现各种球体效果。有两种方法可以实现，第一种是使用大量的元素创建实际的 3D 球体，这种方法有潜在的性能问题；另外一种是使用 CSS3 渐变和阴影特性来实现，实现方法简单，效果精美。
为保证效果，请使用 Chrome、Firefox、Safari 等现代浏览器浏览。
您可能感兴趣的相关文章
基本形状
我们先来实现一个基本的圆，HTML 代码如下：
|
1
|
<figure class="circle"></figure>
|
这里使用的是 HTML5 新增标签 figure，也可以用其它标签。figure 标签专门用于显示网页中的图片或者其它图表内容。为了实现圆型效果，添加一些基础的样式：
|
1
2
3
4
5
6
7
8
|
.circle {
display: block;
background: black;
border-radius: 50%;
height: 300px;
width: 300px;
margin: 0;
} |
径向渐变
上面实现了基本的圆形效果，这里增加径向渐变效果来实现更逼真的球体。
CSS 代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
|
.circle {
display: block;
background: black;
border-radius: 50%;
height: 300px;
width: 300px;
margin: 0;
background: -webkit-radial-gradient(100px 100px, circle, #5cabff, #000);
background: -moz-radial-gradient(100px 100px, circle, #5cabff, #000);
background: radial-gradient(100px 100px, circle, #5cabff, #000);
} |
效果如下：
阴影和 3D
上节已经有基本的球体效果出来了，为了增加立体效果，我们在球的底部加个阴影，这样立体感就更强了。
这里用到的 HTML 代码如下：
|
1
2
3
|
<section class="stage">
<figure class="ball"><span class="shadow"></span></figure>
</section>
|
CSS 代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.stage { width: 300px;
height: 300px;
display: inline-block;
margin: 20px;
-webkit-perspective: 1200px;
-webkit-perspective-origin: 50% 50%;
}.ball .shadow { position: absolute;
width: 100%;
height: 100%;
background: -webkit-radial-gradient(50% 50%, circle, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
-webkit-transform: rotateX(90deg) translateZ(-150px);
z-index: -1;
} |
这里用到了 CSS3 perspective 特性，效果如下：
多层阴影
为了实现更逼真的球体效果，这里应用了多层阴影：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
.ball { display: inline-block;
width: 100%;
height: 100%;
margin: 0;
border-radius: 50%;
position: relative;
background: -webkit-radial-gradient(50% 120%, circle cover, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
);
}.ball:before { content: "";
position: absolute;
top: 1%;
left: 5%;
width: 90%;
height: 90%;
border-radius: 50%;
background: -webkit-radial-gradient(50% 0px, circle, #ffffff, rgba(255, 255, 255, 0) 58%);
-webkit-filter: blur(5px);
z-index: 2;
} |
呈现的效果如下：
光照效果
上面的效果已经很有立体感了，这里我们再改变一下光照效果，让球体看起来更像斯诺克台球。
|
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
|
.ball { display: inline-block;
width: 100%;
height: 100%;
margin: 0;
border-radius: 50%;
position: relative;
background: -webkit-radial-gradient(50% 120%, circle cover, #323232, #0a0a0a 80%, #000000 100%);
}.ball:before { content: "";
position: absolute;
background: -webkit-radial-gradient(50% 120%, circle cover, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%);
border-radius: 50%;
bottom: 2.5%;
left: 5%;
opacity: 0.6;
height: 100%;
width: 90%;
-webkit-filter: blur(5px);
z-index: 2;
}.ball:after { content: "";
width: 100%;
height: 100%;
position: absolute;
top: 5%;
left: 10%;
border-radius: 50%;
background: -webkit-radial-gradient(50% 50%, circle cover, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
-webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
-webkit-filter: blur(10px);
} |
效果如下：
8 号球效果
我们再给球体加上数字 8，这样就有了斯诺克黑8 的效果了。
HTML 代码：
|
1
2
3
4
5
6
|
<section class="stage">
<figure class="ball">
<span class="shadow"></span>
<span class="eight"></span>
</figure>
</section>
|
CSS 代码：
|
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
|
.ball .eight { width: 110px;
height: 110px;
margin: 30%;
background: white;
border-radius: 50%;
-webkit-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
position: absolute;
}.ball .eight:before { content: "8";
display: block;
position: absolute;
text-align: center;
height: 80px;
width: 100px;
left: 50px;
margin-left: -40px;
top: 44px;
margin-top: -40px;
color: black;
font-family: Arial;
font-size: 90px;
line-height: 104px;
} |
效果如下：
眼球效果
上面的效果怎么样？相信你已经很惊讶了。不过，CSS 能坐的远不止这些，这里我们再来实现一个眼球效果。
HTML 代码如下：
|
1
2
3
4
5
6
|
<section class="stage">
<figure class="ball">
<span class="shadow"></span>
<span class="iris"></span>
</figure>
</section>
|
核心 CSS 代码如下：
|
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
|
.iris { width: 40%;
height: 40%;
margin: 30%;
border-radius: 50%;
background: -webkit-radial-gradient(50% 50%, circle cover, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
-webkit-transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
position: absolute;
-webkit-animation: move-eye-skew 5s ease-out infinite;
}.iris:before { content: "";
display: block;
position: absolute;
width: 37.5%;
height: 37.5%;
border-radius: 50%;
top: 31.25%;
left: 31.25%;
background: black;
}.iris:after { content: "";
display: block;
position: absolute;
width: 31.25%;
height: 31.25%;
border-radius: 50%;
top: 18.75%;
left: 18.75%;
background: rgba(255, 255, 255, 0.2);
} |
最终效果：
会动的眼球
上节实现了眼球效果，这里我们一些关键帧来让眼球动起来，核心 CSS 代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
@-webkit-keyframes move-eye-skew { 0% {
-webkit-transform: none;
}
20% {
-webkit-transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
}
25%, 44% {
-webkit-transform: none;
}
50%, 60% {
-webkit-transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);
}
66%, 100% {
-webkit-transform: none;
}
} |
这样，眼球就动起来了，很传神吧？！
您可能感兴趣的相关文章