课程概述

作业提交截止时间：09-01

任务目的

  • 深度理解掌握 transition-timing-function 以及它的意义
  • 学会配合使用 CSS transform 和CSS transition 制作流畅动画
  • 使用 CSS 伪元素触发过渡效果
  • 合理的使用 CSS 布局

任务描述

  • 在我们提供给你的 HTML 文件基础上，适当的添加 CSS transition 和 CSS transform 属性 ，实现视频 demo 中的效果；
  • 鼠标 hover 上去的时候，出现小猫笑起来的动画；
    动画 demo
    下载.html 文件
  • transition 和transform 各项子属性的值可以自定 ；
  • 对 CSS 布局比较感兴趣的同学，在学有余力的情况下，可以尝试自己用 CSS 画出小猫。

任务注意事项

  • 注意浏览器中的兼容性
  • 请注意代码风格的整齐、优雅
  • HTML 及 CSS 代码结构清晰、规范
  • 代码中含有必要的注释

在线学习参考资料

我的代码
  1. <!DOCTYPE html>
  2. <!-- saved from url=(0055)http://jadyoap.bj.bcebos.com/ife%2FcssCatAnimation.html -->
  3. <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4.  
  5.         <title>纯 CSS 实现猫笑起来的动画</title>
  6.         <style type="text/css">
  7.             body {
  8.                 background-color: #d69a44;
  9.             }
  10.             /* face */
  11.             .face {
  12.                 position: absolute;
  13.                 left: 50%;
  14.                 margin-left: -175px;
  15.                 top:40px;
  16.                 width: 350px;
  17.                 height: 250px;
  18.                 border-radius: 50% 50% 30% 30%;
  19.                 border: 2px solid #3f200b;
  20.                 z-index: 10;
  21.                 background: #fbf8f1;
  22.                 overflow: hidden;
  23.             }
  24.             /* ear */
  25.             .ear-wrap {
  26.                 position: absolute;
  27.                 width: 300px;
  28.                 left: 50%;
  29.                 margin-left: -150px;
  30.                 /*   top: 100px; */
  31.             }
  32.             .ear-wrap{
  33.                 position: absolute;
  34.                 left: 50%;
  35.                 width: 300px;
  36.                 margin-left: -150px;
  37.                 margin-top: 20px;
  38.             }
  39.             .ear {
  40.                 position: absolute;
  41.                 width: 80px;
  42.                 height: 100px;
  43.                 border: 2px solid #000;
  44.                 background: #fbf8f1;
  45.                 border-radius: 100% 10% 50% 0% ;
  46.                 transition: all 1s cubic-bezier(0.28, 0.50, 0.60, 0.83);
  47.             }
  48.             .ear-wrap .right {
  49.                 left: auto;
  50.                 right: 0;
  51.                 border-radius: 10% 100% 0% 50%;
  52.                 background: #f1ac2b;
  53.             }
  54.             /* 头发 */
  55.             .hair {
  56.                 position: absolute;
  57.                 width: 120px;
  58.                 height: 120px;
  59.                 left: 50%;
  60.                 margin-left: 50px;
  61.                 margin-top: -40px;
  62.                 background: #f3b32e;
  63.                 border-radius: 50% 50% 50% 50%;
  64.             }
  65.             /* 眼睛 */
  66.             .eye-wrap {
  67.                 position: absolute;
  68.                 width: 280px;
  69.                 height: 70px;
  70.                 top: 90px;
  71.                 left: 50%;
  72.                 margin-left: -140px;
  73.                 overflow: hidden;
  74.             }
  75.             .eye {
  76.                 height: 100px;
  77.                 width: 100px;
  78.                 position: absolute;
  79.             }
  80.             .eye-circle {
  81.                 width: 100px;
  82.                 height: 80px;
  83.                 border: 2px solid #482507;
  84.                 overflow: hidden;
  85.                 position: absolute;
  86.                 background: #fff;
  87.                 border-radius: 50% 50% 40% 40%;
  88.                 box-sizing: border-box;
  89.             }
  90.             .eye-core {
  91.                 height: 55px;
  92.                 width: 46px;
  93.                 border-radius: 50% 50% 50% 50%;
  94.                 /* margin: 0 auto; */
  95.                 background: #000;
  96.                 position: absolute;
  97.                 left: 50%;
  98.                 margin-left: -23px;
  99.                 transition: all 1.2s cubic-bezier(0.51, 0.25, 0.41, 0.69);
  100.             }
  101.             .eye-bottom {
  102.                 height: 50px;
  103.                 width: 100px;
  104.                 border-radius: 40% 40% 50% 50%;
  105.                 position: absolute;
  106.                 margin-top: 48px;
  107.                 border-top: 2px solid #46240b;
  108.                 background: #f6f7f2;
  109.                 transition: all 1.2s;
  110.             }
  111.             .eye-wrap .right {
  112.                 left: auto;
  113.                 right: 0px;
  114.             }
  115.             .face-red {
  116.                 position: absolute;
  117.                 height: 20px;
  118.                 width: 70px;
  119.                 background: red;
  120.                 top: 45px;
  121.                 /*top: 64px;*/
  122.                 left: 18px;
  123.                 border-radius: 50% 50% 50% 50%;
  124.                 background: #e85a5e;
  125.                 opacity: 0.0;
  126.                 transition: all 1.2s cubic-bezier(0.94, 0.26, 0.11, 0.58);
  127.             }
  128.             /* 鼻子 */
  129.             .nose {
  130.                 width: 20px;
  131.                 height: 10px;
  132.                 border-bottom: 8px solid #000;
  133.                 border-radius: 0% 0% 50% 50%;
  134.                 top: 154px;
  135.                 left: 50%;
  136.                 margin-left: -10px;
  137.                 position: absolute;
  138.             }
  139.             /* 嘴巴 */
  140.             .mouth-wrap {
  141.                 position: absolute;
  142.                 top: 168px;
  143.                 width: 80px;
  144.                 left: 50%;
  145.                 margin-left: -40px;
  146.                 height: 20px;
  147.                 overflow: hidden;
  148.             }
  149.             .mouth {
  150.                 width: 40px;
  151.                 height: 40px;
  152.                 border-bottom: 4px solid #000;
  153.                 border-right: 4px solid #000;
  154.                 border-radius: 0% 40% 50% 20%;
  155.                 margin-top: -26px;
  156.                 position: absolute;
  157.                 left: 0;
  158.                 transition: all 1.2s;
  159.             }
  160.             .mouth-wrap .right {
  161.                 border-bottom: 4px solid #000;
  162.                 border-right: none;
  163.                 border-left: 4px solid #000;
  164.                 border-radius: 40% 0% 20% 50%;
  165.                 position: absolute;
  166.                 left: auto;
  167.                 right: 0;
  168.             }
  169.             /*鼠标hover样式 写在这里*/
  170.             .face:hover~.ear-wrap .left{
  171.                 transform: rotate(-23deg);
  172.                 transform-origin:50% 100%;
  173.             }
  174.             .face:hover~.ear-wrap .right{
  175.                 transform: rotate(23deg);
  176.                 transform-origin:50% 100%;
  177.             }
  178.             .face:hover .eye-core{
  179.                 transform: scaleX(0.75);
  180.             }
  181.             .face:hover .eye-bottom{
  182.                 transform: translateY(-15px);
  183.             }
  184.             .face:hover .face-red{
  185.                 opacity: 1;
  186.             }
  187.             .face:hover .mouth{
  188.                 border-radius: 0% 40% 50% 50%;
  189.             }
  190.  
  191.         </style>
  192.     </head><style type="text/css" id="4924523920"></style>
  193.     <body>
  194.         <div class="container">
  195.             <!-- 脸 -->
  196.             <div class="face">
  197.                 <!-- 头发 -->
  198.                 <div class="hair">
  199.                     <div></div>
  200.                 </div>
  201.                 <!-- 眼睛 -->
  202.                 <div class="eye-wrap">
  203.                     <div class="eye left">
  204.                         <div class="eye-circle">
  205.                             <div class="eye-core"></div>
  206.                         </div>
  207.                         <div class="eye-bottom"></div>
  208.                         <div class="face-red"></div>
  209.                     </div>
  210.                     <div class="eye right">
  211.                         <div class="eye-circle">
  212.                             <div class="eye-core"></div>
  213.                         </div>
  214.                         <div class="eye-bottom"></div>
  215.                         <div class="face-red"></div>
  216.                     </div>
  217.                 </div>
  218.                 <!-- 鼻子 -->
  219.                 <div class="nose">
  220.                 </div>
  221.                 <!-- 嘴巴 -->
  222.                 <div class="mouth-wrap">
  223.                     <!-- <div class="mouth-top"></div> -->
  224.                     <div class="mouth left"></div>
  225.                     <div class="mouth right"></div>
  226.                 </div>
  227.             </div>
  228.             <!-- 耳朵 -->
  229.             <div class="ear-wrap">
  230.                 <div class="ear left"> </div>
  231.                 <div class="ear right"> </div>
  232.             </div>
  233.         </div>
  234.  
  235. </body></html>

