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

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

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

基本形状

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

径向渐变

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

代码如下:

阴影和 3D

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

这里用到了 CSS3 perspective 特性,效果如下:

多层阴影

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

光照效果

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

效果如下:

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


眼球效果

上面的效果怎么样?相信你已经很惊讶了。不过,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);
}

会动的眼球

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

这样,眼球就动起来了,很传神吧?!


原文链接:HelloWeb前端网 » 你想不到的!CSS 实现的各种球体效果【附在线演示】 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享