使用CSS創建一個炫酷的球體動畫效果

zacklee 發布于2019-08-30 11:07 / 1974人閱讀

摘要：我最近看到了一個純實現的球體動畫效果經過研究上面的效果實現起來大致可以分為五個步驟，下面就來一一介紹。使用和生成一個圓圈創建一個圓圈的第一步是生成所有組成圓圈的粒子。

我最近看到了一個純CSS實現的球體動畫效果：

經過研究上面的效果實現起來大致可以分為五個步驟，下面就來一一介紹。

1.使用Jade和SCSS生成一個圓圈

創建一個圓圈的第一步是生成所有組成圓圈的粒子。有了Jade，我們不用一個一個的寫出200個div。

以下的代碼創建了一個容器.mommy和200個div：

.mommy
  - for (var x = 0; x < 200; x++)
  div

添加一點CSS確認一下200個div已經生成：

.mommy{
  border:1px solid black;
}
div{
  width: 4px;
  height: 4px;
  background:red;
}

正如下面你所看到的，我們生成了一個800px高的紅色方塊，它是由200個div組成的。

接下來，我們要將這200個div分別定位在不同的位置組成一個圓圈，并通過SCSS來實現。

在上面的CSS中還需要再添加一些設置，給所有的div設置絕對定位，并將它們向左和向上移動2px的距離，這樣div的中心點與容器的0，0坐標點就重合了。然后，我們設置容器為固定的寬高大小。

.mommy{
  border:1px solid black;
  width: 400px;
  height: 400px;
  position: relative;
}
div{
  width: 4px;
  height: 4px;
  background:red;
  position: absolute;
  top: -2px;
  left: -2px;
}

通過SCSS，我們可以在for循環中為每一個div設置不同的位置，這樣就不必手動的一個一個去設置。首先創建一個變量，它的值等于div的個數，這樣在后面如果要用到div的數量值時，直接引用這個變量就可以了。如果有一天需要改變成400個div，只需要在CSS中改變變量的值就可以了。

$amount : 200;
@for $i from 1 through $amount {
  //循環中的代碼
}

現在我們就可以在循環中改變每個div的坐標了，這需要一點點的數學計算。

以下的函數就是生成圓圈的坐標點的計算公式：

x = cos((index/amount)*(PI*2))*radius + radius;
y = sin((index/amount)*(PI*2))*radius + radius;

用SCSS來表示上面的公式就是：

$x : cos(($i/$amount)*360deg)*200px + 200;
$y : sin(($i/$amount)*360deg)*200px + 200;

然后我們將通過公式計算得出的點坐標應用在每個div上：

div:nth-child(#{$i}){
    transform: translate3d($x, $y,0px);
}

這是第一步生成的結果，雖然不是很漂亮，但是，嗯，你從零開始創造了一個圓圈！

2.將圓圈變成一個球體

現在我們有了一個用SCSS生成的圓圈，但是我們需要的是一個球體。圓圈是一個二維圖形，而球體是一個三維立體圖形。二維幾何圖形只有兩個軸：X軸和Y軸，而對于三維，又多了一個坐標軸：Z軸。這意味著我們還要計算每個div在Z軸上的位置坐標。幸運的是，已經有成熟的公式幫助我們來定位球體上每個元素的位置，我不會詳細的介紹公式的原理（屬于數學范疇），我們只需要使用就可以了：

θ : (index / amount) * 120;
δ : (index / amount) * PI;
x : radius * cos(δ) * cos(θ);
y : radius * cos(δ) * sin(θ);
z : radius * sin(δ);

現在我們有了以上的函數，它可以完全滿足我們的需求，我們把它插入到循環中。

@for $i from 1 through $amount {
  $theta : ($i / $amount) * 120;
  $delta : ($i / $amount) * pi();
  $x : 200px * cos($delta) * cos($theta) + 200; //+200 to center our sphere in our 3D world
  $y : 200px * cos($delta) * sin($theta) + 200; //+200 to center our sphere in our 3D world
  $z : 200px * sin($delta);
  div:nth-child(#{$i}){
    transform: translate3d($x, $y,$z);
  }
}

下面就是生成的球體效果，正如你所看到的，所有的div都有重新有了新的位置，但是我們看到的好像仍然是平面效果，不是3D立體的。

在CSS中有一個叫perspective的屬性，它允許我們為任何元素設置一個特定的透視值。在我們的例子中，我們希望在容器.mommy設置3D效果。并且還需要設置一個transform-style: preserve-3d；這樣所有的div就處于立體坐標系中了。

