你想不到的！CSS 实现的各种球体效果【附在线演示】

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

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

您可能感兴趣的相关文章

基本形状

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

<figure class="circle"></figure>

　　这里使用的是 HTML5 新增标签 figure，也可以用其它标签。figure 标签专门用于显示网页中的图片或者其它图表内容。为了实现圆型效果，添加一些基础的样式：

.circle {

display: block;

background: black;

border-radius: 50%;

height: 300px;

width: 300px;

margin: 0;

}

aaa

径向渐变

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

　　CSS 代码如下：

.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);

}

　　效果如下：

bbb

阴影和 3D

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

　　这里用到的 HTML 代码如下：

<section class="stage">

  <figure class="ball"><span class="shadow"></span></figure>

</section>

　　CSS 代码如下：

.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 特性，效果如下：

ccc

多层阴影

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

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

}

　　呈现的效果如下：

ddd

光照效果

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

.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);

}

　　效果如下：

eee

8 号球效果

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

　　HTML 代码：

<section class="stage">

  <figure class="ball">

    <span class="shadow"></span>

    <span class="eight"></span>

  </figure>

</section>

　　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;

}

　　效果如下：

fff

眼球效果

　　上面的效果怎么样？相信你已经很惊讶了。不过，CSS 能坐的远不止这些，这里我们再来实现一个眼球效果。

　　HTML 代码如下：

<section class="stage">

  <figure class="ball">

    <span class="shadow"></span>

    <span class="iris"></span>

  </figure>

</section>

　　核心 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);

}

　　最终效果：

ggg

会动的眼球

　　上节实现了眼球效果，这里我们一些关键帧来让眼球动起来，核心 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;

  }

}

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

hhh

您可能感兴趣的相关文章

英文链接：CSS Balls：CSS 实现的各种圆效果【附在线演示】

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源