CSS 可以实现很多你想不到的效果,今天我们来尝试使用 CSS 实现各种球体效果。有两种方法可以实现,第一种是使用大量的元素创建实际的 3D 球体,这种方法有潜在的性能问题;另外一种是使用 CSS3 渐变和阴影特性来实现,实现方法简单,效果精美。
为保证效果,请使用 Chrome、Firefox、Safari 等现代浏览器浏览。
您可能感兴趣的相关文章
基本形状
我们先来实现一个基本的圆,HTML 代码如下:
这里使用的是 HTML5 新增标签 figure,也可以用其它标签。figure 标签专门用于显示网页中的图片或者其它图表内容。为了实现圆型效果,添加一些基础的样式:
径向渐变
上面实现了基本的圆形效果,这里增加径向渐变效果来实现更逼真的球体。
CSS 代码如下:
效果如下:
阴影和 3D
上节已经有基本的球体效果出来了,为了增加立体效果,我们在球的底部加个阴影,这样立体感就更强了。
这里用到的 HTML 代码如下:
CSS 代码如下:
这里用到了 CSS3 perspective 特性,效果如下:
多层阴影
为了实现更逼真的球体效果,这里应用了多层阴影:
呈现的效果如下:
光照效果
上面的效果已经很有立体感了,这里我们再改变一下光照效果,让球体看起来更像斯诺克台球。
效果如下:
8 号球效果
我们再给球体加上数字 8,这样就有了斯诺克黑8 的效果了。
HTML 代码:
CSS 代码:
效果如下:
眼球效果
上面的效果怎么样?相信你已经很惊讶了。不过,CSS 能坐的远不止这些,这里我们再来实现一个眼球效果。
HTML 代码如下:
核心 CSS 代码如下:
最终效果:
会动的眼球
上节实现了眼球效果,这里我们一些关键帧来让眼球动起来,核心 CSS 代码如下:
这样,眼球就动起来了,很传神吧?!
您可能感兴趣的相关文章