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

這篇文章給大家分享的是有關如何使用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軸上的位置坐標。幸運的是，已經有成熟的公式幫助我們來定位球體上每個元素的位置，我不會詳細的介紹公式的原理（屬于數學范疇），我們只需要使用就可以了：

　　&theta; : (index / amount) * 120;

　　&delta; : (index / amount) * PI;

　　x : radius * cos(&delta;) * cos(&theta;);

　　y : radius * cos(&delta;) * sin(&theta;);

　　z : radius * sin(&delta;);

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

　　@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&deg;時，它們就會消失看不到。為了防止這種情況的發生，我們需要給每個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創建一個炫酷的球體動畫效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！