首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

CSS3实现可爱的小黄人动画

Posted in HTML / CSS onJuly 11, 2016

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

CSS3实现可爱的小黄人动画

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

CSS3实现可爱的小黄人动画

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

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

CSS3实现可爱的小黄人动画

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

这个demo涉及的知识点有：

perspective

perspective-origin

transform-style

transform-origin

animation

@keyframes

translate3d,translateX，rotateY….

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

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

html结构：

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2.     <div class="title">  
  3.         <p>小黄人</p>  
  4.     </div>  
  5.     <div class="wrapper">  
  6.         <div class="littleH">  
  7.             <div class="light">  
  8.                 <div class="light_left">  
  9.                     <p>欢迎欢迎，热烈欢迎</p>  
  10.                 </div>  
  11.                 <div class="light_right">  
  12.                     <p>欢迎欢迎，热烈欢迎</p>  
  13.                 </div>  
  14.                 <div class="load"></div>  
  15.             </div>  
  16.             <div class="littleH_body">  
  17.                 <div class="leftHair"></div>  
  18.                 <div class="rightHair"></div>  
  19.                 <div class="leftBlackeye"></div>  
  20.                 <div class="leftWhiteeye"></div>  
  21.                 <div class="rightBlackeye"></div>  
  22.                 <div class="rightWhiteeye"></div>  
  23.                 <div class="mouse"></div>  
  24.                 <div class="leftFoot"></div>  
  25.                 <div class="rightFoot"></div>  
  26.             </div>  
  27.         </div>  
  28.     </div>  
  29. </body>  

css代码：

