超详细教程:纯CSS3写一个摇头晃脑的小哥

超详细教程:纯CSS3写一个摇头晃脑的小哥1.1作为一个刚刚打算要入行的准前端,并没有什么基础,暂时是按照网上的前辈们的指导,按部就班地学习中。首先就要学习CSS3的使用。前期,做过几个比较简单的网站首页的仿制,现在想要试试动画效果的制作。如果有什么写得不对的地方,欢迎批评指正:我要进步! 1.2没有什么美术基础,不会…

1.制作背景

1.1作为一个刚刚打算要入行的准前端,并没有什么基础,暂时是按照网上的前辈们的指导,按部就班地学习中。首先就要学习CSS3的使用。前期,做过几个比较简单的网站首页的仿制,现在想要试试动画效果的制作。如果有什么写得不对的地方,欢迎批评指正:我要进步!
1.2没有什么美术基础,不会设计,所以找到了一个挺有兴趣的案例,就想要拿来试试看。到现在为止,都没有看过原作的代码。没能完全实现人家的效果,以后有机会再详细修改。也没能做到像素级还原,所以我做的小哥跟人家的长得不太一样……
来源(我做的是案例1): 链接描述
这是我在GitHub上的完整代码:链接描述
超详细教程:纯CSS3写一个摇头晃脑的小哥

2.静态效果

2.1 背景部分
2.1.1 首先是图中那个圆背景,这个比较好实现。
超详细教程:纯CSS3写一个摇头晃脑的小哥
为了定位在屏幕中央,并且与顶部有一定距离,首先设置了如下样式:

<body>
    <div class="container">
    </div>
</body>
body{
    margin:50px 0 0 0;
}
.container{
    margin-left:auto;
    margin-right: auto;
}

下面是具体内容:html代码如下:

<div class="bg-circle">
    <div class="bg"></div>
</div>

css代码如下:

.bg{    
    height: 30px;
    width: 300px;
    background-color: #699;
}        
.bg-circle{    
    margin-left:auto;
    margin-right:auto;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    overflow: hidden;
}

一般说来,css部分可以是一个单独的文件,引入它的时候只需要在<head></head>里面写这样一句就可以:

    <link rel="stylesheet" href="shakehead.css">

我是把这个html页和css页放在了同级目录中,所以路径href里面直接写文件名即可。在上面的代码中:

margin-left:auto;margin-right:auto;可以确保水平方向的居中显示。
border-radius: 50%;可以把正方形变成一个正圆。
overflow: hidden;可以确保子元素不会超出这个元素所给出的区域。

另外,因为.bg-circle设置了overflow: hidden;所以.bg的宽高只要大于300px,就根本看不出来区别的(捂脸……)。

2.1.2 左右各有一块影子,考虑到都不能超出那个圆形的边框,所以要作为.bg-circle的子标签才行:html代码如下:

<div class="bg-circle">
    <div class="bg"></div>
    <div class="shadow-left"></div>
    <div class="shadow-right"></div>
</div>

css代码如下:

.shadow-left{
    position: absolute;
    z-index: 59;
    width: 240px;
    height: 100px;
    background-color: #476b6b;
    opacity: .8;
    transform: rotate(45deg);
}
.shadow-right{
    position: absolute;
    width: 320px;
    height: 100px;
    background-color: #e0ebeb;
    opacity: .7;
    transform: rotate(-35deg);
}

细心的话,应该已经发现,左侧那个影子,有点盖住了小伙儿的身子,还盖住了一个字母,所以它要比别的层要高。就必须要设置z-index属性,具体的值,可以根据你要叠压的层的数据来写,大它1点也是大,姐也是上面那个,嘿嘿!但是,想要设置z-index,就必须要设position:relative, absolute或者fixed都可以。
另外,如果只是简单的倾斜,transform: rotate(Xdeg);就可以做到了,但是有时候还要考虑这个倾斜掉的元素的定位,所以严谨一点的话,还可以设置transform-origin这个属性。这个的应用网上有挺多的,相信一般人都可以看懂。最主要就是记住:第一个值是水平(X),第二个值是竖直(Y);默认的中心是50%,50%,左上角是0,0,右下角是100%,100%。
但是因为这两个阴影是过了一会儿才出来的,所以现在的代码写完,是看不到它们的。为了调试,可以暂时定位成最终位置:
超详细教程:纯CSS3写一个摇头晃脑的小哥

.shadow-left{
    left:-100px;bottom:-10px;
}
.shadow-right{
    right: -100px;bottom:10px;
};

