CSS3实现小黄人动画

转载请注明出处，谢谢！

每次看到CSS3动画就心痒痒想试一下，记得一个多月前看了白树哥哥的一篇博客，突然开窍，于是拿他提供的demo试了一下，感觉很棒！下图为demo提供的动画帧设计稿。

自己也想说搞一个DIY的动画出来，可是，会PS不一定会设计啊，我搞不出一套动画设计稿出来啊【抓狂】….于是乎，去了站酷网找找素材，我果然还是太天真了，最后从心只找到了一张图：

联想到我要做CSS3动画，呵呵……怎么办 ? ——没办法，抠呗！（此处勿喷，着实无素材）

……最后效果变成这样子,这是移动端的例子！(gif图有卡顿现象，请凑合看吧,非喜勿喷…)：

OK,其实主要目的还是知识点的学习吧：

这个demo涉及的知识点有：

perspective

perspective-origin

transform-style

transform-origin

animation

@keyframes

translate3d,translateX，rotateY….

这些知识点有些涉及css3d动画，各个知识点的具体详解我就不解释了，有兴趣可以到这里了解一下：http://isux.tencent.com/css3/index.html

回到这个案例，话说这么挫的动画是怎么具体实现的呢？我将分享代码给大家练习：

html结构：

<body>

    <div class="title">

        <p>小黄人</p>

    </div>

    <div class="wrapper">

        <div class="littleH">

            <div class="light">

                <div class="light_left">

                    <p>欢迎欢迎，热烈欢迎</p>

                </div>

                <div class="light_right">

                    <p>欢迎欢迎，热烈欢迎</p>

                </div>

                <div class="load"></div>

            </div>

            <div class="littleH_body">

                <div class="leftHair"></div>

                <div class="rightHair"></div>

                <div class="leftBlackeye"></div>

                <div class="leftWhiteeye"></div>

                <div class="rightBlackeye"></div>

                <div class="rightWhiteeye"></div>

                <div class="mouse"></div>

                <div class="leftFoot"></div>

                <div class="rightFoot"></div>

            </div>

        </div>

    </div>

</body>

css代码：

