你想不到的！CSS實現的各種球體效果【附線上演示】

秋天風景發表於2013-07-16
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 實現的各種圓效果【附線上演示】

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源

作者：山邊小溪

主站：yyyweb.com 記住啦：）

歡迎任何形式的轉載，但請務必註明出處。


相關文章