CSS 小结笔记之变形、过渡与动画
1、过渡 transition
过渡属性用法： transition :ransition-property transition-duration transition-timing-function transition-delay
可以一起指定也可以分别单独指定
- transition-property: 是要过渡的属性（如width，height），all是所有都改变。
- transition-duration：花费的时间，单位为s或ms
- transition-timing-function：是指定动画类型（运动区曲线），运动曲线有以下几种
- transition-delay 延迟时间，单位为s或ms
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style> div {
width: 100px;
height: 200px;
background-color: aqua;
transition: width 2s ease-in-out 0.5s;
} div:hover {
width: 500px;
}
</style>
</head> <body>
<div></div>
</body> </html>
结果如下，当鼠标上上去后变化不再是瞬间完成，而是过渡完成。
2、变形 transform
(1)、2D变形
（a）移动 translate(x,y)
移动可以指定像素值也可以指定百分比，注意：指定百分比是自身大小的百分比，因此可以用于设置盒子定位时的居中对齐（在设置left：50%后再移动自身的-50%即可）。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: aqua;
transition: all 2s;
} div:active {
transform: translate(200px, 200px);
}
</style>
</head> <body>
<div></div>
</body> </html>
点击之后盒子进行了移动。用于让定位的盒子居中的代码入下
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fa {
width: 300px;
height: 300px;
background-color: aqua;
transition: all 0.5s;
position: relative;
} .son {
background-color: red;
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
} </style>
</head> <body>
<div class="fa">
<div class="son"></div>
</div> </body> </html>
结果为
（b）缩放 scale（x，y）
x,y设置大于1 是放大，小于1 是缩小。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: aqua;
margin: 200px auto;
transition: all 2s;
} div:hover {
transform: scale(0.5, 2);
}
</style>
</head> <body>
<div> </div>
</body> </html>
（c）旋转 rotate(x deg)
x指定度数值，正数是顺时针旋转，负数是逆时针旋转。
旋转可以使用transform-origin 指定旋转中心点，transform-origin 给left top right bottom 也可以指定具体的像素值。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
background-color: aqua;
margin: 200px auto;
transition: all 2s;
transform-origin: bottom left;
} div:hover {
transform: rotate(120deg);
}
</style>
</head> <body>
<div></div>
</body> </html>
（d）倾斜 skew（x deg ,y deg）
x,y分别指定倾斜在x，y方向上的角度，可以为负数。y值不写默认为0。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: aqua;
border: 1px solid red;
transition: all 1s;
margin: 200px auto;
} div:hover {
transform: skew(30deg, 20deg);
}
</style>
</head> <body>
<div></div>
</body> </html>
（2）3D变形
（a）旋转（rotateX,rotateY,rotateZ）
3D旋转与2D类似，只不过一个是基于二位坐标一个是基于三维坐标。三个值可以同时指定也可以单独指定。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 100px;
background-color: aqua;
margin: 200px auto;
transition: all 2s;
transform-origin: bottom left;
} div:hover {
transform: rotateX(120deg);
/* transform: rotateY(120deg); */
/* transform: rotateZ(120deg); */
}
</style>
</head> <body>
<div></div>
</body> </html>
（b）移动（translateX，translateY，translateZ）
3D移动对于xy方向上的移动与2d移动一致。只有z方向上的移动不一样。Z方向上的移动在现实生活中是距离变远，距离变近。因此在网页中显示结果是变近则变大，变远则变小。
要使Z方向上移动生效首先要设置perspective（眼睛距离屏幕的距离）;
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
perspective: 1000px;
/* 数值越小说明眼睛离的越近 */
} div {
width: 200px;
height: 200px;
background-color: aqua;
transition: all 0.5s;
margin: 200px auto;
} div:hover {
transform: translate3d(0, 0, 200px);
}
</style>
</head> <body>
<div> </div>
</body> </html>
3、动画 animation
@keyframes 动画名称 {
from{ 开始} 0%
to{ 结束 } 100%
}
可以用 from...to 来指定动画过程，也可以用0%~100%指定动画过程。
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: aqua;
/* animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向 */
animation: move 5s linear 3;
} @keyframes move {
0% {
transform: translate3d(0, 0, 0);
}
25% {
transform: translate3d(400px, 0, 0);
}
50% {
transform: translate3d(400px, 300px, 0);
}
75% {
transform: translate3d(0, 300px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
</style>
</head> <body>
<div></div>
</body> </html>
CSS 小结笔记之变形、过渡与动画的更多相关文章
- CSS 小结笔记之解决flex布局边框对不齐
在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况.本篇文章来探讨并解决这个问题. 具体出现的问题如下图所示 具体代码如下 <!DOCTYPE htm ...
- CSS 小结笔记之浮动
在css中float是一个非常好用的属性,float最基本用法是用来做文字环绕型的样式的. 基本用法:float:left | right 例如 <!DOCTYPE html> <h ...
- CSS自学笔记（14）:CSS3动画效果
在CSS3中也新增了一些能够对元素创建动画处理的属性.通过这些新增的属性,我们可以实现元素从一种样式变换成另一种样式时为元素添加动态效果,我们就可以取代网页中的动态图片.flash动画和JavaScr ...
- CSS 小结笔记之图标字体（IconFont）
本篇主要介绍一种非常好用的图标大法——图标字体(IconFont). 什么是图标字体?顾名思义,它是一种字体,只不过这个字体显示的并不是具体的文字之类的,而是各种图标. 网站上经常会用到各种图标,之前 ...
- CSS 小结笔记之em
1.为什么使用em em也是css中的一种单位,和px类似.很多人会疑惑为什么有了px之后还要使用em,而且em使用起来相对于px来讲比较麻烦. em主要是应用于弹性布局,下面给出一个小栗子说明em的 ...
- CSS 小结笔记之伸缩布局 (flex)
CSS flex 是一种伸缩布局,之前块级元素布局在同一行,可以通过display或position或float来实现,而本篇介绍一个新的方法——flex(弹性布局). flex 为和模型布局提供了极 ...
- CSS 小结笔记之定位
定位也是Css中一个非常强大的属性.定位主要是用来移动盒子,将其移动到我们想要的位置. 定位分为两部分 1.边偏移 left | right |top |bottom:偏移大小:(边偏移一般制定上就不 ...
- CSS 小结笔记之清除浮动
浮动是一个非常好用的属性,但是有时会出现一些问题,需要进行清除浮动.例如 <!DOCTYPE html> <html lang="en"> <head ...
- CSS 小结笔记之选择器
Css选择器主要分为以下几类 类选择器 ID选择器 通配符选择器 标签选择器 伪类选择器 复合选择器 1.类选择器:通过.classname 来选择 例如 .color2 { color: rebec ...
随机推荐
- Python：SQLMap的工作流程
流程图 代码解析 后面补充…… 版权 作 者:曾是土木人 新浪微博:http://weibo.com/cstmr 转载请注明出处:http://www.cnblogs.com/hongfei/p/ ...
- StreamSets学习系列之StreamSets是什么？
不多说,直接上干货! StreamSets是一个侧重数据集成.数据加工流程构建的平台,也是一个开源的产品.通过StreamSets,用户可以方便的接入不同的数据源,并且完成数据加工流程的构建.Stea ...
- 全网最详细的Windows系统里PLSQL Developer 32bit的下载与安装过程（图文详解）
不多说,直接上干货! 注意的是: 本地若没有安装Oracle服务端,Oracle server服务端32位,是远程连接,因此本地配置PLSQL Developer32位. PLSQL Develope ...
- JavaScript -- History
-----042-History.html----- <!DOCTYPE html> <html> <head> <meta http-equiv=" ...
- 22-hadoop-hive搭建
1, hive简介 hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供简单的sql查询功能,可以将sql语句转换为MapReduce任务进行运行. 其优点是 ...
- jdk8-lambda-stream的使用
1, 认识stream(声明式编程) Stream 不是集合元素,它不是数据结构并不保存数据,它是有关算法和计算的,它更像一个高级版本的 Iterator, 原始版本的Iterator,用户只能一个一 ...
- 非Spring环境下使用Mybatis操作数据库的流程
准备工作 1, 导入mybatis-3.2.7.jar,mysql-connector-5.1.25-bin.jar两个jar包 2, 在数据库中创建一个db_test数据库,库中有一个表为use ...
- redis学习（五） redis过期时间
redis过期时间 1.redis过期时间介绍 有时候我们并不希望redis的key一直存在.例如缓存,验证码等数据,我们希望它们能在一定时间内自动的被销毁.redis提供了一些命令,能够让我们对ke ...
- Stack源码解析
我们从一个DEMO作为入口,了解Java的Stack的源码,代码如: Stack<String> stack = new Stack<>(); stack.push(" ...
- java基础-基础语法
一.标识符 java中对各种变量.方法和类等要素命名的时候使用的字符序列称为标识符. java中标识符的命名规则:1.由字母.数字.下划线(_)以及美元符号($)组成 2.标识符应该以字母或者下划线开 ...