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;
- }
- }
这样, 眼球就动起来了, 很传神吧?!
来源: https://juejin.im/entry/5ac34d675188255c620f465c