webpack图标的实现

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)      
+           ... 

整体stylus代码的在这里,css代码在这里,效果在这里

可以看到,显示的有两个盒子,但是一个再上,一个在下,我们需要设置下面盒子的top值,将top设置成为-(($size*3)/4)

上面的top值是怎么得到的,数学问题,列个等式$size-top=($size-$size/2)/2,解方程,我就不详细解释这个问题了,自己看下就知道了

现在,内部的盒子的就在外部盒子的中间了。

我们定义另一个keyframes动画,和之前的keyframes动画方向相反,前面有类似的代码,最后,我们再上色,更换background,这里不多说了,直接看代码吧

最终的结果看这里stylus代码看这里css代码看这里

在webpack的实现上,还是有一些不同的,webpack官网的dom使用的是ul li;,而且将内部的盒子放在了外部盒子的dom`内部,便于css的重用,这个和我的实现思路不一样;还使用了伪元素,作用好像是为了做背景的修饰;这里就不深入了,感兴趣的朋友可以去看看去官网看看它是怎么实现.希望对大家有帮助,谢谢大家;

大家要实现这样一个动画还是需要自己多动手,多思考哦,我写了一些关于canvas,css3,webgl的入门教程,后面会添加svg的动画,持续不断更新,喜欢的朋友可以来这里看看哦,给个star什么的.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容

  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    程序员poetry阅读 113,805评论 24 450
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,078评论 7 35
  • 最近在学习 Webpack,网上大多数入门教程都是基于 Webpack 1.x 版本的,我学习 Webpack 的...
    My_Oh_My阅读 8,084评论 40 247
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,270评论 0 11
  • 这几天在老家,天气异常晴朗,每天晚上坐在阳台上,一抬头就是满天闪闪的星星,非常耀眼。前几次回来,或许天气不是很好,...
    云沐妈妈阅读 406评论 0 0