码迷,mamicode.com
首页 > Web开发 > 详细

纯CSS3动画实现小黄人

时间:2015-08-16 11:58:30      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:

先上效果:

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动画实现小黄人

标签:

原文地址:http://www.cnblogs.com/danielweb/p/4733802.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!