現在我們可以看到所有div的大小都變得不一樣了。div距離“屏幕”的距離越遠，它就會越小，這意味著它們已經處于立體坐標系中了！

3.旋轉球體

所有的div已經就緒了，接下來我們就要看到最后的結果了。我們設置一個僅有一個關鍵幀的動畫效果：

.mommy{
  [...]
  animation: rotation 10s linear infinite; 
}
@keyframes rotation{
  to{
    transform:rotateY(360deg);
  }
}

你可能已經注意到，有些div不是正面屏幕而是與屏幕成90°時，它們就會消失看不到。為了防止這種情況的發生，我們需要給每個div一個反方向的旋轉，讓它們的正面始終面對屏幕顯示。

我們要在div上應用一個反方向的旋轉，但是由于已經應用了一個轉換，我們將利用偽元素，它將成為紅色的小方塊。這樣，div本身只需要提供定位作用就可以了，并且設置一個transform-style屬性，讓div處于3D環境中。

div{
  [...]
  transform-style: preserve-3d;
  &:before{
    content:"";
    display: block;
    width: 4px;
    height:4px;
    background:red;
    animation: rotation 10s infinite linear reverse; 
  }
}

塔達！CSS球體的效果就這樣做好了！

4.更炫的球體

在以上代碼的基礎上，我們發散思維，可以做出更加炫酷的球體效果：

獲取以上所有球體動畫的代碼可以：

云服務器 GPU云服務器浮動效果動畫翻轉動畫效果 html動畫效果啟動頁動畫效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114783.html

使用CSS創建一個炫酷的球體動畫效果

摘要：我最近看到了一個純實現的球體動畫效果經過研究上面的效果實現起來大致可以分為五個步驟，下面就來一一介紹。使用和生成一個圓圈創建一個圓圈的第一步是生成所有組成圓圈的粒子。我最近看到了一個純CSS實現的球體動畫效果： showImg(https://segmentfault.com/img/bVbtIJD?w=396&h=373); 經過研究上面的效果實現起來大致可以分為五個步驟，下面就來...

jsdt 2019-08-02 15:17 評論0 收藏0
使用CSS創建一個炫酷的球體動畫效果

摘要：我最近看到了一個純實現的球體動畫效果經過研究上面的效果實現起來大致可以分為五個步驟，下面就來一一介紹。使用和生成一個圓圈創建一個圓圈的第一步是生成所有組成圓圈的粒子。我最近看到了一個純CSS實現的球體動畫效果： showImg(https://segmentfault.com/img/bVbtIJD?w=396&h=373); 經過研究上面的效果實現起來大致可以分為五個步驟，下面就來...

int64 2019-08-23 18:03 評論0 收藏0
利用CSS變量實現炫酷的懸浮效果

摘要：最近，我從網站上發現以一個好玩兒的懸停動畫，也有了些自己的靈感。用包裹文本，以避免顯示在按鈕的上方。將和初始化為，當用戶懸停在按鈕上時，將其改為。最近，我從 Grover網站上發現以一個好玩兒的懸停動畫，也有了些自己的靈感。這個動畫是將鼠標移動到訂閱按鈕上移動光標會顯示相應的彩色漸變。這個想法很簡單，但是它能使這個按鈕脫穎而出，人們一下子就注意到它了，增加了點擊的概率。showImg...

laoLiueizo 2019-08-02 16:14 評論0 收藏0
利用CSS變量實現炫酷的懸浮效果

摘要：最近，我從網站上發現以一個好玩兒的懸停動畫，也有了些自己的靈感。用包裹文本，以避免顯示在按鈕的上方。將和初始化為，當用戶懸停在按鈕上時，將其改為。最近，我從 Grover網站上發現以一個好玩兒的懸停動畫，也有了些自己的靈感。這個動畫是將鼠標移動到訂閱按鈕上移動光標會顯示相應的彩色漸變。這個想法很簡單，但是它能使這個按鈕脫穎而出，人們一下子就注意到它了，增加了點擊的概率。showImg...

vincent_xyb 2019-08-29 18:43 評論0 收藏0
前端每日實戰：17# 視頻演示如何用純 CSS 創作炫酷的同心矩形旋轉動畫

摘要：效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。可交互視頻教程此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbbyrX?w=500&h=500); 效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https://codepen.io/comeh...

luqiuwen 2019-08-29 15:20 評論0 收藏0