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;后变形原点就变为左上角
那么缩放就只能在右和下方缩放