或者右键-检查,在Elements区域,选中要看的标签,也可以显示它在哪里。
超详细教程:纯CSS3写一个摇头晃脑的小哥
2.2 人物头部
2.2.1 人物的头部,组成结构应该算是全图中最复杂的了。从目的上,我要做一个纯CSS3的网页,就想尽最不靠切图来完成;从效果上,几乎每一个部分都要有动作,切一个人头出来也没有什么用,如果是切各个部分出来,说实话我不太会用PS,有那功夫还不如我用CSS写;另外,据说用CSS写的网页快一些,嘿嘿!
放眼望去,头部的所有部分,是的,所有部分,都是圆角不同的矩形元素。所以我们要做的就是调整好每个元素的高宽、合适的圆角,做好各层的叠压关系,最后布局在合适的位置,就算完成了。
2.2.2 首先,在动画中,头部作为一个整体,有一个动作,所以必需有一个包裹在外面的层存在,这里就是.head这个标签。
html代码如下:

<div class="head"></div>

另外,在定位的时候,有一个包裹层,也有利于里面的眉毛眼睛鼻子等的定位,我觉得还是挺方便的。css代码如下:

.head{
    position: absolute;
    top: 20px;
    left: 50%;
}

绝对定位有助于把这个头定位在我要的地方,也就是top,left可以在此基础上进行设置。
在做水平居中显示的时候,一般都是left:50%;margin-left:-a px;(a为要水平居中的元素的宽度的一半)组合出现的(或者全用right侧也可以)。但是因为我这里.head只是一个包裹层,并没有设置宽高的必要,所以我只用了left: 50%;这一句。打开浏览器自带的检查工具,可以看到,.head在中轴线的右侧一点点,并且没有面积。
2.2.3 在图中,最显眼的就是那张大脸,也是最好写的部分:
超详细教程:纯CSS3写一个摇头晃脑的小哥
html代码如下:

<div class="head">
    <div class="face"></div>    
</div>

只需要让“脸”–.face作为.head的子元素而存在就可以了。css代码如下:

.face{
    position: absolute;
    top:75px;
    left: 50%;
    margin-left: -60px;
    width: 120px;
    height: 170px;
    border-radius: 30px;
    background-color:  #fff7e5;
}

因为.face是头部的最底层,所以可以不设置z-index属性。在给.face做居中定位的时候,就用到了这一对好朋友:

left: 50%;
margin-left: -60px;

其中,60px刚好是width: 120px;的一半。
为了做出这个小伙儿圆润的下巴,我设置了border-radius: 30px;其实是四个角都圆了,反正上面那两个角也看不到,被头发盖住了(就像我有个朋友因为有刘海,所以不用认真画眉毛,搞得我们露出额头每天花时间让眉毛对称的人心里很气一样)。但是,如果你强迫症比我重的话,可以只设置border-bottom-left-radius和border-bottom-right-radius的值,也是一样的。但是据说这样的话,你就写了两行代码,从代码优化的角度来讲,后者并不是最优的选择哦!
2.2.4 然后,我想到了要加上头发,我觉得也是挺好写的,但是理想总是很丰满……毕竟,头发是一个拱门的形状,做出主体之后,还要露出额头来,而且头顶有一搓呆毛,额头中央要耷拉下来一小丛,而且严格意义上来讲,还有耳朵前面的小鬓角我的天……在实际制作的时候,我选择把鬓角留给耳朵,毕竟它们位置关系比较近,这种时候就不要管它是不是头发了不是嘛,嘿嘿。
2.2.4.1 首先确定html结构。
html代码如下:

<div class="head">
    <div class="face"></div>
    <div class="hair">
    <div class="forehead"></div>
    <div class="rub-up"></div>
    <div class="rub-down"></div>
    </div>
</div>

结合刚才的结构分析,我在头发这层标签里面,又设置了额头(.forehead)、呆毛(.rub-up)和刘海(.rub-down)(英语差不多忘没了,多数都是百度到的,如果用词有不对的地方,欢迎指正,谢谢大家!)。
2.2.4.2 先是头发的主体部分。
超详细教程:纯CSS3写一个摇头晃脑的小哥
css代码如下:

.hair{
    position: absolute;
    z-index: 9;
    top:160px;
    left: 50%;
    margin-left: -70px;
    width: 140px;
    background-color: #ffd11a;
}

头发要放在眉毛和眼睛的下层,所以z-index的值要比一会儿写的眉眼的小就可以。但是考虑到,进行动画的时候,耳朵实际上是从头发的后面冒出来的,所以要给它们留出余地,因此我在这里给.hair的z-index设置为9。
这里要提前说一下动画的问题:
在最终效果里面,头发的部分是从底部向上进行显示的,所以不能上来就给出高度和圆角,一并都写在动画效果的最终状态里面了,会在后面提到;宽度却是没有变化的,所以在这里可以先写好。因为没有高度,所以我们现在看不到头发。但是它没有高度,后面的呆毛和刘海就没法显示了,所以我先给.hair加上以下代码:

