纯CSS3动画实现小黄人

先上效果：

http://2.danielcv.sinaapp.com/sae/minimon/index.html

要实现这个效果其实并不难，主要是对一些CSS3特性的实质性应用，比如transform，transition还有relative，absolute定位的使用方法，

在搭建好

<div class="wrapper">
        <div class="littleH">
            <div class="bodyH">
                <div class="trousers">
                    <div class="condoleBelt">
                        <div class="left"></div>
                        <div class="right"></div>
                    </div>
                    <div class="trousers_top"></div>
                    <div class="pocket"></div>
                    <span class="line_left"></span>
                    <span class="line_right"></span>
                    <span class="line_bottom"></span>
                </div>
            </div>
            <div class="hair">
                <span class="left_hair_one"></span>
                <span class="left_hair_two"></span>
            </div>
            <div class="eyes">
                <div class="leftEye">
                    <div class="left_blackEye">
                        <div class="left_white"></div>
                    </div>
                </div>
                <div class="rightEye">
                    <div class="right_blackEye">
                        <div class="right_white"></div>
                    </div>
                </div>
            </div>
            <div class="mouth">
                <div class="mouth_shape"></div>
            </div>
            <div class="hands">
                <div class="leftHand"></div>
                <div class="rightHand"></div>
            </div>
            <div class="feet">
                <div class="left_foot"></div>
                <div class="right_foot"></div>
            </div>
            <div class="groundShadow"></div>
        </div>
    </div>

按照，身体，裤子，头发，眼睛，嘴巴，手，脚搭建好这样一个html框架后，就可以着手书写css代码了。

CSS方面，这里就节选一段做说明吧，比如

.littleH{
    position: relative;
}
.bodyH{
    position: absolute;
    width: 240px;
    height: 400px;
    border: 5px solid #000;
    border-radius: 115px;
    background: rgb(249,217,70);
    overflow: hidden;
    z-index: 2;
}

我们知道，absolute是根据最近的相对定位来进行定位的，所以，在需要用absolute定位的地方，我们需要在它的父元素先定义relative定位，不然

它就会默认去找离它最近的relative定位元素甚至body来做参考。接下来就是用top和left来定位的问题了。

另一个要点在于对伪元素的运用，比如眼睛这里：

.eyes{
    position: relative;
}
.leftEye{
    width: 60px;
    height: 60px;
    border-radius: 60px;
    border: 5px solid #000;
    background: #fff;
    position: absolute;
    top: 60px;
    left: 40px;
    z-index: 5;
}
.left_blackEye{
    width: 30px;
    height: 30px;
    border-radius:30px;
    background: #000;
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 5;
}
.leftEye:after{
    content: "";
    width: 40px;
    height: 20px;
    background: #000;
    position: absolute;
    z-index: 5;
    top: 20px;
    left: -40px;
}
.left_white{
    width: 15px;
    height: 15px;
    border-radius:15px;
    background: #fff;
    position: absolute;
    top: 0px;
    left:10px;
    z-index: 5;
}

.leftEye:after就是一个伪元素，通过伪元素来修饰内容，而无需添加额外的标签，这里也顺便复习了一下。
再一个就是对keyframes的运用了
还是以眼睛为例，要添加一个keyframes动画

.eyes .leftEye .left_blackEye .left_white,
.eyes .rightEye .right_blackEye .right_white{
-webkit-animation: whiteeye 5s ease-in-out infinite;
}

首先需要对选择的元素表明使用animation属性，animation属性有几个值，分别是动画名称（必填），动画时间（必填），动画效果，和动画播放的次数（

infinite表示无限循环播放）
然后就可以写动画名称对应的动画了

@-webkit-keyframes whiteeye{
0%,20%,50%,70%,100%{
-webkit-transform: translateX(0px);
}
30%,40%{
-webkit-transform: translate3d(3px,5px,0);
}
80%,90%{
-webkit-transform: translate3d(-8px,5px,0);
}
}

这里定义了在不同时间要做的东西。

以上总结了做一个这样的css3动画需要的一些知识，对我来说相当是一次归纳总结，温故知新，希望也能帮到其他人吧~！

纯CSS3动画实现小黄人

相关推荐