今天要给大家介绍一款纯css3实现的机器人看书动画效果。整个画面完全由css3实现的绘制，没有使用任何图片元素。机器人的眼睛使用了动画元素。我们一起看下效果图：

在线预览   源码下载

实现的代码。

html代码：

  1.  <div class='szene'>
  2.         <div class='image i1'>
  3.             < HTML >
  4.             <div class='nail'>
  5.             </div>
  6.         </div>
  7.         <div class='image i2'>
  8.             { CSS }
  9.             <div class='nail'>
  10.             </div>
  11.         </div>
  12.         <div class='head'>
  13.             <div class='eyes'>
  14.             </div>
  15.         </div>
  16.         <div class='body'>
  17.         </div>
  18.         <div class='table'>
  19.         </div>
  20.         <div class='laptop'>
  21.         </div>
  22.         <div class='mouse'>
  23.         </div>
  24.         <div class='notes'>
  25.         </div>
  26.         <div class='lamp'>
  27.             <div class='top'>
  28.             </div>
  29.         </div>
  30.         <div class='headphones'>
  31.         </div>
  32.         <div class='trash'>
  33.             <div class='paper p1'>
  34.             </div>
  35.             <div class='paper p2'>
  36.             </div>
  37.             <div class='paper p3'>
  38.             </div>
  39.             <div class='paper p4'>
  40.             </div>
  41.         </div>
  42.     </div>