{
    height: 100px;
    top:60px;
    border-radius: 40px 40px 0 0;
}

2.2.4.3 然后是额头。
超详细教程:纯CSS3写一个摇头晃脑的小哥
css代码如下:

.forehead{
    position: absolute;
    bottom:0;
    left: 50%;
    margin-left: -55px;
    width: 110px;
    height: 65px;
    border-radius: 25px 25px 0 0;
    background-color: #fff7e5;
}

用一个跟脸的背景色相同的层盖在头发所示的层之上,并设置顶部的两个圆角,就形成了一个拱形的头发效果。这里面用到了简写的方法:跟margin和padding的简写用“上-右-下-左”的顺序不同,border-radius是“左上-右上-右下-左下”(ps:多的我就不说了,网上都能找到,我只说我用到的是个什么就行了哈)。
2.2.4.4 头顶的呆毛和刘海。
超详细教程:纯CSS3写一个摇头晃脑的小哥
css代码如下:

.rub-up{
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -40px;
    width: 80px;
    border-top-right-radius: 15px;
    background-color: #ffd11a;
}        
.rub-down{
    position: absolute;
    top: 25px;
    left: 50%;
    margin-left: -20px; 
    width: 40px;
    border-bottom-left-radius:20px;
    background-color:  #ffd11a;
}
.hair,.rub-up,.rub-down{
    background-color:  #ffd11a;    
}

头发上方的呆毛只需要右上角的圆角,所以只写border-top-right-radius: 15px;这一个就可以。需要注意的是,跟中文说话顺序不同,这里要先说“上/下”,再说“左/右”。同样的,刘海只要左下的圆角,于是用到了border-bottom-left-radius:20px。这两撮头发都是通过改变高度和定位来实现动画效果的,这里为了说明最终的结果,我把下面这些代码先加进来:

.rub-up{
    height: 30px;
    transform:rotate(0deg);
}
.rub-down{
    height: 30px;
}

最后,给三部分的头发用同一个颜色,于是看起来浑然一体,非常像那么回事儿啦!这里就用到了CSS多个类写在一起的写法:多个类名之间用一个“,”隔开就可以了(一定一定要用英文逗号哦!)。其实还可以给每一个需要用到头发颜色的标签都写一个共同的类名,比如这样:

<div class="hair hair-color">
    <div class="forehead"></div>
    <div class="rub-up hair-color"></div>
    <div class="rub-down hair-color"></div>
</div>

然后给这个类单独设置颜色:

.hair-color{
    background-color:  #ffd11a;    
}

这样的话,后面如果还要用这个背景色,只需添加这个类即可。我觉得在代码优化的前提下,如果能保证使用方便并且尽量地语义化,更有利于整个代码的编写和后期的修改和维护。
2.2.5 按照从上到下的顺序,接下来我们要分别说一说眉毛、眼睛、耳朵和嘴。为什么不提鼻子呢?我想你已经猜到了,后面我再说这个,嘿嘿!
2.2.5.1 首先确定html结构。
html代码如下:

<div class="eyebrows">
    <div class="brow-left"></div>
    <div class="brow-right"></div>
</div>
<div class="eyes">
    <div class="eye-left"></div>
    <div class="eye-right"></div>
</div>
<div class="sockets">
    <div class="socket-left"></div>
    <div class="socket-right"></div>
</div>
<div class="earsandtemples">
    <div class="ear-left"></div>
    <div class="ear-right"></div>
    <div class="temple-left"></div>
    <div class="temple-right"></div>
</div>
<div class="mouth"></div>

上面这些div(.eyebrows、.eyes、.sockets、.earsandtemples及.mouth)都是.head的子元素,也就是.face还有.hair的同辈元素。前面说过,因为位置相近,我把耳朵和鬃角写在了一起。其实本来眼睛和黑眼圈我也是想要写在一起的,你猜我这什么拆开了?对,因为动画中,眼睛是一眨一眨的,而且是一起眨的。我当时的想法是,给眼睛所在的包裹层写那个动作,写上之后,好的,黑眼圈也眨了起来……不信邪的话,可以试试看,效果棒棒……但是现在写这个文章的时候我忽然想到,如果我给每一只眼睛单独写动画,写同样的,也是可以的啊,我为什么那么一根筋(捂脸……)我觉得,这也说明,要想实现相同的效果,其实有很多种方法的,这也正是写代码的乐趣不是吗?
2.2.5.2 样式呢,我们先从眉毛开始:就是两个矩形的div,右边的那个稍作倾斜就OK啦。
超详细教程:纯CSS3写一个摇头晃脑的小哥
css代码如下:

.eyebrows{
    position: absolute;
    z-index: 59;
    top:-50px;/*-----动画结束的最终效果是top:120px;*/
    left: 50%;
    margin-left: -45px;
    width: 90px;
}
.brow-left,.brow-right{
    width: 30px;
    height: 8px;
    background-color: #ffd11a;
}
.brow-left{
    float: left;
}
.brow-right{
    float:right;
    transform: rotate(10deg);
}

因为刚刚.hair的z-index: 9;其中就有额头这个部分,所以眉毛如果想显示出来,就至少要是9,少一点都不行,多一些没关系。所以我这里设的59也是可以的。两条眉毛被包裹在一个.eyebrows里面,只要这个父元素被绝对定位好了,写清楚宽度,里面两个眉毛就一左一右进行浮动即可,我觉得是很方便。不知道还有没有更好的方法了(一脸求知)。因为两条眉毛大小相同、颜色一致,所以样式写在了一起。
看起来在右边(应该是小伙儿本人的左边)的那条眉毛要倾斜一下,只需要transform: rotate(Xdeg);就行了,而且默认的旋转中心是该元素的正中心,刚好是我要的,我就没有特意去写transform-origin这个样式。
2.2.5.3 下面该说到眼睛和黑眼圈了(说它是眼眶也是可以……)。
超详细教程:纯CSS3写一个摇头晃脑的小哥
css代码如下:

.eyes{
    position: absolute;
    z-index: 69;
    bottom: -162px;
    left: 50%;
    margin-left: -35px;
    width: 70px;
}
.eye-left,.eye-right{
    width: 14px;
    border-radius: 7px;
    background-color:  #264c73;
    /*------动画结束的最终效果要加上:*/
        height: 22px;
}
.eye-left{
    float: left;
}
.eye-right{
    margin-left: 56px;
}        
.sockets{
    position: absolute;
    z-index: 59;
    top:155px;
    left: 50%;
    margin-left: -38px;
    width: 76px;
}
.socket-left{
    float: left;
}
.socket-right{
    float: right;
}
.socket-left,.socket-right{
    height: 10px;
    width: 20px;
    border-radius: 0 0 10px 10px;
    /*------动画结束的最终效果要加上:*/
        background-color: #cc6600;
        opacity: 0.1;
}

眼睛在眼眶之上,所以z-index这个属性上,眼眶(59)还是要比头发(59)高(至少也要相等),但是眼睛(69)要比眼眶高。
看到这里,我们已经多次用到了border-radius这个属性。我感觉它可以实现非常多种的形状,很神奇!比如这里的眼睛,看起来上下两头是半圆、中间是长方形,但实际上只要让border-radius的值等于宽度的一半就可以了。看到这儿,如果最开始的正圆没有弄懂怎么回事的朋友也能懂了吧?只要让被圆角的元素宽高一致就可以了!如果宽高不一致,就会像这里的眼睛一个效果啦~
于是,半圆形的眼眶也是很好写的吧?只设置底部两个的圆角border-radius: 0 0 10px 10px即可。
但是!我并没有给眼眶设置初始颜色,所以现在这样是看不到它们的,为了展示效果,这里我先加上。因为在动画效果里,它们是淡出的,所以我直接写在了动画里面,不然的话,嗯,有兴趣的朋友可以自己试试看……
2.2.5.3 鬓角和耳朵的部分,前面提到过,要注意叠压关系。
超详细教程:纯CSS3写一个摇头晃脑的小哥
css代码如下:

.earsandtemples{
    position: absolute;
    z-index:1;    
    top:160px;
    left: 50%;
    margin-left:-70px;
    width: 140px;
}
.ear-left,.ear-right{    
    position: absolute;
    width: 10px;
    background-color: #fff7e5;
}
.ear-left{
    border-bottom-left-radius:10px; 
}
.ear-right{
    border-bottom-right-radius: 10px;
}
.temple-left,.temple-right{
    position: absolute;
    width: 5px;    
    /*------动画结束的最终效果要加上:*/
        height: 20px;
        bottom:-20px;
        opacity: 1;
}
.temple-left{
    left: 10px;
}
.temple-right{
    right: 10px;
}

并且把这两个鬓角类名也加在前面设置头发颜色的地方:

.hair,.rub-up,.rub-down,.temple-left,.temple-right{
    background-color:  #ffd11a;    
}

这里面有点意思的是,它们都是从大概太阳穴那个位置的头发里面冒出来的,所以先设一个position: absolute;就可以,具体的位置写在动画里面,通过改变top、bottom、left或者right,来让它们实现最终的效果。
2.2.5.3 嘴的写法和黑眼圈是一样的。
超详细教程:纯CSS3写一个摇头晃脑的小哥
css代码如下:

.mouth{
    position: absolute;
    top: 195px;
    left: 50%;
    margin-left: -25px;
    width: 50px;
    border-radius: 0 0 25px 25px;
    background-color: #fff;
    /*------动画结束的最终效果要加上:*/
        height: 20px;
}

我写盖在脸上的那层额头的时候,到耳朵的上方就结束了,所以在嘴这里,z-index可以不写了。
2.2.6 现在,头部就只差那个占了半张脸的阴影,以及跟它一起出现的鼻子了。我把它们写在了一起。是的,还是因为位置相近,所以我把鼻子写在这里啦!朋友,你猜对了吗?
超详细教程:纯CSS3写一个摇头晃脑的小哥
html代码如下:

<div class="shadowandnose">
    <div class="shadow"></div>
    <div class="nose"></div>
</div>

这里面,.shadowandnose同样是.head的子元素。css代码如下:

.shadowandnose{
    position: absolute;
    z-index: 79;
    top:75px;    
    left: 50%;
    margin-left: -60px;
    width: 120px;
}
.shadow{
    width: 60px;
    height: 170px;
    border-radius: 30px;
    /*------动画结束的最终效果要加上:*/
        opacity: .1;
        background-color: #555;
}
.nose{
    position: absolute;
    left: 50%;
    top:50%;
    margin-top:-5px;
    height: 30px;
    border-top-left-radius: 15px;
    background-color:  #fff7e5;
    /*------动画结束的最终效果要加上:*/
        width: 15px;
        margin-left: -15px;
}

.shadowandnose的z-index只要大于等于69即可,这里,我设置的是79。另外,因为.nose这个标签是写在.shadow之后的,默认就会在它的上层,可以不写z-index属性。反之,如果把这两个标签的前后顺序换一下,就必须要写了,有兴趣的朋友可以试一下。
另外呢,头顶的部分是要超出圆形边框的,所以整个头部所在的div,也就是.head,不能是被包裹在.bg-circle里的,且其z-index要高于.bg-circle。所以我把它们设为了同辈元素,并且因为前面.bg-circle的z-index:0,于是.head即使不设置z-index,也可以显示在其上方了。
到这里,小伙子的头部就基本完成了,其中有少量的代码需要写出动作之后才能有完整的体现,但是我也全都先写出来啦!
2.3 人物身子
2.3.1 相比上面说到的头部,人物身子的部分比较简单些。先来说说那件黑T-shirt。
超详细教程:纯CSS3写一个摇头晃脑的小哥
html代码如下:

<div class="bg-circle">
    <div class="bg"></div>
    <div class="shirt"></div>    
    <div class="shadow-left"></div>
    <div class="shadow-right"></div>
</div>

因为它跟那两片阴影有些叠压的关系,所以我把它也作为了.bg-circle的子元素来写。css代码如下:

.shirt{    
    position: absolute;
    z-index: 39;
    bottom: -10px; 
    left: 50%;  
    margin-left: -90px;
    width: 180px;
    background-color: black;
}

在这里,我要让黑T-shirt在浅阴影之上,在深阴影之下。在写浅阴影的时候,我没有给z-index的值,所以黑T-shirt只要z-index大于0即可;深阴影我当时写的z-index: 59,所以黑T-shirt小于59就行了。但是要考虑到黑T-shirt上面还有几个字,不能把z-index设太高,所以这里我设的z-index: 39。
2.3.2 这几个T-shirt上面的字母,因为动画中是一个一个出现的,所以我把它们每一个单独写出来。
超详细教程:纯CSS3写一个摇头晃脑的小哥
html代码如下:

<div class="bg-circle">
    <div class="bg"></div>
    <div class="shirt"></div>            
    <div class="logo">
        <div class="i">I</div>
        <div class="love">♥</div>
        <div class="c">C</div>
        <div class="s1">S</div>
        <div class="s2">S</div>
    </div>
    <div class="shadow-left"></div>
    <div class="shadow-right"></div>
</div>

到此,.bg-circle的结构就完整了!css代码如下:

.logo{
    display: flex;
    justify-content: space-around;
    position: absolute;
    z-index: 49;
    left:50%;
    bottom:-35px;
    margin-left:-60px; 
    width: 120px;
    height: 105px;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
}
.love{
    color:red;
}
.i,.love,.c,.s1,.s2{
    margin-top:100px;
    /*------动画结束的最终效果要加上:*/
        margin-top:25px;
}

