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 ...
随机推荐
- Android内存管理篇 - 从updateOomAdjLocked看lowmemorykiller之外的Android进程回收机制
提起android的进程回收机制,大家所熟知的是Android的lowmemroykiller的机制.当系统可用内存低于某个阀值时,即会杀死这个阀值对应的Adj值的所有应用.但是本篇文章并为是要介绍L ...
- 全网最全的Windows下Python2 / Python3里正确下载安装用来向微信好友发送消息的itchat库（图文详解）
不多说,直接上干货! 建议,你用Anaconda2或Anaconda3. 见 全网最全的Windows下Anaconda2 / Anaconda3里正确下载安装用来向微信好友发送消息的itchat库( ...
- Hadoop2源码分析－准备篇
1.概述 我们已经能够搭建一个高可用的Hadoop平台了,也熟悉并掌握了一个项目在Hadoop平台下的开发流程,基于Hadoop的一些套件我们也能够使用,并且能利用这些套件进行一些任务的开发.在Had ...
- sql-DDL, DML 常用语句
mysql的安装可见: http://www.cnblogs.com/wenbronk/p/6840484.html 很久不用mysql, 今天建表都不会了, , , 慢慢补充 sql语言分为3种: ...
- BIO与NIO、AIO的区别(这个容易理解)
转自:http://blog.csdn.net/skiof007/article/details/52873421 BIO与NIO.AIO的区别(这个容易理解) IO的方式通常分为几种,同步阻塞的BI ...
- 压测：celey backend为rabbitmq pk redis
使用celery的backend异步获取结果,本文使用rabbitmq 和 redis分别作为backend,代码对比如下 from celery import Celery, platforms i ...
- Spring Import注解
今天了解了,Spring @Import的使用 先贴上Spring官方关于Spring @Import注解的文档链接 https://docs.spring.io/spring/docs/3.0. ...
- ConcurrentHashmap源码好好给你说明白
这个ConcurrentHashmap的设计非常精妙,如果有疑问的地方,欢迎大家在评论区进行激烈讨论! 一.静态工具方法 private static final int tableSizeFor(i ...
- webpack+react多页面开发(二)-终极架构
webpack4+react16多页面架构 webpack在单页面打包上应用广泛,以create-react-app为首的脚手架众多,单页面打包通常指的是将业务js,css打包到同一个html文件中, ...
- MySql错误处理-错误处理的例子
有几种错误处理的声明形式: § 如果任何错误(不是 NOT FOUND ) , 设置 l_error 为 1 后继续执行: DECLARE CONTINUE HANDLER FOR SQLEXCEPT ...