webpack-icon
進(jìn)入webpack的官網(wǎng)劣砍，可以看到它的圖標(biāo),一開始我以為是webgl寫的吠各，其實(shí)只是css3實(shí)現(xiàn)的，這里教大家怎么使用css3實(shí)現(xiàn)這樣一個動畫
效果在這里,和官網(wǎng)的有點(diǎn)差異,因?yàn)槲野?code>backface-visibility設(shè)置成了hidden,把backface-visiblity注釋掉再修改下border的顏色就和官網(wǎng)的差不多了,看起來有點(diǎn)暈暈的..
強(qiáng)烈建議沒有
css3 3d基礎(chǔ)的朋友看張鑫旭的教程
我們先創(chuàng)建一個盒子div(.container),盒子內(nèi)部由6個div組成，分別表示盒子的6個表面.
<div class='container'>
<div class='face front'>front</div>
<div class='face back'>back</div>
<div class='face left'>left</div>
<div class='face right'>right</div>
<div class='face top'>top</div>
<div class='face bottom'>bottom</div>
</div>
這里使用stylus來寫css代碼猴鲫，stylus很簡單易學(xué)累颂，一目了然滞详，可以去官網(wǎng)學(xué)習(xí)，不過后面也有轉(zhuǎn)換后的css代碼
//先定義兩個變量紊馏，一個是盒子的大小料饥，一個背景顏色
$size = 240px
$backgroundColor = radial-gradient(transparent 30%,rgba(5,17,53,.2) 100%)
//定義容器的css
.container
position relative //將元素設(shè)置成相對的
margin 120px auto //居中
width $size //設(shè)置寬高
height $size
//定義每個表面的共性
.face
position absolute //絕對定位
width $size //大小
height $size
background $backgroundColor //背景顏色
text-align center
font-size 24px
transform-origin 50% //變換中心為幾何中心
backface-visibility hidden //旋轉(zhuǎn)到背面消失，可以不要
上面是容器和表面的css代碼,下面我們來定義front,back,left,right,top,bottom的移動,讓它們組合成一個盒子
.front
transform translateZ($size/2)
.back
transform rotateY(180deg) translateZ($size/2)
.right
transform rotateY(90deg) translateZ($size/2)
.left
transform rotateY(-90deg) translateZ($size/2)
.top
transform rotateX(-90deg) translateZ($size/2)
.bottom
transform rotateX(90deg) translateZ($size/2)
需要注意的是朱监，每個元素都是向前移動
size/2岸啡，因?yàn)樾D(zhuǎn)后每個面對應(yīng)的方向都發(fā)生了改變。移動也只是在旋轉(zhuǎn)后的那個方向上移動,如果不能理解這個過程赫编，自己去嘗試下就懂了巡蘸。。
我們將容器向下旋轉(zhuǎn)45deg擂送，向右旋轉(zhuǎn)45deg
后面我發(fā)現(xiàn)這里向下旋轉(zhuǎn)的角度是不正確的,記得修改成
36deg,才能和webpack的圖標(biāo)一致.
.container
position relative //將元素設(shè)置成相對的
margin 20px auto //居中
width $size //設(shè)置寬高
height $size
+ transform rotateX(-45deg) rotateY(45deg)
+ transform-style preserve-3d
這里就是整體的stylus代碼,這里就是編譯后的css代碼,這里是整體的效果悦荒。
可以看到大致的模型(一個盒子)已經(jīng)出來了。
現(xiàn)在我們讓它動起來嘹吨，定義一個keyframes
@keyframes boxr
0%
transform rotateX(-45deg) rotateY(45deg)
70%
transform rotateX(-45deg) rotateY(405deg)
100%
transform rotateX(-45deg) rotateY(405deg)
這個動畫會在旋轉(zhuǎn)一段時間后等待一段時間搬味。形成轉(zhuǎn)動延時的效果
下面添加 animation
.container
position: relative;
margin: 120px auto;
width: 240px;
height: 240px;
transform: rotateX(-45deg) rotateY(45deg);
+ animation: boxr 5s ease-in-out infinite 1s;
transform-style: preserve-3d;
得到的整體效果在這里
前面的動畫我仔細(xì)看了下，上面的代碼容器向下旋轉(zhuǎn)的角度是不對的蟀拷，官網(wǎng)的角度大概是36deg左右碰纬，我寫的時候認(rèn)為是45deg，需要注意问芬，下面的代碼是以36deg實(shí)現(xiàn)的悦析。
下面我們需要創(chuàng)建另外一個容器，可以使用@extend愈诚，但是為了清晰她按，我這里重新寫一下牛隅，我們整理html代碼，得到下面的代碼
<div class='webpack-icon'>
<div class='container'>
<div class='face front'></div>
<div class='face back'></div>
<div class='face left'></div>
<div class='face right'></div>
<div class='face top'></div>
<div class='face bottom'></div>
</div>
<div class='innerContainer'>
<div class='face front'></div>
<div class='face back'></div>
<div class='face left'></div>
<div class='face right'></div>
<div class='face top'></div>
<div class='face bottom'></div>
</div>
</div>
除了webpack-icon代碼,還要將innerContainer的size的大小修改成為前者的2分之一酌泰，你也可以自定義內(nèi)部容器的大小媒佣。。
+ .webpack-icon
+ position relative
+ width $size
+ height $size
+ margin 120px auto
.container
...
+ innerContainer
+ position relative
+ width ($size/2)
+ height ($size/2)
+ ...
可以看到陵刹，顯示的有兩個盒子默伍，但是一個再上，一個在下衰琐，我們需要設(shè)置下面盒子的top值,將top設(shè)置成為-(($size*3)/4)
上面的top值是怎么得到的也糊，數(shù)學(xué)問題，列個等式
$size-top=($size-$size/2)/2羡宙，解方程狸剃，我就不詳細(xì)解釋這個問題了，自己看下就知道了
現(xiàn)在狗热，內(nèi)部的盒子的就在外部盒子的中間了钞馁。
我們定義另一個keyframes動畫，和之前的keyframes動畫方向相反匿刮，前面有類似的代碼僧凰，最后，我們再上色熟丸，更換background训措，這里不多說了，直接看代碼吧
最終的結(jié)果看這里光羞，stylus代碼看這里绩鸣，css代碼看這里
在webpack的實(shí)現(xiàn)上,還是有一些不同的,webpack官網(wǎng)的
dom使用的是ul li;,而且將內(nèi)部的盒子放在了外部盒子的dom`內(nèi)部,便于css的重用,這個和我的實(shí)現(xiàn)思路不一樣;還使用了偽元素,作用好像是為了做背景的修飾;這里就不深入了,感興趣的朋友可以去看看去官網(wǎng)看看它是怎么實(shí)現(xiàn).希望對大家有幫助,謝謝大家;
大家要實(shí)現(xiàn)這樣一個動畫還是需要自己多動手,多思考哦,我寫了一些關(guān)于canvas,css3,webgl的入門教程,后面會添加svg的動畫,持續(xù)不斷更新,喜歡的朋友可以來這里看看哦,給個star什么的.