css代码：

  1. * {
  2.   margin:;
  3.   padding:;
  4.   -moz-box-sizing: border-box;
  5.        box-sizing: border-box;
  6. }
  7.  
  8. *:before, *:after {
  9.   content: '';
  10.   display: block;
  11.   position: absolute;
  12.   -moz-box-sizing: border-box;
  13.        box-sizing: border-box;
  14. }
  15.  
  16. html, body {
  17.   height: 100%;
  18. }
  19.  
  20. body {
  21.   background: #d93;
  22. }
  23.  
  24. .szene {
  25.   position: absolute;
  26.   left: 50%;
  27.   bottom:;
  28.   width: 800px;
  29.   height: 400px;
  30.   margin-left: -400px;
  31.   overflow: hidden;
  32. }
  33.  
  34. .szene div {
  35.   position: absolute;
  36. }
  37.  
  38. .image {
  39.   width: 120px;
  40.   height: 120px;
  41.   line-height: 100px;
  42.   text-align: center;
  43.   font-family: 'Open Sans', sans-serif;
  44.   font-size: 18px;
  45.   font-weight:;
  46.   color: #888;
  47.   border: 8px solid #444;
  48.   background: #eee;
  49. }
  50.  
  51. .image.i1 { top: 100px; left: 100px; }
  52. .image.i2 { top: 50px; left: 300px; }
  53.  
  54. .image .nail {
  55.   top: -30px;
  56.   left: 50%;
  57.   width: 8px;
  58.   height: 8px;
  59.   margin-left: -4px;
  60.   border-radius: 50%;
  61.   background: #444;
  62. }
  63.  
  64. .image .nail:before,
  65. .image .nail:after {
  66.   top: -5px;
  67.   width: 1px;
  68.   height: 35px;
  69.   background: #444;
  70. }
  71.  
  72. .image .nail:before { left: -11px; -webkit-transform: rotate(55deg); -ms-transform: rotate(55deg); transform: rotate(55deg); }
  73. .image .nail:after { left: 19px; -webkit-transform: rotate(-55deg); -ms-transform: rotate(-55deg); transform: rotate(-55deg); }
  74.  
  75. .head {
  76.   bottom: 90px;
  77.   left: 575px;
  78.   width: 85px;
  79.   height: 85px;
  80.   border-radius: 50%;
  81.   background: #eee;
  82. }
  83.  
  84. .head .eyes {
  85.   top: 58px;
  86.   left: 30px;
  87.   width: 6px;
  88.   height: 6px;
  89.   border-radius: 50%;
  90.   background: #444;
  91.   box-shadow: 20px 0 0 #444;
  92.   -webkit-animation: 8s eyes ease infinite;
  93.           animation: 8s eyes ease infinite;
  94. }
  95.  
  96. @-webkit-keyframes eyes {
  97.   0% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
  98.   5% { -webkit-transform: translate3d(0,-18px,0); transform: translate3d(0,-18px,0); }
  99.   10% { -webkit-transform: translate3d(0,-19px,0); transform: translate3d(0,-19px,0); }
  100.   15% { -webkit-transform: translate3d(-15px,-18px,0); transform: translate3d(-15px,-18px,0); }
  101.   20% { -webkit-transform: translate3d(-15px,-18px,0); transform: translate3d(-15px,-18px,0); }
  102.   25% { -webkit-transform: translate3d(15px,-18px,0); transform: translate3d(15px,-18px,0); }
  103.   30% { -webkit-transform: translate3d(15px,-18px,0); transform: translate3d(15px,-18px,0); }
  104.   35% { -webkit-transform: translate3d(0,-18px,0); transform: translate3d(0,-18px,0); }
  105.   40% { -webkit-transform: translate3d(0,-18px,0); transform: translate3d(0,-18px,0); }
  106.   45% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
  107.   100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
  108. }
  109.  
  110. @keyframes eyes {
  111.   0% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
  112.   5% { -webkit-transform: translate3d(0,-18px,0); transform: translate3d(0,-18px,0); }
  113.   10% { -webkit-transform: translate3d(0,-19px,0); transform: translate3d(0,-19px,0); }
  114.   15% { -webkit-transform: translate3d(-15px,-18px,0); transform: translate3d(-15px,-18px,0); }
  115.   20% { -webkit-transform: translate3d(-15px,-18px,0); transform: translate3d(-15px,-18px,0); }
  116.   25% { -webkit-transform: translate3d(15px,-18px,0); transform: translate3d(15px,-18px,0); }
  117.   30% { -webkit-transform: translate3d(15px,-18px,0); transform: translate3d(15px,-18px,0); }
  118.   35% { -webkit-transform: translate3d(0,-18px,0); transform: translate3d(0,-18px,0); }
  119.   40% { -webkit-transform: translate3d(0,-18px,0); transform: translate3d(0,-18px,0); }
  120.   45% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
  121.   100% { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
  122. }
  123.  
  124. .body {
  125.   bottom: -20px;
  126.   left: 578px;
  127.   width: 82px;
  128.   height: 110px;
  129.   border-radius: 0 0 50% 50%;
  130.   background: #eee;
  131. }
  132.  
  133. .table {
  134.   bottom: 15px;
  135.   left: 280px;
  136.   width: 500px;
  137.   height: 15px;
  138.   background: #444;
  139. }
  140.  
  141. .table:before,
  142. .table:after {
  143.   top: 15px;
  144.   width: 10px;
  145.   height: 20px;
  146.   border-top: 3px solid #aaa;
  147.   background: #eee;
  148. }
  149.  
  150. .table:before { left: 20px; }
  151. .table:after { right: 20px; }
  152.  
  153. .laptop {
  154.   bottom: 35px;
  155.   left: 550px;
  156.   width: 140px;
  157.   height: 70px;
  158.   border-radius: 2px 2px 0 0;
  159.   background: #ddd;
  160. }
  161.  
  162. .laptop:before {
  163.   top: 50%;
  164.   left: 50%;
  165.   width: 18px;
  166.   height: 18px;
  167.   margin: -9px 0 0 -9px;
  168.   border-radius: 50%;
  169.   background: #fff;
  170. }
  171.  
  172. .laptop:after {
  173.   top: 70px;
  174.   left: -5px;
  175.   width: 150px;
  176.   height: 5px;
  177.   border-radius: 2px 2px 0 0;
  178.   background: #888;
  179. }
  180.  
  181. .mouse {
  182.   bottom: 30px;
  183.   left: 510px;
  184.   width: 20px;
  185.   height: 6px;
  186.   border-bottom: 2px solid #888;
  187.   border-radius: 25%;
  188.   background: #ddd;
  189. }
  190.  
  191. .notes {
  192.   bottom: 30px;
  193.   left: 705px;
  194.   width: 60px;
  195.   height: 12px;
  196.   background: #fff;
  197.   border: 4px solid #222;
  198.   border-radius: 4px;
  199.   border-left:;
  200. }
  201.  
  202. .lamp {
  203.   bottom: 30px;
  204.   left: 410px;
  205.   width: 40px;
  206.   height: 20px;
  207.   border-radius: 80px 80px 0 0;
  208.   background: #eee;
  209. }
  210.  
  211. .lamp:before,
  212. .lamp:after {
  213.   z-index: -1;
  214.   width: 6px;
  215.   height: 80px;
  216.   background: #ccc;
  217. }
  218.  
  219. .lamp:before { top: -70px; left: 8px; -webkit-transform: rotate(-15deg); -ms-transform: rotate(-15deg); transform: rotate(-15deg); }
  220. .lamp:after { top: -108px; left: 30px; -webkit-transform: rotate(75deg); -ms-transform: rotate(75deg); transform: rotate(75deg) }
  221.  
  222. .lamp .top {
  223.   top: -75px;
  224.   left: 45px;
  225.   width: 50px;
  226.   height: 25px;
  227.   border-radius: 100px 100px 0 0;
  228.   background: #eee;
  229.   -webkit-transform: rotate(-15deg);
  230.       -ms-transform: rotate(-15deg);
  231.           transform: rotate(-15deg);
  232. }
  233.  
  234. .headphones {
  235.   bottom: 85px;
  236.   left: 563px;
  237.   width: 110px;
  238.   height: 100px;
  239.   border-radius: 50%;
  240.   border-top: 10px solid #444;
  241. }
  242.  
  243. .headphones:before,
  244. .headphones:after {
  245.   width: 20px;
  246.   height: 40px;
  247.   top: 20px;
  248.   background: #ddd;
  249. }
  250.  
  251. .headphones:before {
  252.   left: -8px;
  253.   border-radius: 80px 0 0 80px;
  254.   border-right: 3px solid #444;
  255. }
  256.  
  257. .headphones:after {
  258.   right: -7px;
  259.   border-radius: 0 80px 80px 0;
  260.   border-left: 3px solid #444;
  261. }
  262.  
  263. .trash {
  264.   bottom: 10px;
  265.   left: 20px;
  266.   width: 100px;
  267.   height: 8px;
  268.   background: #444;
  269. }
  270.  
  271. .trash:after {
  272.   top: 8px;
  273.   left: 3px;
  274.   width: 94px;
  275.   height: 25px;
  276.   border-radius: 0 0 50px 50px;
  277.   background: #555;
  278. }
  279.  
  280. .trash .paper {
  281.   z-index: -1;
  282.   width: 25px;
  283.   height: 50px;
  284.   border: 2px solid #555;
  285.   background: #ddd;
  286. }
  287.  
  288. .trash .paper.p1 {
  289.   top: -15px;
  290.   left: 10px;
  291.   -webkit-transform: rotate(-20deg);
  292.       -ms-transform: rotate(-20deg);
  293.           transform: rotate(-20deg);
  294. }
  295.  
  296. .trash .paper.p2 {
  297.   top: -12px;
  298.   left: 30px;
  299.   -webkit-transform: rotate(-40deg);
  300.       -ms-transform: rotate(-40deg);
  301.           transform: rotate(-40deg);
  302. }
  303.  
  304. .trash .paper.p3 {
  305.   top: -15px;
  306.   left: 60px;
  307.   -webkit-transform: rotate(10deg);
  308.       -ms-transform: rotate(10deg);
  309.           transform: rotate(10deg);
  310. }
  311.  
  312. .trash .paper.p4 {
  313.   top: -12px;
  314.   left: 30px;
  315.   -webkit-transform: rotate(65deg);
  316.       -ms-transform: rotate(65deg);
  317.           transform: rotate(65deg);
  318. }

注：本文爱编程原创文章，转载请注明原文地址：http://www.w2bc.com/Article/8316

一款纯css3实现的机器人看书动画效果的更多相关文章

  1. 16款纯CSS3实现的loading加载动画

    分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

  2. 纯css3圆形从中心向四周扩散动画效果

    查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to { ...

  3. 纯css3实现的win8加载动画

    今天给大家分享一款纯css3实现的win8加载动画.在这款实例中动画效果完全由css3实现.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  4. 一款纯css3实现的漂亮的404页面

    之前为大家分享了那些创意有趣的404页面, html5和css3打造一款创意404页面, HTML5可爱的404页面动画很逗的机器人.今天再给大家分享一款纯css3实现的漂亮的404页面.效果图如下: ...

  5. 一款纯css3实现的动画按钮

    今天给大家分享一款纯css3实现的动画按钮.第一排的按钮当鼠标经过的背景色动画切换,图标从右侧飞入,第二排的按钮当鼠标经过的时候边框动画切换,图标右侧飞入,效果非常好,一起看下效果图: 在线预览    ...

  6. 一款纯css3实现的颜色渐变按钮

    之前为大家分享了推荐10款纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮.这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非常好看,一起看下效果图: 在线预览  ...

  7. 推荐10款纯css3实现的实用按钮

    在2014年的双11即将来临之季,爱编程小编为大家整理10款纯css3实现的按钮.希望这对坚守在前端的码农们有所帮助.亲,如果你有好的资源也可在本文留言,让从事编码的程序员们抱团.工作更轻松. No1 ...

  8. 一款纯css3实现的数字统计游戏

    今天给大家分享一款纯css3实现的数字统计游戏.这款游戏的规则的是将所有的数字相加等于72.这款游戏的数字按钮做得很美观,需要的时候可以借用下.一起看下效果图: 在线预览   源码下载 实现的代码. ...

  9. 一款纯css3实现的鼠标经过按钮特效

    今天再给大家带来一款纯css3实现的鼠标经过按钮特效.这款按钮非常简单,但效果很好,非常漂亮.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div align=&qu ...

随机推荐

  1. 生成CFree 5.0 注册码

    C-Free 5.0真是一个很棒的编程软件,可今天用着用着却让我注册,下面的注册码分享给大家: 方法一.下载CFree 5.0之后,直接输入以下信息进行注册. 用户名:tianfang电子邮件:qua ...

  2. spyder python 相关

    1.python开发集成工具Spyder中,如何设置变量成员提示和代码补全呢? 答: pip install rope,安装好rope 就可以了 2.最常用的是:tap的制动补全 (IPython c ...

  3. MyEcplise安装Freemarker插件（支持.ftl文件）

    1.下载插件:http://sourceforge.net/projects/freemarker-ide/?source=typ_redirect 2.下载freemarker-2.3.19.jar ...

  4. <转>C++ explicit关键字详解

    要文转自:http://www.cnblogs.com/ymy124/p/3632634.html 首先, C++中的explicit关键字只能用于修饰只有一个参数的类构造函数, 它的作用是表明该构造 ...

  5. ADO,OLEDB,ODBC,DAO,RDO的区别说明

    http://www.jb51.net/article/31286.htm http://wenku.baidu.com/link?url=D7iis1tmkyXTCqjsezsvYtYHWG8jK- ...

  6. SQL SERVER SELECT语句中加锁选项的详细说明 [转]

    SQL Server提供了强大而完备的锁机制来帮助实现数据库系统的并发性和高性能.用户既能使用SQL Server的缺省设置也可以在select 语句中使用“加锁选项”来实现预期的效果. 本文介绍了S ...

  7. GL_子模组过账至总账通过SLA修改会计方法改变科目（案列）

    2014-06-02 BaoXinjian

  8. Android调试技巧之Eclipse行号和Logcat

    很多初入Android的开发者可能会发现经常遇到Force Close或ANR这样的问题,一般我们通过Android系统的错误日志打印工具Logcat可以看到出错的内容,今天一起来说下如何通过 Ecl ...

  9. 将tomcat以普通用户启动

    1.为tomcat创建一个专用启动用户 useradd -M -r -d /dev/null -s /sbin/nologin tomcat 2.编译jsvc ① 进入tomcat的bin目录下 ② ...

  10. 使用 powerdesigner 将数据库表结构逆向工程生成对应的word文档

    本机系统win10 + mysql 5.7.17 + powerDesigner 16.5 + mysql-connector-odbc-5.3.9-winx32.msi 1 使用 PowerDesi ...