No.3 - CSS transition 和 CSS transform 配合制作动画

课程概述

作业提交截止时间：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 代码结构清晰、规范
代码中含有必要的注释

在线学习参考资料

CSS3 新特性兼容方法总结
CSS3贝塞尔曲线工具
CSS3 过渡
CSS3 变形
CSS Transforms Module
CSS3 中的变形 transform详解
CodePen 优秀动画示例

我的代码

<!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等完成猫笑的效果

转载于:https://www.cnblogs.com/cndotabestdota/p/9092849.html

No.3 - CSS transition 和 CSS transform 配合制作动画相关推荐

html与css结合动效案例,CSS3制作动画效果例子
实现网站的图片.文字的动态效果,我们有photoshop制作多帧动画GIF.用flash制作更精巧的动画,还有利用javascript通过识别ID/CLASS 来实现对应DIV块的动画效果.然而,即使 ...
css 缩放_CSS 中 transform、animation、transition、translate的区别
在前端页面的开发过程中,经常会碰到这么几个 CSS 属性容易搞混:transform.translate.animation还有transition.下面就针对这几个 CSS 属性做一个对比,辨别这几 ...
[css] transition、animation、transform三者有什么区别？
[css] transition.animation.transform三者有什么区别? transition:比较简单的过度动画animation: 使用keyframe自定义动画,比较详细的动画过 ...
css3-12 transition+css或transform实现过渡动画
css3-12 transition+css或transform实现过渡动画一.总结一句话总结:首先要设置hover后的效果,然后在transition里面指定执行哪些样式和执行时间为多长. 1. ...
css transition改动透明,使用CSS transition和animation改变渐变状态的实现方法
到目前为止,CSS的渐变属性 linear-gradient 和 radial-gradient 已经是很成熟的CSS特性了,而且 repeating-linear-gradient 和 conic- ...
svg配合css3动画_如何使用CSS制作节日SVG图标动画
svg配合css3动画正是这个季节,因此在本教程中,我将逐步创建一些CSS动画,以假日为主题的SVG图标. Iconmelon上有一些很棒的图标,该网站上有许多免费的矢量图标集,可让您尽其所能 . ...
CSS transition（过渡效果）详解
CSS transition(过渡效果)详解通常当 CSS 的属性值更改后,浏览器会立即更新相应的样式,例如当鼠标悬停在元素上时,通过 :hover 选择器定义的样式会立即应用在元素上.在 CSS3 ...
CSS transition动画卡顿的探究
一.问题今天在使用css3的transition做动画过渡时,发现动画会卡顿,特此记录我发现卡顿的一些原因和笔记. 先给出结论: 在使用css3 transtion做动画效果时,transform实 ...
css上滑事件,css transition 实现滑入滑出
transition是css最简单的动画. 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!! 但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办? ...

No.3 - CSS transition 和 CSS transform 配合制作动画

课程概述

任务目的

任务描述

任务注意事项

在线学习参考资料

No.3 - CSS transition 和 CSS transform 配合制作动画相关推荐

最新文章

热门文章