文章目录
一、过渡(transition)
通过过渡可以指定一个属性发生变化时的切换方式
通过过渡可以创建一些非常好的效果,提升用户的体验
-
1.transition-property:指定要执行过渡的属性
-
多个属性间使用 , 隔开
如果所有属性都需要过渡,则使用all关键字
大部分属性都支持过渡效果,但必须是从一个有效数值向另一个有效数值进行过渡 2.transition-duration:指定过渡效果的执行时间
- 时间单位:s 和 ms , 1s = 1000ms 3.transition-timing-function:过渡的时序函数——制定过渡的执行方式
-
可选值:
ease 默认值,慢速开始,先加速,再减速
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速,再减速
cubic-bezier() 来指定时序函数——https://cubic-bezier.com
step() 分步执行过渡效果——可以设置两个值: - transition-timing-function: step(2,start);——在时间开始时执行过渡
- transition-timing-function: step(2,end);——在时间结束时执行过渡,默认值 4.transition-delay:指定过渡效果的延迟,等待一段时间再执行
- transition-delay: 2s;
注:transition可以同时设置过渡相关的所有属性,但如果要写延迟的话,则两个时间中第一个是持续时间,第二个是延迟时间
二、动画(animation)
动画和过渡类似,都是可以实现一些动态的效果
不同的是过渡需要在某个属性发生变化时才会触发
动画可以自动触发动态效果
设置动画效果,必须要先设置一个关键帧,关键帧设定了动画执行每一个步骤:
@keyframes test{
from{
/* from表示动画开始的位置,也可以用 0%表示 */
margin-left: 0;
}
/* to表示动画结束的位置,也可以用 100%表示 */
to{
margin-left: 700px;
}
.box1{
background-color: red;
/* 要对当前元素生效的关键帧的名字 */
animation-name: test;
/* 动画的执行时间 */
animation-duration: 4s;
/* 动画的延迟 */
animation-delay: 2s;
animation-timing-function: ease-in-out;
}
-
5.animation-iteration-count 动画的执行次数
-
可选值:
次数
infinite 无限执行 6.animation-direction 指定动画运行的方向
-
可选值:
normal 默认值, 从from向to运行 每次都一样
reverse 从to向from运行,每次都一样
alternate 从from向to运行,重复执行的时候动画反向执行
alternate-reverse 从to向from运行,重复执行的时候动画反向执行 7.animation-play-state 设置动画的执行状态
-
可选值:
running 默认值,动画执行
paused 动画停止 8.animation-fill-mode 动画的填充模式
-
可选值:
none 默认值,动画执行完毕元素回到开始的位置
forwards 动画执行完毕元素停止在动画结束的位置
backwards 动画延迟等待时,元素就会处于开始的位置
both 结合了forwards和backwards
三、变形平移(transform)
变形平移就是通过CSS来改变元素的形状或位置
变形不会影响页面的布局
-
transform用来设置元素的变形效果
-
平移:
translateX() 沿着x轴方向平移
translateY() 沿着y轴方向平移
translateZ() 沿着z轴方向平移
1.x、y轴平移
transform: translateX(50%);
transform: translateX(100px);
/* 居中 */
left = 50%;
top = 50%;
transform: translateX(-50%) translateY(-50%);
2.z轴平移
z轴平移,调整元素在z轴的位置,正常情况就是调整元素和人眼之间的距离
距离越大,元素离人越近
z轴平移属于立体效果(近大远小),默认情况下网页是不支持透视的,如果需要看见效果必须要设置网页的视距
<!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>
html{
perspective: 800px;
}
body{
border: 1px solid red;
}
.box1{
width: 200px;
height: 200px;
background-color: antiquewhite;
margin: 200px auto;
transition: 2s;
}
body:hover .box1{
transform: translateZ(500px);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
四、旋转
-
通过旋转可以将元素沿着x、y、z轴旋转指定的角度
-
rotateX()
rotateY()
rotateZ() backface-visibility:;是否显示元素的背面
-
可选值:
visible 显示
hidden 不显示
transform: rotateZ(45deg);
transform: rotateZ(0.5turn);
transform: rotateX(180deg);
/* 向前转 */
transform: translateZ(400px) rotateY(180deg);
/* 向后转 */
transform: rotateY(180deg) translateZ(400px);
/* 不显示元素的背面 */
transform: rotateY(180deg);
backface-visibility: hidden;
/* 显示元素的背面 */
transform: rotateY(180deg);
backface-visibility: visible;
五、缩放
-
transform:scale()对元素进行缩放的函数:
- scaleX() 水平方向缩放
- scaleY()垂直方向缩放
- scale() 双方向缩放
六、练习
1.动画练习——小球
<!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>
@keyframes ball {
from{