[譯] 使用CSS製做球體

時間  2019-11-17
標籤 使用 css 製做 球體 欄目 CSS 简体版
原文   原文鏈接

原文連接：cssanimation.rocks/spheres/css

使用border-radius屬性，咱們能夠實現帶圓角的形狀和圓形。能夠添加一些漸變效果來使他們變成圓球。讓咱們嘗試一下，而且能夠添加一些動畫效果來賦予他們活力。chrome

平面設計

咱們能夠經過兩種方式用css來製做圓球。瀏覽器

第一種方式是經過使用大量元素來建立一個真正的3D球體。這種方式存在的缺點就是須要瀏覽器渲染許多元素，從而可能會影響性能。因爲一個平滑的球體須要用到不少元素，因此看起來有點粗糙[應該是想表達想畫一個平滑球體，須要特別多的元素來填補，否則看起來不光滑？]bash

相反地我會嘗試第二種方式，利用css漸變來添加陰影，以及在一個單元素上添加3D效果。工具

例子和源碼

全部在文章中提到的例子能夠經過個人codepen帳戶找到，或者在文章中每一個事例中選擇「Edit on Codepen」查看源碼。性能

在代碼示例中，我沒有添加任何瀏覽器前綴[css前綴]。我推薦使用像Autoprefixer這樣的給工具，或者根據本身的須要添加相應的前綴。優化

基本形狀

在添加細節前，咱們先建立一個最基本的圓形。動畫

從HTML開始：spa

<figure class="circle"></figure>
複製代碼

這裏咱們使用figure元素，但你也可使用其餘元素。figure是HTML5中用於表示圖像或圖表的元素，它是內容的一部分，能夠在不影響內容含義的狀況下刪除。設計

經過figure元素來建立一個圓，我會給它設置寬高，而且設置border-radius爲50%。任何形狀只要設置border-radius超過50%，都會變成圓形。

.circle {
  display: block;
  background: black;
  border-radius: 50%;
  height: 300px;
  width: 300px;
  margin: 0;
}
複製代碼

一個圓形的展現。

See the Pen Spheres tutorial: 1. Circle by Donovan Hutchinson ( @donovanh) on CodePen.

如今咱們有了一個最基礎的圓形，咱們能夠開始美化它，讓它看起來更像個球形。

Shading 101

大部分3D球體教程所作的第一件事就是添加一個簡單的徑向漸變，稍微位置向上以及靠圓心的左側。

咱們能夠經過css來作到這一點：

.circle {
  display: block;
  background: black;
  border-radius: 50%;
  height: 300px;
  width: 300px;
  margin: 0;
  background: radial-gradient(circle at 100px 100px, #5cabff, #000);
}
複製代碼

你應該能夠看到像這樣的效果：

See the Pen Spheres tutorial: 1.b Circle + basic shading by Donovan Hutchinson (@donovanh) on CodePen.

徑向漸變

radial-gradient屬性須要配置一些參數。第一個參數是漸變開始的中心位置。根據*shape* at *position*這種格式。在上個例子中，漸變形狀是circle，它的中心位置離左側100px，離頂部100px。

接下來是設置一系列顏色。你能夠指定兩種顏色以上，但必須在每一個顏色之間添加一個距離，可讓漸變知道什麼時候將每一個顏色過渡到它的下個顏色。

在這個例子中指定了兩種顏色，這讓瀏覽器默認第一個顏色從0%開始，第二個顏色爲100%結束，在這兩個顏色間繪製過渡效果。假如咱們想改變漸變中的其餘步驟，能夠指定距離，用像素或者百分比來表示，在接下來的描述中能夠看到。

咱們有一個看起來有點像3D的東西，看起來很棒，但讓咱們嘗試着讓它看起來更好一些。

Shadows & 3D

根據你應用於曲面的着色陰影，能夠建立出不一樣的外觀效果。首先，讓咱們設置一個場景來將球放在裏面。

在這裏咱們將用到更多的HTML元素：

<section class="stage">
  <figure class="ball"><span class="shadow"></span></figure>
</section>
複製代碼

類名爲ball的標籤裏面包含了用來建立陰影效果span標籤，而它被的父元素是stagediv。當咱們想要設置perspective和定位陰影時， 父元素stagediv頗有用，由於能夠看起來更像是3D效果。

給stage以及shadow添加樣式。

.stage {
  width: 300px;
  height: 300px;
  display: inline-block;
  margin: 20px;
  perspective: 1200px;
  perspective-origin: 50% 50%;
}
.ball .shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
  transform: rotateX(90deg) translateZ(-150px);
  z-index: -1;
}
複製代碼

注意，在上面示例中我沒有添加相對於的css前綴，但在codepen示例中是包含的。在上面示例中我給stagediv設置perspective: 1200px，perspective屬性使具備三維位置變換的元素產生透視效果[大概意思應該是這個]。

給shadow設置徑向漸變radial gradient，而後使用transform屬性來對其定位。在3D空間裏，transform屬性包括旋轉[rorate]、縮放[scale]、移動[move]和傾斜[skew]。讓shadow在x軸上旋轉90度，z軸上向下偏移150px。

因爲咱們在stage容器設置了perspective屬性，因此shadow看起來像是一個拉伸的橢圓形，感受像圓球的影子。

See the Pen Spheres tutorial: 2 Basic plus shadow by Donovan Hutchinson (@donovanh) on CodePen.

它如今看起來比以前要好一點了，讓咱們爲它添加更多的底紋效果。

Multiple shaders

現實中不多會看到只有一個角度發光的物體，由於光會反射到其餘表面上，最終各類光源混合在一塊兒。爲了讓這個球看起來更加真實，咱們使用僞元素添加兩個漸變，讓它看起來更有光澤。

.ball {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
}
.ball:before {
  content: "";
  position: absolute;
  top: 1%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
  filter: blur(5px);
  z-index: 2;
}
複製代碼

這裏咱們設置了兩個稍微複雜的漸變。

第一個漸變是一種弱光效果應用在ball元素上，漸變的中心爲50%、120%，使中心位置離開球表面。我這樣作是使最後的顏色過渡看起來不要太生硬，從而展示出更加平滑的漸變效果。

第二個漸變是位於球體頂部的高亮效果，寬高都爲球體的90%。它位於球體頂部的中心，向外漸漸擴散，直到消失。

我使用了before僞元素，而不是建立一個新元素去蓋在球體上方。

因爲單純使用該漸變會看起來比較生硬，因此我利用了blur效果去對其進行柔化，但目前該屬性只有chrome和safari支持，但在將來其餘瀏覽器中，它可能會發揮更大的做用。

以上兩個漸變的設置讓球擁有更好的視覺效果：

See the Pen Spheres tutorial: 3 Better shading by Donovan Hutchinson (@donovanh) on CodePen.

Shinier

如今球看起來效果很是柔和，因此接下來咱們添加一些光澤，讓它看起來更像一個斯諾克球。

爲達到這個效果，咱們一樣添加柔和的光線，但要將頂部的高光效果調整的更小以及更銳利。咱們須要使用兩個僞選擇器覆蓋在球顏色上，一個底部的高光漸變，一個反射光效果漸變。

.ball {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle at 50% 120%, #323232, #0a0a0a 80%, #000000 100%);
}
.ball:before {
  content: "";
  position: absolute;
  background: radial-gradient(circle at 50% 120%, 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%;
  filter: blur(5px);
  z-index: 2;
}
.ball:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 5%;
  left: 10%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
  transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  filter: blur(10px);
}
複製代碼

這裏咱們設置微弱的漸變效果應用在球上面，before僞元素包含一個較亮的高光，它也從球的底部開始，併產生來自表面的反射光的效果。

這裏加了個新的僞元素after，它是一個圓形漸變效果，從中心位置50% 50%漸變，並在24％左右的標記處漸變爲透明。這個漸變產生了白色反光的效果，但爲了讓它看起來更像是一個反射光，咱們設置了transform來調整它的位置。

設置transform屬性，往左移動80px，往上移動90px，而且設置了傾斜效果，往x軸傾斜拉伸，使其看起來更像是球反射出的光澤。

See the Pen Spheres tutorial: 4 Shinier by Donovan Hutchinson (@donovanh) on CodePen.

8-ball

讓咱們繼續添加數字8，看起來更像是一個檯球。

咱們須要一個額外的元素來增長數字8，以及設置其樣式。

<section class="stage">
  <figure class="ball">
    <span class="shadow"></span>
    <span class="eight"></span>
  </figure>
</section>

.ball .eight {
  width: 110px;
  height: 110px;
  margin: 30%;
  background: white;
  border-radius: 50%;
  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;
}
複製代碼

再次利用border-radius建立圓eight，並設置transdform屬性將該元素定位在右上角。這裏我使用before僞元素將數字8添加到content，而後以相似的方式來調整該數字的位置。

一個帶光澤的8號檯球。

See the Pen Spheres tutorial: 4.b 8-ball by Donovan Hutchinson (@donovanh) on CodePen.

