http://www.cnblogs.com/lhb25/p/css-balls.html
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(
90
deg) 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(
-20
deg);
-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(
15
deg) skewY(
2
deg);
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(
15
deg) skewY(
2
deg);
position
:
absolute
;
-webkit-animation: move-eye-skew
5
s 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(
15
deg) skewY(
-10
deg) scale(
0.95
);
}
25%
,
44%
{
-webkit-transform:
none
;
}
50%
,
60%
{
-webkit-transform: translateX(
68px
) translateY(
-40px
) skewX(
5
deg) skewY(
2
deg) scaleX(
0.95
);
}
66%
,
100%
{
-webkit-transform:
none
;
}
}
|
这样，眼球就动起来了，很传神吧？！
扫一扫
1155
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