为了更方便地让这几个字母保持等间距,我用了display: flex;属性,并设置justify-content: space-around;属性,使每个元素两侧的间隔相等,并且在两端都留有空间。其实如果我修改一下,把justify-content设为space-between,效果也是差不多的。
那个小心心是我从案例的网页里复制过来的,我不知道怎么输入它(/ω\)。
这几个字母在黑T-shirt的上面,又要能被深色的阴影盖住,所以这里我设的z-index: 49。
2.4 那两个晃动的音符就更好写了。如果不考虑动画效果,只要让它们出现、并且位于整个中央的部分之上,就可以了。
超详细教程:纯CSS3写一个摇头晃脑的小哥
html代码如下:

<div class="notes">
    <div class="note2"><img src="note2.png"></div> <div class="note1"><img src="note1.png"></div> </div>

和头部.head一个道理,要想显示在圆形区域.bg-circle之上,就要跟它是同辈元素,并且因为.bg-circle{z-index:0;}的设置,这里可以不写.notes的z-index。css代码如下:

.notes{
    position: absolute;
    left: 50%;
    margin-left:-170px;
    width: 340px;
}
.note2{
    float: left;
    margin-left: 30px;
    opacity: 0;
}
.note1{
    float: right;
    margin-right: 30px;
    opacity: 0;
}

别的应该都不用我说,但是可能有人会问,上来就设成opacity: 0要干什么?说实话,我自己写完这个也小半个月了,我都懵了(◎_◎;)。我回去试了一下,发现原来是这么回事儿:因为这两个音符的动画是有延迟值的,不是上来就开始晃悠的,要等脸上的动作做完,于是它们在stand by的时候,就要隐身才行,等到要它们出场了,再在动画效果里给它们显示出来。为了说明问题,我随便取了它们运动中的一个值加上去,能看出来它们在哪就行。代码如下:

.note1,.note2{
    transform: rotate(0deg);
    opacity: .7;
    margin-top:-150px;
}

2.5 到这里,并没有完。不知道你还记不记得,有四个黄色的环依次出现,只出场那么一次?
超详细教程:纯CSS3写一个摇头晃脑的小哥
html代码如下:

<div class="rounds">
    <div class="round1"></div>
    <div class="round2"></div>
    <div class="round3"></div>
    <div class="round4"></div>
</div>

.rounds也是.bg-circle它们的同辈元素,这样,才能不被.bg-circle的over-flow:hidden影响,且位于头发、音符之下。css代码如下:

.round1,.round2,.round3,.round4{
    position: absolute;
    top:76px;
    left: 50%;
    margin-left: -124px;
    border-radius: 50%;
    background-color: transparent;
}

如果只按上面这样写,它们是隐形的。我还是取它们动画中的一个过程值让一个圈出来现身说法一下:

.round1{
    border:1px solid #ffd11a;
    width: 240px;
    height: 240px;
    transform: scale(1.2);
}

可能只是个人习惯吧,我写了一个包裹层.rounds,但是实际上并没有给它设置样式。我试着把它删掉,于结果上毫无影响。现在看来,只有在我想把各部分内容折叠起来的时候,包裹层确实是有用的。我现在理解得也不多,以后有新想法了再来补充修改吧。
还有一点是挺有意思的。如果把现在的样式写在.rounds里,而不是分别给这几个.roundX定义,会产生非常神奇的效果,我觉得这些尝试也有助于新手理解css效果的实现,有兴趣的朋友不妨动手试一试。
代码是看不会的,只能是动手敲会的。我觉得,做别的事也是一样。(职业病,可能晚期了,大概是治不好了吧……)

3.实现动画

