新航路师徒学院

 找回密码
 立即注册
搜索
查看: 381|回复: 0

css3做了个熊猫【转】

[复制链接]

16

主题

23

帖子

93

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
93
发表于 2016-9-14 15:18:43 | 显示全部楼层 |阅读模式
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .box{
  8.             margin: 0 auto;
  9.             width: 600px;
  10.             height: 800px;
  11.             background: #8ECC2B;;
  12.         }
  13.         .boxC{
  14.             width: 450px;
  15.             margin: 0 auto;
  16.             overflow: hidden;
  17.         }
  18.         .box-header{
  19.             width: 350px;
  20.             height: 260px;
  21.             background: #f5f5f5;
  22.             border-radius: 300px 300px 200px 200px;
  23.             margin:0 auto;
  24.             margin-top: 50px;
  25.             position: relative;


  26.         }
  27.         .header{
  28.             width: 350px;
  29.             height: 260px;
  30.             background: #f5f5f5;
  31.             border-radius: 300px 300px 200px 200px;
  32.             top:0;;
  33.             position: absolute;
  34.             z-index: 10;

  35.         }
  36.         .box-body{
  37.             width: 350px;
  38.             height: 250px;
  39.             margin: 0 auto;
  40.             background: #f3f3f3;
  41.             border-radius: 270px 270px 150px 150px;
  42.             position: relative;
  43.         }
  44.         .box-hand{
  45.             width: 300px;
  46.             height: 150px;
  47.             top: -20px;
  48.             position: relative;
  49.             margin: 0 auto;
  50.             border-radius: 150px;;
  51.             overflow: hidden;
  52.             position: relative;
  53.         }
  54.         .bh-a{width: 300px; height: 80px;border-radius: 16px 22px 43px 57px;  background: #000;position: absolute;top:0;}
  55.         .bh-b{width: 80px; height: 140px;border-radius: 20px 22px 43px 80px;  background: #000;position: absolute;left: 0px}
  56.         .bh-c{width: 68px; height: 140px;border-radius: 16px 22px 43px 30px;  background: #000;position: absolute;right: 0px}
  57.         .bh-d{width: 180px; height: 60px;border-radius: 40px 52px 43px 57px; background: #f3f3f3;position: absolute;top:70px;left:50%;margin-left: -90px;}

  58. .foot{width: 300px;height: 100px;position: relative;margin: 0 auto}
  59.         .foot-left{width: 120px; height: 80px;position: absolute;left: 0px;background: #000;border-radius: 90px 100px 20px 80px;bottom: 0;}
  60.         .foot-right{width: 120px; height: 80px;position: absolute;background: #000;border-radius: 90px 70px 80px 20px;bottom: 0;;
  61.             right:-15px;}
  62.         .left-ear{
  63.             position: absolute;
  64.             top:-25px;
  65.             width: 120px;
  66.             height: 80px;
  67.             left: -20px;
  68.             background: #000000;
  69.             -webkit-transform: rotate(-40deg);
  70.             border-radius: 60px 60px 2px 2px;
  71.         }
  72.         .right-ear{
  73.             position: absolute;
  74.             top:-25px;
  75.             width: 120px;
  76.             height: 80px;
  77.             right: -20px;
  78.             background: #000000;
  79.             -webkit-transform: rotate(40deg);
  80.             border-radius: 60px 60px 2px 2px;

  81.         }
  82.         .left-eyes{
  83.             position: absolute;
  84.             left: 80px;
  85.             width: 60px;
  86.             height: 80px;
  87.             background: #000;
  88.             border-radius: 30px 20px;
  89.             top:50px;
  90.             border-radius: 60px 60px 80px 55px;
  91.             -webkit-transform: rotate(20deg);
  92.         }
  93.         .right-eyes{
  94.             position: absolute;
  95.             right: 80px;
  96.             top:50px;
  97.             width: 60px;
  98.             height: 80px;
  99.             background: #000;
  100.             border-radius: 60px 60px 55px 80px;
  101.             -webkit-transform: rotate(-20deg);
  102.         }
  103.         .small-eyes{
  104.             width: 30px;
  105.             height: 30px;
  106.             background: #fff;
  107.         border-radius: 50%;
  108.             margin-top: 28px;
  109.             margin-left: 15px;
  110.             position: relative;
  111.         }
  112.         .small-eyes:after{
  113.             position: absolute;
  114.             content: '';
  115.             width: 15px;
  116.             height: 15px;
  117.             background: #000;
  118.             border-radius: 50%;
  119.             top:8px;
  120.             left: 0px;
  121.             -webkit-animation:mymove 2s ease infinite;
  122.         }

  123. @-webkit-keyframes mymove {
  124.     0%{
  125.         left: 0px;
  126.     }
  127.     20%{
  128.         left: 6px;
  129.     }
  130.     50%{
  131.         left: 14px;
  132.     }
  133.     80%{
  134.         left: 6px;
  135.     }
  136.     100%{
  137.         left: 0px;
  138.     }
  139. }
  140.         .mask{
  141.             text-align: center;
  142.             font-size: 48px;
  143.             color: #FFF;
  144.             text-decoration: double;
  145.             line-height: 200px;
  146.         }
  147.         .center-nose{position: absolute;width: 50px;height: 30px;background: #000;border-radius: 50%;left: 50%;margin-left: -25px;top:118px;}
  148.         .mouse{width: 80px;height: 50px;position: absolute;top:156px;margin-left: -40px;left: 50%; border:6px solid #000000;border-radius: 100%; }
  149.         .mark{width: 120px;background: #f5f5f5;position: absolute;height: 30px;margin-left: -60px;left: 50%;z-index: 20;top:156px;}
  150.     </style>
  151. </head>
  152. <body>
  153. <div class="box">
  154.     <div class="boxC">
  155.         <div class="box-header">
  156.             <div class="header">
  157.                 <div class="left-eyes"><div class="small-eyes"></div></div>
  158.                 <div class="center-nose"></div>
  159.                 <div class="right-eyes"><div class="small-eyes"></div></div>
  160.                 <div class="mouse"></div>
  161.                 <div class="mark"></div>
  162.             </div>
  163.             <div class="left-ear"></div>
  164.             <div class="right-ear"></div>
  165.         </div>
  166.         <div class="box-body">
  167.             <div class="box-hand">
  168.                 <div class="bh-a"></div>
  169.                 <div class="bh-b"></div>
  170.                 <div class="bh-c"></div>
  171.                 <div class="bh-d"></div>
  172.             </div>
  173.             <div class="foot">
  174.                 <div class="foot-left"></div>
  175.                 <div class="foot-right"></div>
  176.             </div>
  177.         </div>
  178.         
  179.     </div>
  180. </div>
  181. </body>
  182. </html>
复制代码
转:http://www.w3cfuns.com/notes/213 ... c02ee73071bf7d.html
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

新航路师徒学院 ( 京ICP备16035622号

GMT+8, 2018-6-23 10:10 , Processed in 0.135778 second(s), 27 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表