课程概述
作业提交截止时间：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 代码结构清晰、规范
- 代码中含有必要的注释
在线学习参考资料
我的代码
<!DOCTYPE html> <!-- saved from url=(0055)http://jadyoap.bj.bcebos.com/ife%2FcssCatAnimation.html --> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>纯 CSS 实现猫笑起来的动画</title> <style type="text/css"> body { background-color: #d69a44; } /* face */ .face { position: absolute; left: 50%; margin-left: -175px; top:40px; width: 350px; height: 250px; border-radius: 50% 50% 30% 30%; border: 2px solid #3f200b; z-index: 10; background: #fbf8f1; overflow: hidden; } /* ear */ .ear-wrap { position: absolute; width: 300px; left: 50%; margin-left: -150px; /* top: 100px; */ } .ear-wrap{ position: absolute; left: 50%; width: 300px; margin-left: -150px; margin-top: 20px; } .ear { position: absolute; width: 80px; height: 100px; border: 2px solid #000; background: #fbf8f1; border-radius: 100% 10% 50% 0% ; transition: all 1s cubic-bezier(0.28, 0.50, 0.60, 0.83); } .ear-wrap .right { left: auto; right: 0; border-radius: 10% 100% 0% 50%; background: #f1ac2b; } /* 头发 */ .hair { position: absolute; width: 120px; height: 120px; left: 50%; margin-left: 50px; margin-top: -40px; background: #f3b32e; border-radius: 50% 50% 50% 50%; } /* 眼睛 */ .eye-wrap { position: absolute; width: 280px; height: 70px; top: 90px; left: 50%; margin-left: -140px; overflow: hidden; } .eye { height: 100px; width: 100px; position: absolute; } .eye-circle { width: 100px; height: 80px; border: 2px solid #482507; overflow: hidden; position: absolute; background: #fff; border-radius: 50% 50% 40% 40%; box-sizing: border-box; } .eye-core { height: 55px; width: 46px; border-radius: 50% 50% 50% 50%; /* margin: 0 auto; */ background: #000; position: absolute; left: 50%; margin-left: -23px; transition: all 1.2s cubic-bezier(0.51, 0.25, 0.41, 0.69); } .eye-bottom { height: 50px; width: 100px; border-radius: 40% 40% 50% 50%; position: absolute; margin-top: 48px; border-top: 2px solid #46240b; background: #f6f7f2; transition: all 1.2s; } .eye-wrap .right { left: auto; right: 0px; } .face-red { position: absolute; height: 20px; width: 70px; background: red; top: 45px; /*top: 64px;*/ left: 18px; border-radius: 50% 50% 50% 50%; background: #e85a5e; opacity: 0.0; transition: all 1.2s cubic-bezier(0.94, 0.26, 0.11, 0.58); } /* 鼻子 */ .nose { width: 20px; height: 10px; border-bottom: 8px solid #000; border-radius: 0% 0% 50% 50%; top: 154px; left: 50%; margin-left: -10px; position: absolute; } /* 嘴巴 */ .mouth-wrap { position: absolute; top: 168px; width: 80px; left: 50%; margin-left: -40px; height: 20px; overflow: hidden; } .mouth { width: 40px; height: 40px; border-bottom: 4px solid #000; border-right: 4px solid #000; border-radius: 0% 40% 50% 20%; margin-top: -26px; position: absolute; left: 0; transition: all 1.2s; } .mouth-wrap .right { border-bottom: 4px solid #000; border-right: none; border-left: 4px solid #000; border-radius: 40% 0% 20% 50%; position: absolute; left: auto; right: 0; } /*鼠标hover样式 写在这里*/ .face:hover~.ear-wrap .left{ transform: rotate(-23deg); transform-origin:50% 100%; } .face:hover~.ear-wrap .right{ transform: rotate(23deg); transform-origin:50% 100%; } .face:hover .eye-core{ transform: scaleX(0.75); } .face:hover .eye-bottom{ transform: translateY(-15px); } .face:hover .face-red{ opacity: 1; } .face:hover .mouth{ border-radius: 0% 40% 50% 50%; } </style> </head><style type="text/css" id="4924523920"></style> <body> <div class="container"> <!-- 脸 --> <div class="face"> <!-- 头发 --> <div class="hair"> <div></div> </div> <!-- 眼睛 --> <div class="eye-wrap"> <div class="eye left"> <div class="eye-circle"> <div class="eye-core"></div> </div> <div class="eye-bottom"></div> <div class="face-red"></div> </div> <div class="eye right"> <div class="eye-circle"> <div class="eye-core"></div> </div> <div class="eye-bottom"></div> <div class="face-red"></div> </div> </div> <!-- 鼻子 --> <div class="nose"> </div> <!-- 嘴巴 --> <div class="mouth-wrap"> <!-- <div class="mouth-top"></div> --> <div class="mouth left"></div> <div class="mouth right"></div> </div> </div> <!-- 耳朵 --> <div class="ear-wrap"> <div class="ear left"> </div> <div class="ear right"> </div> </div> </div> </body></html>
总结一下：
①hover选择兄弟元素
/*鼠标hover样式 写在这里*/ .face:hover{ cursor: pointer; } .face:hover~.ear-wrap .left{ transform :rotate(-30deg); } .face:hover~.ear-wrap .right{ transform :rotate(30deg); } .face:hover .face-red{ opacity: 0.8; }
②利用transform，transition等完成猫笑的效果