过渡、动画、transform
一、过渡
1.1、介绍过渡(transition)
- 通过过渡可以指定一个属性发生变化时的切换方式
- 通过过渡可以创建一些非常好看的效果，提升用户的体验
1.2、属性介绍
-
transition-property(指定要执行过渡的属性)
多个属性间使用，隔开
如果所有属性都需要过渡，则使用all关键字
大部分属性都支持过度效果，注意过渡时必须是从一个有效数值向另一个有效数值进行过度
<!--例如--> <style> div{ transition-property:width; } div{ transition-property:height; } div{ transition-property:margin-left; } /*all代表所有效果都过渡*/ div{ transition-property:all; } </style> -
transition-duration(指定过渡效果的持续时间)
时间单位：s 和 ms 1s=1000ms
-
transition-timing-function(过渡的时序函数)
指定过渡的执行方式
-
可选值
-
ease 默认值，慢速开始，先加速，再减速
-
linear 匀速运动
-
ease-in 加速运动
-
ease-out 减速运动
-
ease-in-out 先加速，后减速
-
cubic-bezier() 来指定时序函数
https://cubic-bezier.com可以用来获取常用的时序函数
例：transition-timing-function:cubic-bezier(); -
steps() 分布执行过渡效果
-
第一值代表分几步执行
-
也可以设置第二个值：
end 在时间结束时执行过渡(默认值)，即时间段的初始点
start 在时间开始时执行过渡，即时间段的结束点点
例：transition-timing-function:steps(2,end); -
-
-
-
transition-delay(过渡效果的延迟，等待一段时间后在执行过渡)
时间单位：s 和 ms 1s=1000ms
1.3、过渡的简写属性
可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟
<style>
div{
/*第一个时间代表持续时间，第二个时间代表延迟*/
transition:2s margin-left 1s;
}
</style>
二、动画
2.1、动画价绍
动画和过渡类似，都是可以实现一些动态的效果，
不同的是过渡需要在某个属性发生变化时才会处罚
动画可以自动触发动态效果
注意：设置动画效果，必须要设置一个关键帧，关键帧设置了动画执行每一个步骤
2.2、设置关键帧
简单设置
<style>
/*1.设置关键帧*/
@keyframes test{
/*from表示动画的开始位置，也可以使用 0%*/
from{
margin-left:0;
}
/*to动画的结束位置，也可以使用100%*/
to{
margin-left:700px;
}
}
/*2.使用关键帧*/
div{
/*animation-name:要对当前元素生效的关键帧的名字*/
animation-name:test;
}
</style>
复杂设置
<style>
/*1.设置关键帧*/
@keyframes test{
/*from表示动画的开始位置，也可以使用 0%*/
from{
margin-left:0;
/*也可以在这里设置一些动画属性*/
animation-timing-function:ease-in;
}
20%,80%{
margin-left:200px;
}
40%{
margin-left:500px
}
60%{
margin-left:700px
}
/*to动画的结束位置，也可以使用100%*/
to{
margin-left:700px;
}
}
/*2.使用关键帧*/
div{
/*animation-name:要对当前元素生效的关键帧的名字*/
animation-name:test;
}
</style>
2.3、相关属性
一下是与过渡相同的属性效果
-
animation-delay(动画的延迟)
时间单位：s 和 ms 1s=1000ms
-
animation-duration(动画的执行时间)
时间单位：s 和 ms 1s=1000ms
-
animation-timing-function(过渡的时序函数)
指定过渡的执行方式
-
可选值
-
ease 默认值，慢速开始，先加速，再减速
-
linear 匀速运动
-
ease-in 加速运动
-
ease-out 减速运动
-
ease-in-out 先加速，后减速
-
cubic-bezier() 来指定时序函数
https://cubic-bezier.com可以用来获取常用的时序函数
例：animation-timing-function:cubic-bezier(); -
steps() 分布执行过渡效果
-
第一值代表分几步执行
-
也可以设置第二个值：
end 在时间结束时执行过渡(默认值)，即时间段的初始点
start 在时间开始时执行过渡，即时间段的结束点点
例：animation-timing-function:steps(2,end); -
-
-
以下是过渡没有的属性效果
-
animation-iteration-count(动画执行的次数)
- 可选值
- 次数，
例如：animation-iteration-count：2 - infinite 无限执行
- 次数，
- 可选值
-
animation-direction(指定动画运行的方向)
指定动画运行的方向
- 可选值
- normal 默认值，从from向to运行，每次都是这样
- reverse 从to向from运行，每次都是这样
- alternate 从from向to运行，重复执行动画时反向执行
- alternate 从to向from运行，重复执行动画时反向执行
- 可选值
-
animation-play-state(设置动画的执行状态
- 可选值：
- running 默认值，动画执行
- paused 动画暂停
- 可选值：
-
animation-fill-mode(动画的填充方式)
- 可选值
- none 默认值，动画执行完毕元素回到原来位置
- forwards 动画执行完毕元素会停止在动画结束的位置
- backwards 动画延时等待时，元素就会处于开始位置
- both 结合了forwards和backwards
- 可选值
2.4、动画的简写属性
可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟
<style>
div{
/*第一个时间代表持续时间，第二个时间代表延迟*/
animation:2s margin-left 1s;
}
</style>
三、变形平移
3.1、介绍
变形就是通过CSS来改变元素的形状或位置
—— 变形不会影响到页面的布局
-
transform用来设置元素的变形效果
-
平移可选值：
- translateX() 沿着x轴方向平移
- translateY() 沿着y轴方向平移
- translateZ() 沿着z轴方向平移
<!--例：--> <style> div{ /*平移元素,百分比是相对于自身计算的*/ transform：translateX(50%); /*也可以用像素单位*/ transform：translateX(50px); } </style>
-
3.2、介绍Z轴平移
z轴平移，平移调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离
距离越大，元素人越近
z轴评议属于立体效果(近大远小)，默认情况下网页是不支持透视，如果需要看见效果
必须要设置网页的视距
-
视距设置
<style> html{ /*设置当前网页的视距为800px，人眼距离网页的距离*/ perspecitve:800px; } </style>
3.3、应用（居中）
-
仅通过定位居中
这种居中需要居中的元素的height和width是确定
<style>
div{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
}
</style>
-
定位+变形平移结合居中
这种居中不需要明确居中的元素的height和width，比如被内容撑开的元素
<style> div{ position：absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); } </style>
四、旋转
也是transform的属性
通过旋转可以使元素沿着x y 或 z 旋转指定的角度
-
transform
-
旋转相关的值
- rotateX()
- rotateY()
- rotateZ()
单位：turn表示圈 deg表示度数
<style> div{ /*以下两种效果是一样的*/ transfrom:rotateX(0.25turn); transfrom:rotate(90deg); } </style>
-
-
backface-visibility(是否显示元素的背面)
- 值
- hidden
- 值
五、缩放
也是transform的属性
本部分是关于对元素缩放的函数
5.1、相关属性
-
transform
-
缩放相关的值
-
scaleX() 水平方向缩放
-
scaleY() 垂直方向缩放
-
scaleZ() Z轴方向缩放
-
scale() 双方向缩放
括号内直接写数字，比如transform:scaleX(2);表示X轴扩2倍
-
-
-
transform-origin(变形原点，即变形从哪开始)
- 可选值
- transform-origin:20px 20px; 指距离左上角的水平垂直各20px的位置
- transform-origin:center; 默认值
- 可选值
5.2、应用
<!--光标移动到图片上后，图片放大-->
<style>
div{
width:100px;
height:100px;
/*内部图片放大后会超出这个父元素，将超出部分裁剪掉*/
overflow:hidden;
}
img{
transition:.2s;
transform:scale(1.2);
}
</style>
<!--结构-->
<div>
<img src=""/>
</div>
六、补充
6.1、transform-style: preserve-3d;(显示3D视图)
不设置的话不会显示出立体图，给父类设置，例如：下面案例
6.2、立体图转动案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div#all div{
width: 200px;
height: 200px;
position: absolute;
left: 0%;
right:0%;
/*background: black;*/
transition: 2s;
}
div#all{
width: 200px;
height: 200px;
position: relative;
background: grey;
position: absolute;
left: 300px;
top: 200px;
transition: 2s;
background: lightgray;
transform-style: preserve-3d;
animation-name: run;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
transform:rotateY(0.125turn) rotateX(0.125turn);
}
@keyframes run{
from{transform:rotateY(0.125turn) rotateX(0.125turn);}
to{transform:rotateY(-0.875turn) rotateX(-0.875turn);}
}
div#left{
background: red;
transform:rotateY(0.25turn) translateZ(100px);
}
div#right{
background: yellow ;
transform:rotateY(-0.25turn) translateZ(100px);
}
div#front{
background: green;
transform: translateZ(100px);
}
div#back{
background: black;
/*transform:rotateX(0.5turn) translateZ(100px);*/
}
div#back{
background: purple;
transform:rotateX(0.5turn) translateZ(100px);
}
div#top{
background: blue;
transform:rotateX(0.25turn) translateZ(100px);
}
div#bottom{
background: orange;
transform:rotateX(-0.25turn) translateZ(100px);
}
</style>
</head>
<body>
<div id="all">
<div id="left"></div>
<div id="right"></div>
<div id="back"></div>
<div id="top"></div>
<div id="bottom"></div>
<div id="front"></div>
</div>
</body>
</html>
530
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