Got my eye on you

css的transform的一大優勢就是能夠被應用在動畫上面，將csskeyframes關鍵幀用於動畫，能夠將一系列元素變換做爲動畫應用在元素上。我將製做一個會動的眼球。

首先是調整示例8-ball中使用的一些顏色，細微的調整讓它看起來更像是個眼睛。HTML代碼：

<section class="stage">
  <figure class="ball">
    <span class="shadow"></span>
    <span class="iris"></span>
  </figure>
</section>
複製代碼

除了虹膜和瞳孔樣式以外，其餘css樣式大部分相似於示例8-ball。

.iris {
  width: 40%;
  height: 40%;
  margin: 30%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
  transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
  position: absolute;
  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);
}
複製代碼

藍色漸變造成虹膜的彩色部分，而瞳孔和高光效果使用僞元素進行建立，我還將動畫屬性animation應用到iris元素，設置以下：

animation: animation-name 5s ease-out infinite;
複製代碼

在該例子中，設置了一個名爲「animation-name」的動畫，時間設置爲5秒，無限循環，並設置其緩動效果爲ease-out。ease-out指動畫在快結束時速度變慢，從而達到更加天然的效果。

在沒有建立動畫狀況下，咱們看到一個不會動的眼球。

See the Pen Spheres tutorial: 5 Eyeball by Donovan Hutchinson (@donovanh) on CodePen.

讓咱們建立關鍵幀keyframes來描述眼球應該如何移動。

@keyframes move-eye-skew {
  0% {
    transform: none;
  }
  20% {
    transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
  }
  25%, 44% {
    transform: none;
  }
  50%, 60% {
    transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);
  }
  66%, 100% {
    transform: none;
  }
}
複製代碼

css中的動畫關鍵幀剛開始用起來可能會比較難，你正在作的是用一系列場景來展現元素的各個狀態，每一個狀態對應一個百分比。在該示例中，iris從transform: none開始，在20%時，它設置了iris向左移動傾斜。瀏覽器會自動計算0～20%之間的差距，從而在二者之間進行平滑的過渡。

就像前面說的，完成關鍵幀中設置的一系列場景須要5秒。

不要忘記設置樣式須要的前綴，由於有些瀏覽器存在兼容css樣式問題。

See the Pen Spheres tutorial: 5b Eyeball (animated) by Donovan Hutchinson (@donovanh) on CodePen.

Bubbles

動畫和顏色漸變能夠產生各類有趣多變的效果，好比氣泡？

建立氣泡的外觀與前面的例子相似，在主色調中將透明度調高，並使用倆個僞元素來增長光澤。

設置動畫使氣泡動起來。

@keyframes bubble-anim {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scaleY(0.95) scaleX(1.05);
  }
  48% {
    transform: scaleY(1.1) scaleX(0.9);
  }
  68% {
    transform: scaleY(0.98) scaleX(1.02);
  }
  80% {
    transform: scaleY(1.02) scaleX(0.98);
  }
  97%, 100% {
    transform: scale(1);
  }
}
複製代碼

動畫適用於整個氣泡以及僞元素。

See the Pen Spheres tutorial: 6 Bubble (animated) by Donovan Hutchinson (@donovanh) on CodePen.

Using images

到目前爲止，全部球都是在不使用任何圖像的狀況下建立的。背景圖像能夠添加更多的細節，而且仍然能夠利用僞元素中的css着色。

hop.ie/balls/image…

添加些css漸變效果能夠達到深度錯覺。

See the Pen Spheres tutorial: 7 Tennis ball by Donovan Hutchinson (@donovanh) on CodePen.

Around the world

動畫能夠應用於背景圖像的位置，使用它咱們能夠實現旋轉地球儀效果。

下面的平面圖像在頂部和底部位置稍作拉伸用來做爲背景圖像。

hop.ie/balls/image…

經過添加陰影和動畫，能夠建立出3D效果的地球儀，能夠在Codepen查看其運行結果。因爲該示例的性能問題，我這裏設置爲默認顯示HTML。

ps: 很是感謝Sidoruk Sergey（@Sidoruk_SV）優化這個示例，看起來很棒。

See the Pen Globe by Donovan Hutchinson (@donovanh) on CodePen.

Resources

若是你想了解更多信息，請參考一些有關radial gradients的資料。

想要找更多3D例子？查看Portal CSS獲取更多。

Feedback

全部的示例均可以在個人codepen找到。很是感謝Chris和團隊提供的出色資源。

若是您對上述內容有任何疑問，請經過電子郵件或Twitter與咱們聯繫。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程