webpack-icon
进入webpack的官网，可以看到它的图标,一开始我以为是webgl写的，其实只是css3实现的，这里教大家怎么使用css3实现这样一个动画
效果在这里,和官网的有点差异,因为我把backface-visibility设置成了hidden,把backface-visiblity注释掉再修改下border的颜色就和官网的差不多了,看起来有点晕晕的..
强烈建议没有
css3 3d基础的朋友看张鑫旭的教程
我们先创建一个盒子div(.container),盒子内部由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很简单易学，一目了然，可以去官网学习，不过后面也有转换后的css代码
//先定义两个变量，一个是盒子的大小，一个背景颜色
$size = 240px
$backgroundColor = radial-gradient(transparent 30%,rgba(5,17,53,.2) 100%)
//定义容器的css
.container
position relative //将元素设置成相对的
margin 120px auto //居中
width $size //设置宽高
height $size
//定义每个表面的共性
.face
position absolute //绝对定位
width $size //大小
height $size
background $backgroundColor //背景颜色
text-align center
font-size 24px
transform-origin 50% //变换中心为几何中心
backface-visibility hidden //旋转到背面消失，可以不要
上面是容器和表面的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，因为旋转后每个面对应的方向都发生了改变。移动也只是在旋转后的那个方向上移动,如果不能理解这个过程，自己去尝试下就懂了。。
我们将容器向下旋转45deg，向右旋转45deg
后面我发现这里向下旋转的角度是不正确的,记得修改成
36deg,才能和webpack的图标一致.
.container
position relative //将元素设置成相对的
margin 20px auto //居中
width $size //设置宽高
height $size
+ transform rotateX(-45deg) rotateY(45deg)
+ transform-style preserve-3d
这里就是整体的stylus代码,这里就是编译后的css代码,这里是整体的效果。
可以看到大致的模型(一个盒子)已经出来了。
现在我们让它动起来，定义一个keyframes
@keyframes boxr
0%
transform rotateX(-45deg) rotateY(45deg)
70%
transform rotateX(-45deg) rotateY(405deg)
100%
transform rotateX(-45deg) rotateY(405deg)
这个动画会在旋转一段时间后等待一段时间。形成转动延时的效果
下面添加 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;
得到的整体效果在这里
前面的动画我仔细看了下，上面的代码容器向下旋转的角度是不对的，官网的角度大概是36deg左右，我写的时候认为是45deg，需要注意，下面的代码是以36deg实现的。
下面我们需要创建另外一个容器，可以使用@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分之一，你也可以自定义内部容器的大小。。
+ .webpack-icon
+ position relative
+ width $size
+ height $size
+ margin 120px auto
.container
...
+ innerContainer
+ position relative
+ width ($size/2)
+ height ($size/2)
+ ...
可以看到，显示的有两个盒子，但是一个再上，一个在下，我们需要设置下面盒子的top值,将top设置成为-(($size*3)/4)
上面的top值是怎么得到的，数学问题，列个等式
$size-top=($size-$size/2)/2，解方程，我就不详细解释这个问题了，自己看下就知道了
现在，内部的盒子的就在外部盒子的中间了。
我们定义另一个keyframes动画，和之前的keyframes动画方向相反，前面有类似的代码，最后，我们再上色，更换background，这里不多说了，直接看代码吧
在webpack的实现上,还是有一些不同的,webpack官网的
dom使用的是ul li;,而且将内部的盒子放在了外部盒子的dom`内部,便于css的重用,这个和我的实现思路不一样;还使用了伪元素,作用好像是为了做背景的修饰;这里就不深入了,感兴趣的朋友可以去看看去官网看看它是怎么实现.希望对大家有帮助,谢谢大家;
大家要实现这样一个动画还是需要自己多动手,多思考哦,我写了一些关于canvas,css3,webgl的入门教程,后面会添加svg的动画,持续不断更新,喜欢的朋友可以来这里看看哦,给个star什么的.
网友评论