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 代码结构清晰、规范
- 代码中含有必要的注释
在线学习参考资料
我的代码
<!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等完成猫笑的效果
No.3 - CSS transition 和 CSS transform 配合制作动画的更多相关文章
- css3-12 transition+css或transform实现过渡动画
css3-12 transition+css或transform实现过渡动画 一.总结 一句话总结:首先要设置hover后的效果,然后在transition里面指定执行哪些样式和执行时间为多长. 1. ...
- Atitti css transition Animation differ区别
Atitti css transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限. 1 1.2. Transition ...
- Atitti css transition Animation differ区别
Atitti css transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限. 1 1.2. js 动态改变 st ...
- css transition 实现滑入滑出
transition是css最简单的动画. 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!! 但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办? ...
- css中zoom和transform:scale的区别
css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下 ...
- Css transition
CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值. <!DOCTY ...
- CSS transition 的默认值
语法 transition: property duration timing-function delay|initial|inherit; 示例: div { width: 100px; ...
- CSS transition & shorthand property order
CSS transition & shorthand property order shorthand property https://developer.mozilla.org/en-US ...
- 奇妙的 CSS shapes(CSS图形) 【css 图形，绘图，CSS 几何图形)】
http://www.cnblogs.com/coco1s/p/6992177.html <!DOCTYPE html> <html> <head> <met ...
随机推荐
- python中单下划线和双下滑线
使用单下划线(_one_underline)开头表示方法不是API的一部分,不要直接访问(虽然语法上访问也没有什么问题). 使用双下划线开头(__two_underlines)开头表示子类不能覆写该方 ...
- Django框架model实现数据库增删查改
1.创建Django工程 https://www.cnblogs.com/CK85/p/10159159.html 2.在model.py中配置生成表格的类对象. from django.db imp ...
- 浅谈ul布局以及table布局
我个人对于某些言论说要注重html语义化在布局中的应用,我反而不怎么感冒,试试兼容IE7&&项目期相对较赶的情况下,我还是推荐快速开发为主,兼容性强为主. 如果布局中需要用户边框,推荐 ...
- POJ P2828 Buy Ticket——线段树的其他信息维护
Description Railway tickets were difficult to buy around the Lunar New Year in China, so we must get ...
- 事件处理程序DOM0，DOM2，IE的区别总结
一.事件流 顺序 备注 事件冒泡 目标对象~document对象 事件捕获 document对象~目标对象 老版本浏览器不支持 DOM事件流 document对象~目标对象~document对 ...
- MongoDB 更改数据库位置
MongoDB在Windows中默认的数据库目录是 C:\data.如果在没有该目录的情况下,执行命令mongod,则会报如下错误: 如果我们不想把mongoDB的数据库放在C盘,可以使用如下两种方法 ...
- 【javascript】javascript设计模式之单例模式
单例模式: 定义:单例模式之所以这么叫,是因为它限制一个类只能有一个实例化对象. 实现方法:判断实例是否存在,如果存在则直接返回,如果不存在就创建了再返回.(确保一个类只有一个实例对象) 特点: 命名 ...
- Java学习笔记(2)----散列集/线性表/队列/集合/图(Set,List,Queue,Collection,Map)
1. Java集合框架中的所有实例类都实现了Cloneable和Seriablizable接口.所以,它们的实例都是可复制和可序列化的. 2. 规则集存储的是不重复的元素.若要在集合中存储重复的元素, ...
- vim常用快捷汇总
移动光标的方法 h 或 向左箭头键(←) 光标向左移动一个字符 j 或 向下箭头键(↓) 光标向下移动一个字符 k 或 向上箭头键(↑) 光标向上移动一个字符 l 或 向右箭头键(→) 光标向右移动一 ...
- python文本操作
file_obj=file("文件路径","模式") 打开文件的模式有: r,以只读方式打开文件 w,打开一个文件只用于写入.如果该文件已存在则将其覆盖.如果该 ...