# 1.过渡 transition
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点,必须规定两项内容
- 指定要添加效果的CSS属性
- 指定效果的持续时间。
# 1.1 语法
transition: CSS属性 花费时间 运动曲线 延迟时间
CSS属性 : 想要变化的 css 属性, 宽度高度、背景颜色、内外边距等都可以 。如果想要所有的属性都变化过渡, 写一个all 就可以
花费时间: 单位是 秒(必须写单位) 比如 0.5s
运动曲线: 默认是 ease (可以省略)
何时开始:单位是 秒(必须写单位)可以设置延迟触发时间 默认是 0s (可以省略)
后面两个属性可以省略
记住过渡的使用口诀: 谁做过渡给谁加
/*宽度从原始值到制定值的一个过渡,运动曲线ease,运动时间0.5秒,0.2秒后执行过渡*/
transition:width,.5s,ease,.2s
2
/*所有属性从原始值到制定值的一个过渡,运动曲线ease,运动时间0.5秒*/
transition:all,.5s
2
上面是简写模式,也可以分开写各个属性:
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
2
3
4
# 1.2 案例-进度条
<style>
.bar {
width: 150px;
height: 15px;
border: 1px solid red;
border-radius: 7px;
padding: 1px;
}
.bar_in {
width: 50%;
height: 100%;
background-color: red;
/* 谁做过渡给谁加 */
transition: all .7s;
}
.bar:hover .bar_in {
width: 100%;
}
</style>
<body>
<div class="bar">
<div class="bar_in"></div>
</div>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# 2. 2D转换
2D主要有以下四种函数
rotate
定义旋转的函数scale
定义缩放的函数skew
定义翻转的函数translate
定义位移的函数
2D转换是改变标签在二维平面上的位置和形状的一种技术:
# 2.1 2D移动translate
移动盒子位置的方法:
- 定位
- 盒子外边距
- 移动
2D移动可以改变元素在页面中的位置,类似定位。
transform: translate(x, y); /*逗号!!!*/
transfrom: translateX(x) translateY(y); /*空格分开!!!*/
/* 或者分开写 */
transform: translateX(x);
transform: translateY(y);
2
3
4
5
6
- 定义2D转换中的移动,沿着X和Y轴移动元素
- translate最大的优点:不会影响到其他元素的位置
- translate中的百分比单位是相对于自身元素的
translate:(50%, 50%)
; - 对行内元素没有效果
让一个盒子水平居中:
<style>
.father{
width: 600px;
height: 600px;
position: relative;
background-color: pink;
}
.son{
position: absolute;
top: 50%;
left: 50%;
/* 盒子往上走自己高度的一般,往左走自己高度的一半 */
transform: translate(-50%,-50%);
/* 不需要自己计算盒子宽高的一半
margin-top: -100px;
margin-left: -100px;
*/
width: 200px;
height: 200px;
background-color: green;
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# 2.2 旋转rotate
2D旋转指:让元素在2维平面内顺时针或者逆时针旋转。
- rotate里面跟度数,单位是deg比如rotate(45deg)。
- 角度为正时,顺时针;角度为负时,逆时针
- 默认旋转的中心是元素的中心点
div{
transform: rotate(30deg);
}
2
3
<style>
img {
width: 150px;
border-radius: 50%;
border: 5px solid pink;
/* 过渡写在本身,谁做动画给谁加 */
transition: all 0.3s;
}
img:hover {
transform: rotate(360deg);
}
</style>
<body>
<img src="media/pic.jpg" alt="">
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 2.3 转换中心点transform-origin
我们可以设置元素转换的中心点
transform-origin: x y;
- 注意后面的参数x和y用空格隔开
- x y默认的中心点是元素的中心点(50% 50%)
- 还可以给x y设置像素或者方位名词(top bottom left right center)
<style>
div {
width: 200px;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
}
div::before {
content: "Baucd";
display: block;
width: 200px;
height: 200px;
background-color: rgb(236, 144, 238);
/* 旋转 */
transform: rotate(180deg);
/* 设置中心点 */
transform-origin: left bottom;
transition: all 0.2s;
}
/* 鼠标经过div 里面的before复原 */
div:hover::before {
transform: rotate(0deg);
}
</style>
<body>
<div></div>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# 2.4 缩放scale
可以放大和缩小元素。
transform: scale(x, y);
- 注意其中的x和y用逗号分隔,里面的数字不跟单位就是倍数
- transform: scale(1, 1):宽和高都放大一倍,相当于没有放大
- transform: scale(2, 2):宽和高都放大了2倍
- transform: scale(2):只写一个参数,第二个参数则和第一个参数一样
- transform: scale(0.5, 0.5):缩小
- scale缩放最大的优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子
<style>
div {
overflow: hidden;
float: left;
margin: 10px;
}
div img {
transition: all .4s;
}
div img:hover {
transform: scale(1.1);
}
</style>
<body>
<div>
<a href="#"><img src="media/scale.jpg" alt=""></a>
</div>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
li {
float: left;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
margin-left: 10px;
margin-top: 20px;
border-radius: 50%;
list-style: none;
border: 1px solid green;
cursor: pointer;
transition: all .4s;
}
li:hover {
transform: scale(1.2);
}
</style>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
# 2.5 2D转换综合写法
注意:
同时使用多个转换,其格式为:transform: translate() rotate() scale()……等
其顺序会影响转换的效果(先旋转会改变坐标轴的方向)
当我们同时有位移和其他属性的时候,记得要将位移放到最前面
# 3. 3D转换 translate3d
3D特点:
- 近大远小
- 物体后面遮挡不可见
3D坐标系:
三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。
- x轴:水平向右 注意:x右边是正值
- y轴:垂直向下 注意:y下面是正值
- z轴:垂直屏幕 注意:往外面是正值
# 3.1 3D移动 translate3d
3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向:
transform: translateX(100px):仅仅是在X轴上移动
transform: translateY(100px):仅仅是在Y轴上移动
transform: translateZ(100px):仅仅是在Z轴上移动(注意:translateZ一般用px单位)
transform: translate3d(x,y,z):其中x、y、z分别要移动的轴的方向的距离(x、y、z没有 不可省略,写0)
2
3
4
# 3.2 透视 perspective
在2D平面产生近大远小视觉立体,但是只是效果是二维的
如果想要在网页产生3D效果需要透视(可理解成3D物体投影在2D平面内)
模拟人类的视觉位置,可认为安排一只眼睛去看
透视也称为视距:视距就是人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面成像就越大,物体也更立体,越远成像就越小。
透视的单位是像素
透视写在被观察元素的父盒子上面的 d:就是视距,视距就是一个距离人的眼睛到屏幕的距离 z:就是z轴,物体距离屏幕的距离,z轴越大(正值)我们看到的物体就越大。
transform: translateZ(100px)
:仅仅是在Z轴上移动,有了透视,就能看到translateZ引起的变化了。
# 3.3 3D旋转rotate3d
3D旋转指可以让元素在三维平面内沿着x轴,y轴,z轴或者自定义轴进行旋转。 语法:
transform: rotateX(45deg)
:沿着x轴正方向旋转45度transform: rotateY(45deg)
:沿着y轴正方向旋转45度transform: rorateZ(45deg)
:沿着z轴正方向旋转45degtransform: rotate3d(x, y, z, deg)
:沿着自定义轴旋转,deg为角度(了解)
对于元素旋转的方向的判断,需要用到左手准则
- 左手的手拇指指向坐标轴的正方向
- 其余手指的弯曲方向就是该元素沿着坐标轴正方形旋转的方向
<style>
body {
perspective: 300px;
}
img {
margin: 100px 50px;
transition: all 1s;
}
img:first-child:hover { transform: rotateZ(45deg);}
img:nth-child(2):hover{ transform: rotateY(45deg);}
img:last-child:hover{transform: rotateX(45deg);}
</style>
<body>
<img src="media/pig.jpg" alt="">
<img src="media/pig.jpg" alt="">
<img src="media/pig.jpg" alt="">
</body>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
transform: rotate3d(x, y, z, deg)
:沿着自定义轴旋转deg为角度(了解即可)
xyz是表示旋转轴的矢量,是标识你是否希望沿着该轴旋转,最后一个标示旋转的角度。
# 3.4 D呈现transform-style
- 控制子元素是否开启三维立体环境
transform-style: flat;
子元素不开启3d立体空间,默认的transform-style: preserve-3d;
子元素开启立体空间- 代码写给父级,但是影响的是子盒子
- 这个属性很重要
案例:
<!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: 500px;}
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 2s;
/* 让子元素保持3d立体空间环境 */
transform-style: preserve-3d;
}
.box:hover { transform: rotateY(60deg); }
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
.box div:last-child {
background-color: purple;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46