总结一下：

①hover选择兄弟元素

  1.             /*鼠标hover样式 写在这里*/
  2.             .face:hover{
  3.                 cursor: pointer;
  4.             }
  5.             .face:hover~.ear-wrap .left{
  6.                 transform :rotate(-30deg);
  7.             }
  8.             .face:hover~.ear-wrap .right{
  9.                 transform :rotate(30deg);
  10.             }
  11.             .face:hover .face-red{
  12.                 opacity: 0.8;
  13.             }

②利用transform，transition等完成猫笑的效果

No.3 - CSS transition 和 CSS transform 配合制作动画的更多相关文章

  1. css3-12 transition+css或transform实现过渡动画

    css3-12 transition+css或transform实现过渡动画 一.总结 一句话总结:首先要设置hover后的效果,然后在transition里面指定执行哪些样式和执行时间为多长. 1. ...

  2. Atitti css transition Animation differ区别

    Atitti  css   transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限.  1 1.2. Transition ...

  3. Atitti  css   transition Animation differ区别

    Atitti  css   transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限.  1 1.2. js 动态改变 st ...

  4. css transition 实现滑入滑出

    transition是css最简单的动画. 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!! 但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办?  ...

  5. css中zoom和transform:scale的区别

    css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...

  6. Css transition

    CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值. <!DOCTY ...

  7. CSS transition 的默认值

    语法 transition: property duration timing-function delay|initial|inherit; 示例: div {   width: 100px;    ...

  8. CSS transition & shorthand property order

    CSS transition & shorthand property order shorthand property https://developer.mozilla.org/en-US ...

  9. 奇妙的 CSS shapes(CSS图形) 【css 图形，绘图，CSS 几何图形)】

    http://www.cnblogs.com/coco1s/p/6992177.html <!DOCTYPE html> <html> <head> <met ...

