台球html网页特效代码,你想不到的! web前端中CSS 实现的各种球体效果

CSS 可以实现很多你想不到的效果，今天我们来尝试使用 CSS 实现各种球体效果。有两种方法可以实现，第一种是使用大量的元素创建实际的 3D 球体，这种方法有潜在的性能问题；另外一种是使用 CSS3 渐变和阴影特性来实现，实现方法简单，效果精美。

为保证效果，请使用 Chrome、Firefox、Safari 等现代浏览器浏览。

基本形状

我们先来实现一个基本的圆，HTML 代码如下：

径向渐变

上面实现了基本的圆形效果，这里增加径向渐变效果来实现更逼真的球体。

代码如下：

阴影和 3D

上节已经有基本的球体效果出来了，为了增加立体效果，我们在球的底部加个阴影，这样立体感就更强了。

这里用到了 CSS3 perspective 特性，效果如下：

多层阴影

为了实现更逼真的球体效果，这里应用了多层阴影，呈现的效果如下：

光照效果

上面的效果已经很有立体感了，这里我们再改变一下光照效果，让球体看起来更像斯诺克台球。

效果如下：

8 号球效果

我们再给球体加上数字 8，这样就有了台球黑8 的效果了。

HTML 代码：

CSS 代码：

.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 代码如下：

核心 CSS 代码如下：

.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 代码如下：

@-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;

}

}

这样，眼球就动起来了，很传神吧？！