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 ...
随机推荐
- Google CodeJam 2016 round3-A.Teaching Assistant
题目描述: 原题是纯英文,大意是:你每天可以选择一门课去学习,选题和提交答案.题目为Coding或者Jamming.选的题目如果和老师选的一致,提交答案也匹配,最后可以得10分,若选题不一致只能得5分 ...
- java断言assert初步使用：断言开启、断言使用
1 说明 java断言assert是jdk1.4引入的. jvm断言默认是关闭的. 断言可以局部开启的,如:父类禁止断言,而子类开启断言,所以一般说“断言不具有继承性”. 断言只适用复杂的调式过程. ...
- Andrew Ng机器学习课程笔记（二）之逻辑回归
Andrew Ng机器学习课程笔记(二)之逻辑回归 版权声明:本文为博主原创文章,转载请指明转载地址 http://www.cnblogs.com/fydeblog/p/7364636.html 前言 ...
- java开发细节问题，spring的单例模式，多线程同步问题
1.对象的赋值,new一个对象,然后在传递给函数赋值,往往这对对象赋值就可以使用了 2.对于 spring开发的细节问题 Spring框架里的bean,或者说组件,获取实例的时候都是默认的单例模式,这 ...
- NAT介绍
NAT 即网络地址转换NAT作用:实现内网IP地址和公网IP地址之间的转换可以有效地缓解IP地址危机可以隐藏内网地址实现负载均衡实现内网和内网之间的通信 NAT分类:分类静态NAT:将内网IP地址一对 ...
- shell命令——cut
功能:把行分成域 默认限定符为tab, -d:改变限定符 -f:指定输出力包含的域
- CAlayer一
// // ViewController.m // Layer // // Created by City--Online on 15/4/9. // Copyright (c) 2015年 City ...
- MFC进程的创建销毁、线程的创建与交互
进程的创建 STARTUPINFO si; //**成员DWORD dwFlags;表示结构体当中哪些成员有效.**STARTF_USESHOWWINDOW|STARTF_USEPOSITION PR ...
- 【MongoDB-query查询条件】
在上一篇中简要使用了C# 对MongoDB进行数据操作,这里补充一些MongoDB query查询条件文档: Query.All("name", "a",&qu ...
- 第18课-数据库开发及ado.net 连接数据库.增.删.改向表中插入数据并且返回自动编号.SQLDataReade读取数据
第18课-数据库开发及ado.net 连接数据库.增.删.改向表中插入数据并且返回自动编号.SQLDataReade读取数据 ADO.NET 为什么要学习? 我们要搭建一个平台(Web/Winform ...