随机推荐

  1. 多线程-定时器Timer

    2019-04-1218:03:32 package 多线程.定时器Timer_重要; import java.util.Timer; import java.util.TimerTask; publ ...

  2. ssh 连接慢问题

    连接先看报错: There were 11 failed login attempts since the last successful login. 先前有上百上千失败login,被攻击了,把短时 ...

  3. mybatis 排坑记录

    1. mapper xml resultMap 中定义 property 时不能出现空格 否则会出现反射错误,找不到 do 对应的 set 方法

  4. Delegate背后的秘密

    表面上看来使用delegate是一件很简单的事. 用delegate关键字定义,使用老套的new创建一个instance ,使用熟悉的方法调用写法调用,只不过不在是方法名,而是委托名. 但是在这背后C ...

  5. Java 并发：线程中断-interrupt

    一直以为执行了interrupt方法就可以让线程结束,并抛出InterruptedException. 今天看了Java并发编程实战的第七章发现并不是这么回事,在这章的开头就提到 要使任务和线程能安全 ...

  6. python用random产生验证码，以及random的一些其他用法

    产生随机验证码函数 import random def get_code(): code = '' for i in range(5): num = str(random.randrange(10)) ...

  7. 【python爬虫】 之 爬取百度首页

    刚开始学习爬虫,照着教程手打了一遍,还是蛮有成就感的.使用版本:python2.7 注意:python2的默认编码是ASCII编码而python3默认编码是utf-8 import urllib2 u ...

  8. 【element+vue后台页面】Vue-element-admin

    https://segmentfault.com/a/1190000009275424

  9. JS字面量创建方式的优缺点

    http://www.cnblogs.com/wuyaxing/p/6416441.html

  10. 没有对比就没有伤害,memcache and redis

    Memcached 与 Redis 的关键性能指标比较 性能对比: Redis 只使用单核,而 Memcached 可以使用多核,所以平均每一个核上 Redis在存储小数据时比 Memcached 性 ...