使用CSS創(chuàng)建一個炫酷的球體動畫效果

jsdt 發(fā)布于2019-08-02 15:17 / 2431人閱讀

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

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

經(jīng)過研究上面的效果實現(xiàn)起來大致可以分為五個步驟，下面就來一一介紹。

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

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

以下的代碼創(chuàng)建了一個容器.mommy和200個div：

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

添加一點(diǎn)CSS確認(rèn)一下200個div已經(jīng)生成：

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

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

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

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

.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循環(huán)中為每一個div設(shè)置不同的位置，這樣就不必手動的一個一個去設(shè)置。首先創(chuàng)建一個變量，它的值等于div的個數(shù)，這樣在后面如果要用到div的數(shù)量值時，直接引用這個變量就可以了。如果有一天需要改變成400個div，只需要在CSS中改變變量的值就可以了。

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

現(xiàn)在我們就可以在循環(huán)中改變每個div的坐標(biāo)了，這需要一點(diǎn)點(diǎn)的數(shù)學(xué)計算。

以下的函數(shù)就是生成圓圈的坐標(biāo)點(diǎn)的計算公式：

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;

然后我們將通過公式計算得出的點(diǎn)坐標(biāo)應(yīng)用在每個div上：

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

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

2.將圓圈變成一個球體

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

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

現(xiàn)在我們有了以上的函數(shù)，它可以完全滿足我們的需求，我們把它插入到循環(huán)中。

@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的屬性，它允許我們?yōu)槿魏卧卦O(shè)置一個特定的透視值。在我們的例子中，我們希望在容器.mommy設(shè)置3D效果。并且還需要設(shè)置一個transform-style: preserve-3d；這樣所有的div就處于立體坐標(biāo)系中了。

現(xiàn)在我們可以看到所有div的大小都變得不一樣了。div距離“屏幕”的距離越遠(yuǎn)，它就會越小，這意味著它們已經(jīng)處于立體坐標(biāo)系中了！

3.旋轉(zhuǎn)球體

所有的div已經(jīng)就緒了，接下來我們就要看到最后的結(jié)果了。我們設(shè)置一個僅有一個關(guān)鍵幀的動畫效果：

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

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

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

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

塔達(dá)！CSS球體的效果就這樣做好了！

4.更炫的球體

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

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

云服務(wù)器 GPU云服務(wù)器浮動效果動畫翻轉(zhuǎn)動畫效果 html動畫效果啟動頁動畫效果

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/54028.html

發(fā)表評論

登陸后可評論

0條評論

jsdt

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow創(chuàng)建張量

閱讀 3079·2023-04-25 18:54
恒創(chuàng)科技雙十一CN2香港服務(wù)器低至264元且不限制新用戶

閱讀 2598·2021-11-02 14:40
OuLuCloud歐路云：喜迎中秋，全場彈性云服務(wù)器7折優(yōu)惠，17元/月起

閱讀 3193·2021-09-23 11:58
一次前端筆試總結(jié)

閱讀 2438·2019-08-30 13:50
Metro UI 風(fēng)格的Vue.js組件庫 -VIUI

閱讀 1243·2019-08-29 12:46
compass之sprite初接觸

閱讀 3129·2019-08-28 17:51
js設(shè)計模式 --- 橋接設(shè)計模式

閱讀 687·2019-08-26 11:47
Javascript緩動（平滑）回到頂部效果

閱讀 907·2019-08-23 16:17

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

使用CSS創(chuàng)建一個炫酷的球體動畫效果

相關(guān)文章