CSS Code复制内容到剪贴板
  1. body{   
  2.             margin: 0;   
  3.             padding: 0;   
  4.             width: 100%;   
  5.             height: 100%;   
  6.         }   
  7.         .title p{   
  8.             text-align: center;   
  9.             font-size: 100px;   
  10.             font-weight: bolder;   
  11.             color:#333;   
  12.         }   
  13.         .wrapper{   
  14.             margin: 400px auto;   
  15.         }   
  16.         .littleH{   
  17.             position: relative;   
  18.             -webkit-perspective: 800;   
  19.             -webkit-perspective-origin: 50% 50%;   
  20.         }   
  21.         .light{   
  22.             -webkit-transform-style: preserve-3d;   
  23.         }   
  24.         .light .light_left,.light .light_right{   
  25.             position: absolute;   
  26.             width: 100%;   
  27.             height: 300px;   
  28.             background: lightblue;   
  29.             -webkit-transform: rotateY(90deg) translate3d(0,300px,-200px);   
  30.             -webkit-animation: changeBgColor 2s linear infinite;   
  31.         }   
  32.         .light .light_right{   
  33.             -webkit-transform: rotateY(-90deg) translate3d(0,300px,-215px);   
  34.             -webkit-animation-delay: 1s;   
  35.         }   
  36.         @-webkit-keyframes changeBgColor{   
  37.             0%,100%{   
  38.                 background: lightblue;   
  39.             }   
  40.             50%{   
  41.                 background: lightgreen;   
  42.             }   
  43.         }   
  44.         .light .light_left p,.light .light_right p{   
  45.             color:#fff;   
  46.             font-size: 80px;   
  47.             font-weight: bold;   
  48.             margin-left: 100px;   
  49.         }   
  50.         .light .light_right p{   
  51.             float: rightright;   
  52.             margin-right: 100px;   
  53.         }   
  54.         .light .load{   
  55.             position: absolute;   
  56.             width: 500px;   
  57.             height: 1500px;   
  58.             background: -webkit-gradient(linear, left top, left bottombottom, color-stop(51%,#aadbdc), color-stop(52%,#ffffff));   
  59.             background: -webkit-linear-gradient(top, #aadbdc 51%,#ffffff 52%);   
  60.             background: linear-gradient(to bottombottom, #aadbdc 51%,#ffffff 52%);    
  61.             background-size: 350px 80px;   
  62.             -webkit-animation: move_load 5s linear infinite;   
  63.         }   
  64.         @-webkit-keyframes move_load{   
  65.             0%{   
  66.                 -webkit-transform:rotateX(90deg) translate3d(250px,0,0);   
  67.             }   
  68.             100%{   
  69.                 -webkit-transform:rotateX(90deg) translate3d(250px,-320px,0);   
  70.             }   
  71.         }   
  72.         .littleH_body{   
  73.             position: absolute;   
  74.             left:50%;   
  75.             margin-left: -157px;   
  76.             width: 314px;   
  77.             height: 425px;   
  78.             background: url(1.png);   
  79.             -webkit-transform-style: preserve-3d;   
  80.         }   
  81.         .leftHair{   
  82.             position: absolute;   
  83.             rightright: 58px;   
  84.             top:-5px;   
  85.             width: 100px;   
  86.             height: 17px;   
  87.             background: url(lefthair.png);   
  88.             -webkit-transform-origin: left bottombottom;   
  89.             -webkit-animation: lefthair 1s .3s ease-in-out infinite;   
  90.   
  91.         }   
  92.         @-webkit-keyframes lefthair{   
  93.             0%,10%,40%,100%{   
  94.                 -webkit-transform: rotate(0deg) translateY(1px);   
  95.             }   
  96.             30%{   
  97.                 -webkit-transform: rotate(-3deg) translateY(1px);   
  98.             }   
  99.         }   
  100.         .rightHair{   
  101.             position: absolute;   
  102.             left: 58px;   
  103.             top:-8px;   
  104.             width: 100px;   
  105.             height: 16px;   
  106.             background: url(righthair.png);   
  107.             -webkit-transform-origin: rightright bottombottom;   
  108.             -webkit-animation: righthair 1s ease-in-out infinite;   
  109.         }   
  110.         @-webkit-keyframes righthair{   
  111.             0%,10%,40%,100%{   
  112.                 -webkit-transform: rotate(0deg) translateY(1px);   
  113.             }   
  114.             30%{   
  115.                 -webkit-transform: rotate(4deg) translateY(1px);   
  116.             }   
  117.         }   
  118.         .leftBlackeye{   
  119.             position: absolute;   
  120.             rightright: 87px;   
  121.             top:102px;   
  122.             width: 43px;   
  123.             height: 43px;   
  124.             background: url(eyeblack.png);   
  125.             -webkit-animation: leftblackeye 5s ease-in infinite;   
  126.         }   
  127.         @-webkit-keyframes leftblackeye{   
  128.             0%,20%,50%,70%,100%{   
  129.                 -webkit-transform: translateX(0px);   
  130.             }   
  131.             30%,40%{   
  132.                 -webkit-transform: translateX(15px);   
  133.             }   
  134.             80%,90%{   
  135.                 -webkit-transform: translateX(-15px);   
  136.             }   
  137.         }   
  138.         .leftWhiteeye{   
  139.             position: absolute;   
  140.             rightright: 92px;   
  141.             top:110px;   
  142.             width: 20px;   
  143.             height: 21px;   
  144.             background: url(whiteeye.png);   
  145.             background-size: 95% 95%;   
  146.             background-repeat: no-repeat;   
  147.             -webkit-animation: leftwhiteeye 5s ease-in infinite;   
  148.         }   
  149.         @-webkit-keyframes leftwhiteeye{   
  150.             0%,20%,50%,70%,100%{   
  151.                 -webkit-transform: translateX(0px);   
  152.             }   
  153.             30%,40%{   
  154.                 -webkit-transform: translate3d(15px,3px,0);   
  155.             }   
  156.             80%,90%{   
  157.                 -webkit-transform: translate3d(-30px,3px,0);   
  158.             }   
  159.         }   
  160.         .rightBlackeye{   
  161.             position: absolute;   
  162.             left: 84px;   
  163.             top:102px;   
  164.             width: 43px;   
  165.             height: 43px;   
  166.             background: url(eyeblack.png);   
  167.             -webkit-animation: rightblackeye 5s ease-in infinite;   
  168.         }   
  169.         @-webkit-keyframes rightblackeye{   
  170.             0%,20%,50%,70%,100%{   
  171.                 -webkit-transform: translateX(0px);   
  172.             }   
  173.             30%,40%{   
  174.                 -webkit-transform: translateX(15px);   
  175.             }   
  176.             80%,90%{   
  177.                 -webkit-transform: translateX(-15px);   
  178.             }   
  179.         }   
  180.         .rightWhiteeye{   
  181.             position: absolute;   
  182.             left: 102px;   
  183.             top:112px;   
  184.             width: 20px;   
  185.             height: 21px;   
  186.             background: url(whiteeye.png);   
  187.             background-size: 95% 95%;   
  188.             background-repeat: no-repeat;   
  189.             -webkit-animation: rightwhiteeye 5s ease-in infinite;   
  190.         }   
  191.         @-webkit-keyframes rightwhiteeye{   
  192.             0%,20%,50%,70%,100%{   
  193.                 -webkit-transform: translateX(0px);   
  194.             }   
  195.             30%,40%{   
  196.                 -webkit-transform: translate3d(15px,3px,0);   
  197.             }   
  198.             80%,90%{   
  199.                 -webkit-transform: translate3d(-30px,3px,0);   
  200.             }   
  201.         }   
  202.         .mouse{   
  203.             position: absolute;   
  204.             left: 126px;   
  205.             top:210px;   
  206.             width: 71px;   
  207.             height: 30px;   
  208.             background: url(mouse.png);   
  209.             -webkit-transform-origin: center top;   
  210.             -webkit-animation: mouse 5s ease-in-out infinite;   
  211.         }   
  212.         @-webkit-keyframes mouse{   
  213.             40%{   
  214.                 -webkit-transform: rotate(-15deg) translateX(22px);   
  215.             }   
  216.             0%,20%,60%,100%{   
  217.                 -webkit-transform: rotate(0deg);   
  218.             }   
  219.         }   
  220.         .leftFoot{   
  221.             position: absolute;   
  222.             rightright: 85px;   
  223.             top:424px;   
  224.             width: 68px;   
  225.             height: 43px;   
  226.             background: url(leftfoot.png);   
  227.             -webkit-transform-origin: left top;   
  228.             -webkit-animation: leftfoot .6s ease-in-out infinite;   
  229.         }   
  230.         @-webkit-keyframes leftfoot{   
  231.             0%,50%,100%{   
  232.                 -webkit-transform: rotate(0deg);   
  233.             }   
  234.             80%{   
  235.                 -webkit-transform: rotate(-10deg);   
  236.             }   
  237.         }   
  238.         .rightFoot{   
  239.             position: absolute;   
  240.             left: 85px;   
  241.             top:424px;   
  242.             width: 68px;   
  243.             height: 43px;   
  244.             background: url(rightfoot.png);   
  245.             margin-bottom: 100px;   
  246.             -webkit-transform-origin: rightright top;   
  247.             -webkit-animation: rightfoot .6s ease-in-out infinite;   
  248.         }   
  249.         @-webkit-keyframes rightfoot{   
  250.             0%,50%,100%{   
  251.                 -webkit-transform: rotate(0deg);   
  252.             }   
  253.   
  254.             30%{   
  255.                 -webkit-transform: rotate(10deg);   
  256.             }   
  257.         }   

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

PS：附上我抠的图片

CSS3实现可爱的小黄人动画 1.png

CSS3实现可爱的小黄人动画righthair.png

CSS3实现可爱的小黄人动画lefthair.png

CSS3实现可爱的小黄人动画eyeblack.png

CSS3实现可爱的小黄人动画whiteeye.png

CSS3实现可爱的小黄人动画mouse.png

CSS3实现可爱的小黄人动画rightfoot.png

CSS3实现可爱的小黄人动画leftfoot.png

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

原文链接：http://www.cnblogs.com/jr1993/p/4654622.html

CSS3实现可爱的小黄人动画

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3 3D立方体效果示例－transform也不过如此
Dec 05 HTML / CSS
真正了解CSS3背景下的@font face规则
May 04 HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
May 06 HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 HTML / CSS
css3 伪类选择器快速复习小结
Sep 10 HTML / CSS
css3使用animation属性实现炫酷效果(推荐)
Feb 04 HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
html5启动原生APP总结
Jul 03 HTML / CSS
html form表单基础入门案例讲解
Jul 21 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 #HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 #HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 #HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 #HTML / CSS
css3media响应式布局实例
Jul 08 #HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
Jul 05 #HTML / CSS
CSS3中Transition动画属性用法详解
Jul 04 #HTML / CSS
MIME(1) 优化(1) 增删改查(2) redo log(1) 抖音(1) 存储过程(3) instantclient(1) binlog(2) 写入策略(1) LOGO(1)
You might like
php 在文件指定行插入数据的代码
2010/05/08 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
CI框架入门示例之数据库取数据完整实现方法
2014/11/05 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
使用滤镜设置透明导致 IE 6/7/8/9 解析异常的解决方法
2011/04/07 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
Bootstrap学习笔记之环境配置(1)
2016/12/07 Javascript
ionic cordova一次上传多张图片（类似input file提交表单)的实现方法
2016/12/16 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
python构建指数平滑预测模型示例
2019/11/21 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
18-35岁旅游团的全球领导者：Contiki
2017/02/08 全球购物
MaBelle玛贝尔香港官网：香港钻饰连锁店
2019/09/09 全球购物
犹他州最古老的体育用品公司：Al’s
2020/12/18 全球购物
社保委托书怎么写
2014/08/02 职场文书
可怜妈妈观后感
2015/06/09 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
python 中的@运算符使用
2021/05/26 Python
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS