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 ...
随机推荐
- ASP.NET 数据绑定到列表控件
<div> <asp:ListBox ID="ListBox1" runat="server"></asp:ListBox> ...
- Java并发编程-synchronized指南
在多线程程序中,同步修饰符用来控制对临界区代码的访问.其中一种方式是用synchronized关键字来保证代码的线程安全性.在Java中,synchronized修饰的代码块或方法不会被多个线程并发访 ...
- Maven Jetty9
<plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactI ...
- vue-cli less使用
1.安装less依赖,npm install less less-loader --save 2.修改webpack.base.conf.js文件,配置loader加载依赖,让其支持外部的less,在 ...
- ActiveMQ与Spring整合-MessageListener
消费者,使用监听的实现方式. 1. pom.xml 2. 生产者 package org.ygy.mq.lesson04; import javax.jms.JMSException; import ...
- jQuery 各类判断函数汇总
欢迎访问我的github:huanshen,有我的源码解析 常用的判断函数有type,isEmptyObject,isFunction,isWindow,isPlainObject,isArrayli ...
- python模块之xlwt
一. 安装 pip install xlwt 二. 使用 1. 创建excel(工作簿)对象 import xlwt wb = xlwt.Workbook() # 生成Workbook对象(xlwt. ...
- 控制器中获取Field值
在ASP.NET MVC程序中,我们需要POST Data到制器中,是有很多方法.但是我们想在控制器中,获取Feild值呢?怎样获取?你可以留意到有一个类FormCollection.它能帮助到我们解 ...
- WCF 学习总结1 -- 简单实例
从VS2005推出WCF以来,WCF逐步取代了Remoting, WebService成为.NET上分布式程序的主要技术.WCF统一的模型整合了以往的 WebService.Remoting.MSMQ ...
- 乱糟unity整理
当Canvas上的UI元素变化时,会重新生成网格并向GPU发起绘图调用,从而显示UI.划分画布:1.每块画布上的元素都与其他画布的元素相隔离,使用?工具来切分画布?,从而解决ui的批处理问题.2.也可 ...