3.1 参照案例,记录每一个部位的动画效果和出现顺序
我当时用了一个比较笨的方法,用一个小本儿,一遍一遍地刷新页面,看最先出来的是哪个动作,然后是啥,每个动作是什么效果,有没有同时出现的别的动作。但是毕竟是靠估计出来的时间差还有各种角度,所以没能高度还原,就整个差不多意思,就成了。不然我可能要用出更土的招儿,比如弄个计时器什么的(/ω\)。
下面是我记录的时间轴,或者说进程图?
开始
–>[蓝背景大圆(出现-变大-正常,0.8s)+黑T(出现-变大-正常,1s)]+脸(变大-正常,0.5s,迟1s)
–>[头发主体(由下向上,0.8s,迟1.5s)+鬓角(0.4s,迟2.3s)]
–>顶毛(0.6s,迟2.3s)
–>耳朵(0.4s,迟2.9s)
–>刘海(0.4s,迟3.3s)
–>{[眼睛出现(0.5s,迟3.7s)]+眼窝(0.3s,迟3.7s)+[眉毛出现(0.4s,迟3.7s),右边眉毛(3s,迟2.5s)]}
–>嘴(0.5s,迟4.2s)
–>字母(1s,迟4s+)
–>[两侧阴影(5.7s,延迟写在动画里了)+四个圈(1s+,迟5s+)+脸的侧影(0.5s,迟4.7s)+鼻子(0.5s,迟4.7s)+摇头(1s,迟5.2s)+眨眼(5s,迟5.2s)]
–>音符(2s,迟5s+)。
其实这个部分是最耗时的,我感觉。当时记录就很费劲,现在写起来又是一笔烂账……但是写下来或者记下来,形成类似计划书或者时间轴的东西,总是比看一点儿做一点儿要好些的。
3.2 制作动画
3.2.1 基本操作:
做好规划之后,写动画效果其实是最简单的啦!首先,我们以那个圆背景为例:

.bg-circle{    
    /*这部分代码前面写过了,此处略过*/
    animation: bigger .8s forwards linear;
}
@keyframes bigger{
    0%{height: 200px;width: 200px;margin-top: 40px;}
    75%{transform: scale(1.0,1.0);}
    100%{transform: scale(0.8,0.8);margin-top: 0;}
}

在要写入动画效果的元素的样式里面,加入一句animation:…;就可以了(我这里用到的是简写的方法,也可以每个动画效果单独写出来,这个在网上可以找到很多,我不系统地列举了)。
其中:
第一个属性(bigger)是我要调用的动画的名字,即animation-name;
第二个属性(.8s,或者写成0.8s)是完成这个动画所需的时间,如果是要多次播放的,这个时间就是每一个周期的时间,即animation-duration;
第三个属性(forwards)是说完成这个动画之后,该元素以什么样式存在,即animation-fill-mode。forwards是设置动画完成时,保持住最终这个姿态,别动。这个属性还有很多值,我还没用过别的,不敢多说;
第四个属性(linear)是设定这个动作的速度曲线,即animation-timing-function,是挺好用的一个属性。我这里设的linear是从头到尾一个速度。后面我还用过ease,慢-快-慢的效果,很自然。这个属性也有很多值,多试试,以后更好上手。
因为我自己用的是Chrome浏览器,暂时就没有进行浏览器兼容的练习(以后如果遇到了,我再单独写)。所以直接用@keyframes bigger{…}来定义动画就可以了。
在@keyframes youranimation{…}里面,据说最好是一定要设置from/0%和to/100%,这两种写法我是没什么研究,哪种写法我测试的时候都没什么问题。其他的过程值,可以随便设置,不用拘泥于50%、75%之类的,我设过88%来调试,也行的。但是如果没有太大的必要,效果要是差得不多,也不用非得难为自己去用animation-duration乘以88%来计算每个动作的时间吧。
3.2.2 简化代码:
3.2.2.1 有的时候,一个元素要设定两个动作,比如眼睛:开场的时候,要变大再回到正常大小,然后等脸上的东西全出现了,随着摇头的动作,眼睛还要眨起来。而且,我们还需要让这个动作等一会儿再开始,也就是常说的延迟。这时候,动作效果可以这样写:

.eye-left,.eye-right{
    /*这部分代码前面写过了,此处略过*/
    animation:openeyes 0.5s 3.7s forwards,wink 5s 5.2s infinite;
}
@keyframes openeyes{
    0%{}
    75%{height: 33px;width: 21px;opacity: 0.4;border-radius: 0;}
    100%{height: 22px;}
}
@keyframes wink{
    0%,90%{height:22px;}
    95%{height: 0;}
    100%{height:22px;}
}

对于同一个元素,要设置两个动作的时候,一定要写在同一个animation里面,用“,”隔开。如果写了两个animation:…;后面一个会覆盖前面的,就相当于是只写了一条。
另外,每一组简写的animation:…;里面,都有两个时间值,不用担心,浏览器自己懂的,第一个是动画的周期长短,第二个是延迟时间,即animation-delay。一开始,我担心会不会造成什么误会,还坚持分开写来着。后来发现网上有例子,就是简写的方式,我就把我的代码都改成这样了。毕竟,看在代码优化的份上,能省一行是一行!
3.2.2.2 在@keyframes youranimation{…}里面,也可以用简写的方式。如果这个动作里面,有几个时间点是同一个效果,就可以写在一起,比如上面这段,写wink这个眨眼的动作时,我直接把0%,90%写成了同一个效果,相当于用整个动画过程的90%的时间,来当作延迟来完成。
再比如我在写呆毛的动画的时候:

@keyframes upper{
    0%,90%,100%{transform-origin: 80% 100%;}
    0%{height: 0;top:5px;transform:rotate(-5deg);}
    90%{height: 30px;transform:rotate(10deg);}
    100%{height: 30px;transform:rotate(0deg);}
}

在我的代码里,这个用法是比较常见的。3.2.2.3 还有一种情况,当多个元素同时调用一个预设动画的时候,我们只需要作一些微调,就可以让这多个元素产生不一样的效果。比如那四个由中心向外扩张的环,还记得吗?

.round2{
    animation:rd2 .8s 5.6s forwards;
}
.round3{
    animation:rd2 .8s 5.7s forwards;
}
.round4{
    animation:rd2 .8s 5.8s forwards;
}
@keyframes rd2{
    0%{border:2px solid #ffd11a;width: 240px;height: 240px;}
    90%{border:1px solid #ffd11a;width: 240px;height: 240px;transform: scale(1.3);}
    100%{opacity:0;}
}

我这里改得还比较少,只是让每一个环的延迟不一样,就做到了现在的效果。有机会我还会试试其他的变化,这东西挺有意思!

4.结语

当初打算要照着人家的案例做练习的时候呢,我心里是拒绝的……毕竟我从来没有让css动起来的经验。但是想到当初第一次接触flex的时候也是这么想的。虽然不能说自己现在有多么精通,但是我经过几次的使用,至少知道flex能干什么、如果不会了要去哪里找答案。这个过程我觉得是很重要的。所以这一次,我也给自己加油,告诉自己能做得到!
制做的过程中呢,遇到很多问题,尤其是定位的问题。我之前没经历过这么复杂的定位关系,其实从这一点也能看出来我基础有多渣……但是我总是问自己:别人能行,因为啥?是因为他是天才?还是因为他做个梦就能会?如果都不是,那人家也是一点点儿学的,我也可以。我可能慢一些,也可能没人家一点就通,但我总是能学会的,总比看到了困难就止步不前要好。所以,每次遇到不明白的地方,就上网查教程,看有没有人提问,看别人的回答。实在看不懂,就慢点儿看;再看不懂,就把人家代码全写上去,一句一句的删掉,看是哪句话起了作用,有没有几句话是要一起发挥作用的。在这个过程中,我发现借助浏览器自带的检查工具,是非常有效的。
当时全写完了之后,我缓了好一阵儿,觉得自己相当有才了!像是翻过一座大山似的!缓了没多久,第二天吧,就开始学Jquery了,看了一本书,写了一个大转盘的案例。然后才想起来,这些东西不能写完就算了,得做总结啊,不然以后肯定就忘没了!这也就一两个星期的事儿吧,我今天再回头来写这篇文章的时候,我有这么几个想法:我当时怎么想的?这东西哪里难了,有什么?这些代码的顺序为什么这么奇怪?我感觉,这说明我确实是在进步的,也说明不作记录的话,真的会慢慢忘掉原以为不会忘的东西。
忘了怎么发现的了,是说css代码应该按照一定的顺序书写,位置、大小、文字、背景及其他。我写这篇文章的时候,才发现当时我真是,想起什么写什么啊,并没有所谓顺序可言。而且,还有很多冗余的代码,并没有作用,可能是某次不成功的调试留下的痕迹。在这次整理中,我一并都进行了修改。
之前是看到别的技术大牛写自己的经验之谈的时候,写到说要抽时间做这样的总结。为名,可以提高自己的关注度;为己,也是进一步内化所学知识的过程。必须要能沉下心来,积淀自己的思想。内视,也是一种修行。我在这样的启发下,咬着牙、强迫自己也这样做一次。
说实话,一想到要开始写这篇文章,我头都疼。为了逃避,我甚至开始给自己找别的事做,让自己好像没时间一样。但是后来我还是正视自己,不要跑,跑得过初一又跑不过十五。想想也是,骗自己干什么呢?当我真正开始做这件事的时候,又时时刻刻体会到其重要性,以及它带给我的好处。最直接、也最残忍的一面,就是把自己之前的不足和缺陷,一五一十地摔在眼前:这就是你以为的你很好,这就是所谓的你做完了?!但是值得庆幸的是,我是第一个看到这些不足的人,不是很好吗?总好过沾沾自己喜地把成果给别人看,然后被批评得一无是处强。

今天的文章超详细教程:纯CSS3写一个摇头晃脑的小哥分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/17473.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注