body{

            margin: 0;

            padding: 0;

            width: 100%;

            height: 100%;

        }

        .title p{

            text-align: center;

            font-size: 100px;

            font-weight: bolder;

            color:#333;

        }

        .wrapper{

            margin: 400px auto;

        }

        .littleH{

            position: relative;

            -webkit-perspective: 800;

            -webkit-perspective-origin: 50% 50%;

        }

        .light{

            -webkit-transform-style: preserve-3d;

        }

        .light .light_left,.light .light_right{

            position: absolute;

            width: 100%;

            height: 300px;

            background: lightblue;

            -webkit-transform: rotateY(90deg) translate3d(0,300px,-200px);

            -webkit-animation: changeBgColor 2s linear infinite;

        }

        .light .light_right{

            -webkit-transform: rotateY(-90deg) translate3d(0,300px,-215px);

            -webkit-animation-delay: 1s;

        }

        @-webkit-keyframes changeBgColor{

            0%,100%{

                background: lightblue;

            }

            50%{

                background: lightgreen;

            }

        }

        .light .light_left p,.light .light_right p{

            color:#fff;

            font-size: 80px;

            font-weight: bold;

            margin-left: 100px;

        }

        .light .light_right p{

            float: right;

            margin-right: 100px;

        }

        .light .load{

            position: absolute;

            width: 500px;

            height: 1500px;

            background: -webkit-gradient(linear, left top, left bottom, color-stop(51%,#aadbdc), color-stop(52%,#ffffff));

            background: -webkit-linear-gradient(top, #aadbdc 51%,#ffffff 52%);

            background: linear-gradient(to bottom, #aadbdc 51%,#ffffff 52%);

            background-size: 350px 80px;

            -webkit-animation: move_load 5s linear infinite;

        }

        @-webkit-keyframes move_load{

            0%{

                -webkit-transform:rotateX(90deg) translate3d(250px,0,0);

            }

            100%{

                -webkit-transform:rotateX(90deg) translate3d(250px,-320px,0);

            }

        }

        .littleH_body{

            position: absolute;

            left:50%;

            margin-left: -157px;

            width: 314px;

            height: 425px;

            background: url(1.png);

            -webkit-transform-style: preserve-3d;

        }

        .leftHair{

            position: absolute;

            right: 58px;

            top:-5px;

            width: 100px;

            height: 17px;

            background: url(lefthair.png);

            -webkit-transform-origin: left bottom;

            -webkit-animation: lefthair 1s .3s ease-in-out infinite;

        }

        @-webkit-keyframes lefthair{

            0%,10%,40%,100%{

                -webkit-transform: rotate(0deg) translateY(1px);

            }

            30%{

                -webkit-transform: rotate(-3deg) translateY(1px);

            }

        }

        .rightHair{

            position: absolute;

            left: 58px;

            top:-8px;

            width: 100px;

            height: 16px;

            background: url(righthair.png);

            -webkit-transform-origin: right bottom;

            -webkit-animation: righthair 1s ease-in-out infinite;

        }

        @-webkit-keyframes righthair{

            0%,10%,40%,100%{

                -webkit-transform: rotate(0deg) translateY(1px);

            }

            30%{

                -webkit-transform: rotate(4deg) translateY(1px);

            }

        }

        .leftBlackeye{

            position: absolute;

            right: 87px;

            top:102px;

            width: 43px;

            height: 43px;

            background: url(eyeblack.png);

            -webkit-animation: leftblackeye 5s ease-in infinite;

        }

        @-webkit-keyframes leftblackeye{

            0%,20%,50%,70%,100%{

                -webkit-transform: translateX(0px);

            }

            30%,40%{

                -webkit-transform: translateX(15px);

            }

            80%,90%{

                -webkit-transform: translateX(-15px);

            }

        }

        .leftWhiteeye{

            position: absolute;

            right: 92px;

            top:110px;

            width: 20px;

            height: 21px;

            background: url(whiteeye.png);

            background-size: 95% 95%;

            background-repeat: no-repeat;

            -webkit-animation: leftwhiteeye 5s ease-in infinite;

        }

        @-webkit-keyframes leftwhiteeye{

            0%,20%,50%,70%,100%{

                -webkit-transform: translateX(0px);

            }

            30%,40%{

                -webkit-transform: translate3d(15px,3px,0);

            }

            80%,90%{

                -webkit-transform: translate3d(-30px,3px,0);

            }

        }

        .rightBlackeye{

            position: absolute;

            left: 84px;

            top:102px;

            width: 43px;

            height: 43px;

            background: url(eyeblack.png);

            -webkit-animation: rightblackeye 5s ease-in infinite;

        }

        @-webkit-keyframes rightblackeye{

            0%,20%,50%,70%,100%{

                -webkit-transform: translateX(0px);

            }

            30%,40%{

                -webkit-transform: translateX(15px);

            }

            80%,90%{

                -webkit-transform: translateX(-15px);

            }

        }

        .rightWhiteeye{

            position: absolute;

            left: 102px;

            top:112px;

            width: 20px;

            height: 21px;

            background: url(whiteeye.png);

            background-size: 95% 95%;

            background-repeat: no-repeat;

            -webkit-animation: rightwhiteeye 5s ease-in infinite;

        }

        @-webkit-keyframes rightwhiteeye{

            0%,20%,50%,70%,100%{

                -webkit-transform: translateX(0px);

            }

            30%,40%{

                -webkit-transform: translate3d(15px,3px,0);

            }

            80%,90%{

                -webkit-transform: translate3d(-30px,3px,0);

            }

        }

        .mouse{

            position: absolute;

            left: 126px;

            top:210px;

            width: 71px;

            height: 30px;

            background: url(mouse.png);

            -webkit-transform-origin: center top;

            -webkit-animation: mouse 5s ease-in-out infinite;

        }

        @-webkit-keyframes mouse{

            40%{

                -webkit-transform: rotate(-15deg) translateX(22px);

            }

            0%,20%,60%,100%{

                -webkit-transform: rotate(0deg);

            }

        }

        .leftFoot{

            position: absolute;

            right: 85px;

            top:424px;

            width: 68px;

            height: 43px;

            background: url(leftfoot.png);

            -webkit-transform-origin: left top;

            -webkit-animation: leftfoot .6s ease-in-out infinite;

        }

        @-webkit-keyframes leftfoot{

            0%,50%,100%{

                -webkit-transform: rotate(0deg);

            }

            80%{

                -webkit-transform: rotate(-10deg);

            }

        }

        .rightFoot{

            position: absolute;

            left: 85px;

            top:424px;

            width: 68px;

            height: 43px;

            background: url(rightfoot.png);

            margin-bottom: 100px;

            -webkit-transform-origin: right top;

            -webkit-animation: rightfoot .6s ease-in-out infinite;

        }

        @-webkit-keyframes rightfoot{

            0%,50%,100%{

                -webkit-transform: rotate(0deg);

            }

            30%{

                -webkit-transform: rotate(10deg);

            }

        }

代码应该还是很简单就能看懂的，不足之处在于图片没有合并，就凑合吧，主要目的还是对CSS3动画（特别是3d）知识点的学习及实践。多练习，才能记得更牢，用得更顺，这只是开始……

PS：附上我抠的图片

1.png

righthair.png

lefthair.png

eyeblack.png

whiteeye.png

mouse.png

rightfoot.png

leftfoot.png

CSS3实现小黄人动画的更多相关文章

css3实现小黄人
效果就像这样: 不废话,直接上代码! hrml代码: <!DOCTYPE html> <html> <head lang="zh"> <m ...
纯CSS3画出小黄人并实现动画效果
前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
CSS3小黄人
CSS3实现小黄人效果图: 代码如下,复制即可使用: <!DOCTYPE HTML> <HTML> <head> <title>CSS3实现小黄人&l ...
CSS3 小黄人案例
使用 CSS3 和 HTML5 制作一个小黄人. 结构代码: <div class="wrap">  <div class=&q ...
微信小程序相关三、css写小黄人
小程序上课第三天,因为今天院里有活动,所以没去上课,第四天上午又因为要召开入党转正大会,又耽误了一上午,下午去上课,要了资料.这两天讲了一些零零碎碎的东西,做的实例有上面这个小黄人都是用的css,基 ...
[置顶] 几行代码实现ofo首页小黄人眼睛加速感应转动
最新版的ofo 小黄车的首页小黄人眼睛随重力而转动,感觉有点炫酷,学习一下吧,以下代码是在xamarin android下实现 ofo首页效果图: xamarin android实现效果: 实现思路: ...
Python turtle模块小黄人程序
讲解Python初级课程的turtle模块,简单粗暴的编写了小黄人的程序.程序还需要进一步优化.难点就是要搞清楚turtle在绘制图形过程中的方向变化. import turtle t = turtl ...
小黄人IP营销的四种玩法思维导图
小黄人IP营销的四种玩法思维导图 ------------------------------ 本人微信公众帐号: 心禅道(xinchandao) 本人微信公众帐号:双色球预测合买(ssqyuce)
静态分析第三发 so文件分析（小黄人快跑)
本文作者:i春秋作家——HAI_ 0×00 工具 1.IDA pro 2.Android Killer 0×01 环境小黄人快跑下载地址http://download.csdn.net/downl ...

随机推荐

Integral transform 积分变换
总结: 1.为了更加便于求解,将方程从原域映射到另外一个域 Integral transform - Wikipedia https://en.wikipedia.org/wiki/Integral_ ...
算术平均数 print('arithmeticAverageSingleCompressionRatio:', sum(singleCompressionRatio)/len(singleCompressionRatio))
print('arithmeticAverageSingleCompressionRatio:', sum(singleCompressionRatio)/len(singleCompressionR ...
Linux下缓冲区溢出攻击的原理及对策
前言从逻辑上讲进程的堆栈是由多个堆栈帧构成的,其中每个堆栈帧都对应一个函数调用.当函数调用发生时,新的堆栈帧被压入堆栈:当函数返回时,相应的堆栈帧从堆栈中弹出.尽管堆栈帧结构的引入为在高级语言中实 ...
新入职如何快速去了解一个Javaweb项目!
1.从代码结构入手,搞清楚Java源码所在目录以及jsp代码所在目录. 2.从Web.xml入手,搞清楚首页,上下文及配置情况. 3.从lib目录里初步查看系统使用的框架和工具包. 4.从页面大体浏览 ...
《Nginx - location配置》
一:Location 作用 - location 定位 ,也就是可以通过不同URL进行定位,可以很大的增加它配置的灵活性. 二:相关变量示例: http://192.168.27.27/xxxx $ ...
洛谷P4289 移动玩具 HAOI2008 搜索+状压
正解:状压解题报告: 先,放下传送门QwQ 说真的我jio得这题不管是思路还是实现上,都还是有一定难度的?然后就看到神仙hl博客里一句"太水了不讲了"就过掉了,,,好的趴太强辽Q ...
Unity3D中使用Profiler精确定位性能热点的优化技巧
本文由博主(SunboyL)原创,转载请注明出处:http://www.cnblogs.com/xsln/p/BeginProfiler.html 简介在使用Profiler定位代码的性能热点时,很 ...
在mysql Navicat中怎样设置ID自动递增
1.打开设计表 2.在添加或变更表结构时,把id字段设置为整型,下面的选项就会出现auto increment的选择框,勾选中就可以了.
配合dedecms内容模型实现后台输入栏目id前端输出文章列表
为了简化开发的工作量,也方便编辑快速操作,决定将后台进行重新设置.配合dedecms内容模型实现后台输入栏目id前端输出文章列表,这样制作科室专题页也变快了很多.比如,我们添加一个“科室专家栏目id” ...
006-jdk1.5版本新特性
一.Java SE 5.0 (1.5.0) 名称:Tiger(老虎) 发布日期:2004-09-30 新特性: 1.1.静态导入定义:静态导入用于简化程序对类静态属性和方法的调用. 语法: impo ...

CSS3实现小黄人动画

CSS3实现小黄人动画的更多相关文章

随机推荐

热门专题