1.过渡（transition）
- 通过过渡可以指定一个属性发生变化时的切换方式
1.1transition-property:指定执行过渡的属性
- 多个属性使用“，”隔开，如果所有属性都需要过渡，则使用all关键字
- 大部分属性都支持过渡效果
- 注意：过渡必须是从一个有效数值向另外一个有效数值过渡
1.2transition-duration：执行过渡需要的时间
- 时间单位：s、ms
1.3transition-timing-function：过得的时序函数
- ease（默认值）：慢速开始，先加速，再减速
- liner：匀速运动
- ease-in：加速运动
- ease-out：减速运动
- ease-in-out：先加速后减速
通过贝塞尔曲线指定
transition-timing-function：cubic-bezier(.25,.1,.25,1)
贝塞尔曲线生成网址：(https://cubic-bezier.com)
steps()分步执行过渡效果
- 第一个值：要分步执行的个数
- 第二个值：
- end：在时间结束是执行过渡
- start：在时间开始时执行过渡
1.4 transition-delay：过渡效果的延迟，等待一段时间后再执行
transition-delay：2s；
1.5transition：可以同时设置过渡相关的所有属性
- 只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟
tansition：2s(持续时间) margin-left（执行属性） 1s（延迟时间）;
2.动画（animation）
- 动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果
- 设置动画效果必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤
2.1设置项
@keyframes
@keyframes test{
/*from表示动画的开始位置 也可以使用0% */
from{
margin-left：0；
}
/*动画结束的位置，也可以使用100%*/
to{
margin-left:700px;
}
}
animation-name:引用设定好的@keyframes
animation-name:动画执行时间
animation-delay：设置动画的延时
animation-timing-function：设置移动类型（匀速、加速等）
animation-iteration-count：动画执行的次数
-infinite：无限执行
animation-direction：改变执行的方向
- normal：默认值，每次都是从to向from运行
- reverse：反向，从to向from运行
- alternate：从from向to运行 重复执行动画时反向运行（类似于碰撞效果）
- alternate-reverse：从to到from运行 重复执行动画时反向执行
animation-play-state：设置动画的执行状态
可选值
- running（默认值）：动画执行
- paused：动画暂停
- 当鼠标移入时动画暂停
.box1:hover div{
animation-play-state:paused;
}
animation-fill-mode:动画的填充模式
可选值：
- none（默认值）：动画执行完毕回到初始位置
- forwards：执行完毕后停在终点位置
- backwards：元素在delay时就会处于from的状态
- both：具备forwards和backwards的特点
animation：简写版本
和transition一样，除了持续时间必须在延迟时间前外，其他的属性都没有顺序要求
示例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
100px;
height: 100px;
margin: 0 auto;
background-image: url(./image/trump_run.png);
animation: run 1s steps(6) infinite;
}
/*创建关键帧 */
@keyframes run{
form{
background-position: 0 0;
}
to{
background-position:-600px 0 ;
}
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
3.变形平移
变形就是指通过CSS来改变元素的形状或位置，变形不会影响到页面的布局
，transform用来设置元素的变形效果
3.1平移
translateX() 沿着x轴方向平移
transform：translateX(100px);
transform：translateX(50%);//平移元素百分比是相对于自身计算的
translateY() 沿着y轴方向平移
让元素居中
- 水平居中
.box{
background-color:black;
position:absolute;
left:50%;
transform:translateX(-50%);
}
- 垂直居中
.box{
background-color:black;
position:absolute;
top:50%;
transform:translateY(-50%);
}
3.2translateZ() 沿着z轴方向平移
-
正常情况就是调整元素和人眼之间的距离
距离越大，元素离人越近 -
z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果必须要设置网页的视图
-
视距：perspective
html:perspective:800px;
.box1{
200px;
height:200px;
background-color:#bfa;
margin:20px auto;
transtion:2s;
}
body:hover .box1{
transform:translateZ(200px);
}
4.旋转
- 通过旋转可以使元素沿着x、y或z轴旋转指定的角度
rotateX()
rotateY()
rotateZ()
transform:rotateZ(180deg)
可选值：deg，turn
- 30deg:30度
- .5turn:半圈
transform:rotateZ(.5turn)
backface-visibility：设置是否显示元素的背面
- visible：显示；
- hidden：不显示；
5.设计时钟
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.sec{
height: 50%;
4px;
background-color: red;
margin:0 auto;
}
.sec-wrapper{
position:absolute;
height:100%;
100%;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
background-color:none;
animation: run 60s infinite;
}
.clock{
500px;
height: 500px;
margin:0 auto;
margin-top:100px;
border-radius:50%;
border:10px solid black;
position: relative;
}
.hour-wrapper{
position:absolute;
height:55%;
55%;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
background-color:none;
animation: run 43200s infinite;
}
.hour{
height: 50%;
4px;
background-color: black;
margin:0 auto;
z-index: 3;
}
.min-wrapper{
position:absolute;
height:75%;
60%;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
background-color:none;
animation:run 3600s infinite;
}
.min{
height: 50%;
4px;
background-color: rgb(28, 224, 77);
margin:0 auto;
z-index: 2;
}
/* 旋转的关键帧 */
@keyframes run{
from{
transform:rotateZ(0);
}
to{
transform:rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="clock">
<div class="sec-wrapper">
<div class="sec"></div>
</div>
<div class="min-wrapper">
<div class="min"></div>
</div>
<div class="hour-wrapper">
<div class="hour"></div>
</div>
</div>
</body>
</html>
6.缩放
- 对元素进行缩放
scaleX()：水平方向
scaleY()：垂直方向
scale：两方向同时
7.设置变形的原点，默认值center
transform-origin:20px 20px;
解释：例如缩放，变形原点是中心，当设置为transform-origin:0px 0px;后变形原点就变为左上角
那么缩放就只能在右和下方缩放