搜索 登录注册
×

热门关键词：Web前端|前端开发|HTML5|CSS3|jQuery|CSS3动画

一个不错的笑脸动画，学习学习！！

作者：天空2017.01.13来源：Web前端之家浏览：15385评论:0
关键词：css3动画

一个不错的动画笑脸

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>动态笑脸</title>
  6.         <style>
  7.             * {
  8.                 box-sizing: border-box;
  9.             }
  10.             
  11.             .container {
  12.                 width: 400px;
  13.                 min-height: 400px;
  14.                 background-color: yellow;
  15.                 overflow: auto;
  16.                 display: block;
  17.                 margin: 0 auto;
  18.                 border-radius:200px;
  19.             }
  20.             
  21.             .eyebox {
  22.                 width: 400px;
  23.                 display: block;
  24.                 margin: 0 auto;
  25.                 text-align: center;
  26.                 margin-top: 100px;
  27.                 margin-bottom: 60px;
  28.             }
  29.             
  30.             .eye {
  31.                 height: 100px;
  32.                 width: 100px;
  33.                 background-color: white;
  34.                 border: 4px solid white;
  35.                 border-radius: 100%;
  36.                 display: inline-block;
  37.                 margin: 0 20px;
  38.                 position: relative;
  39.                 padding: 20px;
  40.                 overflow: hidden;
  41.             }
  42.             
  43.             .eye .pupil {
  44.                 height: 25px;
  45.                 width: 25px;
  46.                 border-radius: 100%;
  47.                 display: inline-block;
  48.                 background-color: black;
  49.                 position: absolute;
  50.                 margin-left: -10px;
  51.                 left: 50px;
  52.                 margin: 10px;
  53.             }
  54.             
  55.             .smile {
  56.                 height: 100px;
  57.                 width: 200px;
  58.                 border-radius: 0 0 200px 200px;
  59.                 background: #ee3a4c;
  60.                 margin: 0 auto;
  61.                 overflow: hidden;
  62.                 transition: all .4s;
  63.                 transform-origin: center;
  64.             }
  65.             
  66.             .smile:hover {
  67.                 transition: all .4s;
  68.                 height: 33.33333px;
  69.                 width: 33.33333px;
  70.                 border-radius: 100%;
  71.                 margin-top: 120px;
  72.             }
  73.             
  74.             .smile:hover .teeth {
  75.                 margin-left: -25px;
  76.                 margin-top: -40px;
  77.                 transition: all .4s;
  78.             }
  79.             
  80.             .smile:hover .tongue {
  81.                 transition: all .4s;
  82.                 margin-left: -50px;
  83.                 /*margin-top: $tongueDimensions*2;*/
  84.             }
  85.             
  86.             .smile .teeth {
  87.                 background-color: #fff;
  88.                 transition: all .4s;
  89.                 height: 33.33333px;
  90.                 width: 33.33333px;
  91.                 margin-left: 56.66667px;
  92.                 position: relative;
  93.             }
  94.             
  95.             .smile .teeth:after {
  96.                 content: "";
  97.                 background-color: #fff;
  98.                 height: 33.33333px;
  99.                 width: 33.33333px;
  100.                 position: absolute;
  101.                 left: 50px;
  102.                 top: 0;
  103.                 z-index: 10000;
  104.             }
  105.             
  106.             .smile .tongue {
  107.                 transition: all .4s;
  108.                 height: 100px;
  109.                 width: 100px;
  110.                 background-color: pink;
  111.                 border-radius: 100%;
  112.                 margin-top: 40px;
  113.                 margin-left: 15px;
  114.                 display: inline-block;
  115.                 position: relative;
  116.             }
  117.             
  118.             .smile .tongue:after {
  119.                 content: '';
  120.                 height: 100px;
  121.                 width: 100px;
  122.                 background-color: pink;
  123.                 border-radius: 100%;
  124.                 display: inline-block;
  125.                 position: absolute;
  126.                 left: 50px;
  127.             }
  128.         </style>
  129.         <script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  130.         <script>
  131.             $(function() {
  132.                 var limitX = 50,
  133.                     limitY = 50;
  134.                 var containerW = $('.container').width();
  135.                 var containerH = $('.container').height();
  136.                 $(".container").mousemove(function(e) {
  137.                     var mouseY = Math.min(e.clientY / (containerH * .01), limitY);
  138.                     var mouseX = Math.min(e.clientX / (containerW * .01), limitX);
  139.                     $('.pupil').css('top', mouseY);
  140.                     $('.pupil').css('left', mouseX);
  141.                     console.log(e.clientY + '  ' + e.clientX);
  142.                 });
  143.             });
  144.         </script>
  145.     </head>
  146.     <body>
  147.         <div class="container">
  148.             <div class="eyebox">
  149.                 <div class="eye EL">
  150.                     <div class="pupil"></div>
  151.                 </div>
  152.                 <div class="eye ER">
  153.                     <div class="pupil"></div>
  154.                 </div>
  155.             </div>
  156.             <div class="smile">
  157.                 <div class="teeth"></div>
  158.                 <div class="tongue"></div>
  159.             </div>
  160.         </div>
  161.         <div class="readout"></div>
  162.         </div>
  163.     </body>
  164. </html>


赏您的支持是我们创作的动力！
温馨提示：本文作者系 ，经Web前端之家编辑修改或补充，转载请注明出处和本文链接：
https://jiangweishan.com/article/biji016.html

网友评论文明上网理性发言 已有0人参与

发表评论:

相关文章