10、CSS 3D 转换
通过 CSS transform 属性,您可以使用以下 3D 转换方法:
rotateX()
rotateY()
rotateZ()
10.1 rotateX() 方法(使元素绕其 X 轴旋转给定角度)
<!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>
/* div{
position: absolute;
} */
div.ex1 {
width: 200px;
height: 200px;
background-color: #F0AAAE;
border: 1px solid black;
}
div.ex2 {
width: 200px;
height: 200px;
background-color: #E45664;
border: 1px solid black;
transform: rotateX(50deg);
}
</style>
</head>
<body>
<div>
<div class="ex1"></div>
<div class="ex2"></div>
</div>
</body>
</html>
运行效果:
10.2 rotateY() 方法(使元素绕其 Y 轴旋转给定角度)
div.ex2 {
width: 200px;
height: 200px;
background-color: #E45664;
border: 1px solid black;
transform: rotateY(50deg);
}
10.3 rotateZ() 方法(方法使元素绕其 Z 轴旋转给定角度)
div.ex2 {
width: 200px;
height: 200px;
background-color: #E45664;
border: 1px solid black;
transform: rotateZ(50deg);
}
11、CSS 过渡
CSS
过渡允许您在给定的时间内平滑地改变属性值。
如需创建过渡效果,必须明确两件事:
- 您要添加效果的
CSS
属性 - 效果的持续时间
示例:
transition: width 2s,height 2s;
transition: width 2s;
<!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>
/* div{
position: absolute;
} */
div.ex1 {
width: 200px;
height: 200px;
background-color: #F0AAAE;
border: 1px solid black;
transition: width 2s;
}
div.ex1:hover{
width: 400px;
}
</style>
</head>
<body>
<div>
<div class="ex1"></div>
</div>
</body>
</html>
运行效果:
鼠标放置元素上后,元素宽度会从200px 平滑增加到 400px,动画效果持续2秒钟
11.2 transition-timing-function
(规定过渡效果的速度曲线)
transition-timing-function
属性可接受以下值:
ease
- 规定过渡效果,先缓慢地开始,然后加速,然后缓慢地结束(默认)linear
- 规定从开始到结束具有相同速度的过渡效果ease-in
-规定缓慢开始的过渡效果ease-out
- 规定缓慢结束的过渡效果ease-in-out
- 规定开始和结束较慢的过渡效果cubic-bezier(n,n,n,n)
- 允许您在三次贝塞尔函数中定义自己的值
11.3 transition-delay
(规定过渡效果的延迟(以秒计))。
div {
transition-delay: 1s;
}
11.4 过渡 + 转换
div {
transition: width 2s, height 2s, transform 2s;
}
11.5 简写的 transition
属性
div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
可简写为:
div {
transition: width 2s linear 1s;
}
12、CSS 动画
12.1 @keyframes
规则
如果您在 @keyframes
规则中指定了 CSS
样式,动画将在特定时间逐渐从当前样式更改为新样式。
要使动画生效,必须将动画绑定到某个元素。
animation-duration
属性定义需要多长时间才能完成动画。如果未指定animation-duration
属性,则动画不会发生,因为默认值是0s(0秒)
。
12.2 from、to
关键词使用:
下面的例子将 “example
” 动画绑定到 <div>
元素。动画将持续 4 秒钟,同时将 <div>
元素的背景颜色从 “red
” 逐渐改为 “yellow
”:
<!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>
div.ex1 {
width: 200px;
height: 200px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {
background-color: red;
}
to {
background-color: yellow;