一、transform
CSS transform属性允许对某一个元素进行某些形变, 包括旋转,缩放,倾斜或平移等。
transform
是形变的意思,transformer就是变形金刚;
注意事项: 并非所有的盒子都可以进行transform的转换(通常行内级元素不能进行形变)
所以,transform对于行内级非替换元素是无效的;
- 比如对span、a元素等;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: inline-block;
border: 5px solid #f00;
}
.container .box {
width: 200px;
height: 200px;
background-color: orange;
transform: translate(100px, 100px);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
1.transform用法
transform
属性的语法如下:
常见的函数transform function有:
- 平移:
translate(x, y)
- 缩放:
scale(x, y)
- 旋转:
rotate(deg)
- 倾斜:
skew(deg, deg)
通过上面的几个函数,我们可以改变某个元素的形变
2.位移 - translate
◼ 平移:translate(x, y)
- 这个CSS 函数用于移动元素在平面上的位置。
translate
本身可以表示翻译的意思,在物理上也可以表示平移;
◼ 值个数
- 一个值时,设置x轴上的位移
- 二个值时,设置x轴和y轴上的位移
◼ 值类型:
- 数字:100px
- 百分比:参照元素本身( refer to the size of bounding box )
补充:
translate
是translateX
和translateY
函数的简写。- translate3d 后续了解
translate
的百分比可以完成一个元素的水平和垂直居中:
translate
函数相对于flex布局的兼容性会好一点点- 不过目前flex布局已经非常普及,直接使用flex布局即可;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
display: inline-block;
border: 5px solid #f00;
}
.container .box {
width: 200px;
height: 100px;
background-color: orange;
/* 百分比: 你的百分比是相对于谁? */
/* 不同地方的百分比相对参照物是不一样 */
/* traslate的百分比是相对于自身的 */
/* 如果设置的x位移: 那么参考的是自身的宽度 */
/* 如果设置的y位移: 那么参考的是自身的高度 */
transform: translate(100%, 100%);
/* transform: translate(x, y); */
/* transform: translateX();
transform: translateY(); */
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
3.缩放 - scale
◼ 缩放:scale(x, y)
scale()
CSS 函数可改变元素的大小。
◼ 值个数
- 一个值时,设置x轴上的缩放
- 二个值时,设置x轴和y轴上的缩放
◼ 值类型:
- 数字:
- 1:保持不变
- 2:放大一倍
- 0.5:缩小一半
- 百分比:百分比不常用
◼ scale函数时scaleX和scaleY的缩写:
scale3d
后续再了解;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
text-align: center;
padding-top: 200px;
}
.container {
display: inline-block;
border: 20px solid #f00;
}
.box {
border: 20px solid #0f0;
width: 200px;
height: 200px;
background-color: orange;
/* 形变 */
transform: scale(60%, 60%);
}
.box1 {
border: 20px solid #0f0;
width: 200px;
height: 200px;
background-color: purple;
/* 形变 */
/* 0~1 对元素进行缩小 */
/* 大于1 对元素进行放大 */
/* transform: scale(1.2, 1.2); */
}
.box1:hover {
transform: scale(1.1, 1.1);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
<div class="container">
<div class="box1"></div>
</div>
</body>
</html>
4.旋转 - rotate
◼ 旋转:rotate()
◼ 值个数
- 一个值时,表示旋转的角度
◼ 值类型:
- 常用单位deg:旋转的角度( degrees )
- 正数为顺时针
- 负数为逆时针
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
text-align: center;
padding-top: 200px;
}
.container {
display: inline-block;
border: 10px solid #f00;
}
.box {
width: 200px;
height: 100px;
background-color: orange;
}
.box:hover {
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
5.transform-origin
◼ transform-origin:形变的原点
- 比如在进行scale缩放或者rotate旋转时,都会有一个原点。
◼ 一个值:
- 设置x轴的原点
◼ 两个值:
- 设置x轴和y轴的原点
◼ 必须是<length>
,<percentage>
,或 left, center, right, top, bottom关键字中的一个
- left, center, right, top, bottom关键字
- length:从左上角开始计算
- 百分比:参考元素本身大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
text-align: center;
padding-top: 200px;
}
.container {
display: inline-block;
border: 10px solid #f00;
}
.box {
width: 200px;
height: 100px;
background-color: orange;
/* 修改当前元素的形变的原点位置 */
/* transform-origin: center top; */
/* transform-origin: 20px 20px; */
transform-origin: 10% 10%;
}
.box:hover {
transform: rotate(45deg) scale(0.5);
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
6.倾斜 - skew
◼ 倾斜:skew(x, y)
- 函数定义了一个元素在二维平面上的倾斜转换。
◼ 值个数
- 一个值时,表示x轴上的倾斜
- 二个值时,表示x轴和y轴上的倾斜
◼ 值类型:
- deg:倾斜的角度
- 正数为顺时针
- 负数为逆时针
◼ 注意:倾斜的原点受transform-origin
的影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
font-style: italic;
width: 200px;
height: 100px;
background-color: orange;
}
.box:hover {
transform: skew(10deg, 10deg);
}
</style>
</head>
<body>
<div class="box">我是div元素</div>
</body>
</html>
7.transform设置多个值
◼ 前面我们看到了 transform 的语法,它是可以设置多个transform-function的:
- 那么就意味着,我们可以给transform设置多个形变的函数;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: orange;
}
.box:hover {
/* transform: translateX(50px);
transform: scale(1.2);
transform: rotate(45deg); */
/*
<transform-function>+
+: 一个或者多个, 并且多个之间以空格分隔
transform: scale() translate();
<box-shadow>#
#: 一个或者多个, 多个之间以, 分隔
box-shadow: 1px 1px 1px 1px #f00,
*/
transform: translate(50px) scale(1.2) rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
二、垂直居中总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
/* position: relative; */
/* display: flex;
align-items: center; */
height: 300px;
background-color: orange;
}
.box1 {
position: absolute;
width: 100px;
/* height: 100px; */
top: 0;
bottom: 0;
margin: auto 0;
background-color: #f00;
}
.box2 {
background-color: #f00;
}
.box3 {
display: inline-block;
height: 100px;
background-color: #f00;
/* 两件事情:
1.让元素向下位移父元素的50%
2.让元素向上位移自身的50%
*/
/* margin-top的百分比是相对于包含块(父元素)的宽度 */
/* margin-top: 50%; */
position: relative;
top: 50%;
transform: translate(0, -50%);
}
</style>
</head>
<body>
<!--
水平居中:
1.行内级元素:
* 设置父元素的text-align: center
2.块级元素:
* 设置当前块级元素(宽度) margin: 0 auto;
3.绝对定位
* 元素有宽度情况下, left0/right0/margin: 0 auto;
4.flex
* justify-content: center
-->
<!--
垂直居中:
1.绝对定位
* 元素有高度情况下, top0/bottom0/margin: auto 0;
-->
<!--
1.垂直居中: 绝对定位
弊端:
1> 必须使用定位(脱离标准流)
2> 必须给元素设置高度
-->
<!-- <div class="container">
<div class="box1">coderwhy</div>
</div> -->
<!--
2.垂直居中: flex布局(直接使用flex)
弊端:
1> 当前flex局部中所有的元素都会被垂直居中
2> 相对来说, 兼容性差一点点(基本可以忽略)
-->
<!-- <div class="container">
<div class="box2">flex布局的居中</div>
aaaa
</div> -->
<!--
3.垂直居中: top/translate(个人推荐, 不好理解)
-->
<div class="container">
<div class="box3">coder</div>
aaaaa
</div>
</body>
</html>
三、transition动画
1.认识transition动画
◼ 什么是transition动画呢?
- CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。
- 可以让CSS属性变化成为一个持续一段时间的过程,而不是立即生效的;
- 比如将一个元素从一个位置移动到另外一个位置,默认在修改完CSS属性后会立即生效;
- 但是我们可以通过CSS transition,让这个过程加上一定的动画效果,包括一定的曲线速率变化;
◼ 通常将两个状态之间的过渡称为隐式过渡(implicit transitions),因为开始与结束之间的状态由浏览器决定。
◼ CSS transitions 可以决定
- 哪些属性发生动画效果 (明确地列出这些属性)
- 何时开始 (设置 delay)
- 持续多久 (设置 duration)
- 如何动画 (定义timing function,比如匀速地或先快后慢)。
2.哪些CSS属性可以做动画呢?
◼ 并非所有的CSS属性都可以执行动画的,那么我们如何知道哪些属性支持动画呢?
◼ 方法一:在MDN可执行动画的CSS属性中查询
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties
◼ 方法二:阅读CSS属性的文档说明
3.过渡动画 - transition
◼ transition CSS 属性是 transition-property,transition-duration,transition-timing-function 和 transition-delay 的一个简 写属性。
◼ transition-property
:指定应用过渡属性的名称
- all:所有属性都执行动画;
- none:所有属性都不执行动画;
- CSS属性名称:要执行动画的CSS属性名称,比如width、left、transform等;
◼ transition-duration
:指定过渡动画所需的时间
- 单位可以是秒(s)或毫秒(ms)
◼ transition-timing-function
:指定动画的变化曲线
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function
◼ transition-delay
:指定过渡动画执行之前的等待时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
background-color: #f00;
}
.box {
position: relative;
left: 0;
width: 200px;
height: 100px;
background-color: orange;
/* 告知浏览器 box 在进行一些CSS属性变化的时候有一个过渡效果 */
/* transition-property: transform, left; */
/* transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-in;
transition-delay: 1s; */
/* 简写属性 */
transition: all 1s ease-in 1s;
}
.container:hover .box {
left: 100px;
transform: translate(100px);
width: 500px;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
四、Animation 动画
1.认识Animation
◼ 之前我们学习了transition来进行过渡动画,但是过渡动画有如下的缺点:
- transition 只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态;
- transition 不能重复执行,除非一再触发动画;
- transition 需要在特定状态下会触发才能执行,比如某个属性被修改了;
◼ 如果我们希望可以有更多状态的变化,我们可以使用 CSS Animation。
◼ CSS Animation的使用分成两个步骤:
-
步骤一:使用 keyframes 定义动画序列(每一帧动画如何执行)
-
步骤二:配置动画执行的名称、持续时间、动画曲线、延迟、执行次数、方向等等
◼ 接下来我们一个个步骤来学习。
2.@keyframes规则
◼ 可以使用@keyframes
来定义多个变化状态,并且使用animation-name来声明匹配:
- 关键帧使用
percentage
来指定动画发生的时间点; - 0%表示动画的第一时刻,100%表示动画的最终时刻;
- 因为这两个时间点十分重要,所以还有特殊的别名:from和to;
◼ 也就是说可以使用from和to关键字:
- from相当于0%
- to相当于100%
3.animation属性
◼ CSS animation 属性是 animation-name,animation-duration, animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。
◼ animation-name:指定执行哪一个关键帧动画
◼ animation-duration:指定动画的持续时间
◼ animation-timing-function:指定动画的变化曲线
◼ animation-delay:指定延迟执行的时间
◼ animation-iteration-count:指定动画执行的次数,执行infinite表示无限动画
◼ animation-direction:指定方向,常用值normal和reverse
◼ animation-fill-mode:执行动画最后保留哪一个值
- none:回到没有执行动画的位置
- forwards:动画最后一帧的位置
- backwards:动画第一帧的位置
◼ animation-play-state:指定动画运行或者暂停(在JavaScript中使用,用于暂停动画)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: orange;
/* box要执行moveAnim的动画 */
animation-name: moveAnim;
animation-duration: 3s;
animation-timing-function: ease-in-out;
/* 其他属性: */
/* 动画执行的次数 */
/* animation-delay: 2s; */
/* animation-iteration-count: 2; */
/* animation-direction: reverse; */
/* 元素停留在动画的哪一个位置 */
/* animation-fill-mode: forwards; */
/* js动态修改 */
/* animation-play-state: paused; */
animation: moveAnim 3s linear 1s 2 normal forwards, ;
}
@keyframes moveAnim {
0% {
transform: translate(0, 0) scale(0.5, 0.5);
}
33% {
transform: translate(0, 200px) scale(1.2, 1.2);
}
66% {
transform: translate(400px, 200px) scale(1, 1);
}
100% {
transform: translate(400px, 0) scale(0.5, 0.5);
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>