初识动画(CSS)
程序员文章站
2022-05-03 08:18:05
...
初识动画(CSS)
-
过渡(CSS3)
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
指定要添加效果的CSS属性
指定效果的持续时间。
在CSS3里使用transition可以实现补间动画（过渡效果）
语法格式:transition:
要过渡的属性 花费时间 运动曲线 何时开始;
如果有多组属性变化，还是用逗号隔开。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>鼠标移动到 div 元素上，查看过渡效果。</p>
</body>
</html>
-
2D变形(CSS3) transform
1.移动 translate(x, y)
translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)仅水平方向移动（X轴移动）
translateY(Y)仅垂直方向移动（Y轴移动）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
transition: all 2s;
}
div:hover{
transform: translate(100px,100px);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
当我们鼠标移动到方块，就会向下和向右平移100px
2.缩放 scale(x, y)
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 400px;
height: 200px;
background-color: pink;
transition: all 2s;
}
div:hover{
transform: scale(0.5,1.5); }
</style>
</head>
<body>
<div>
</div>
</body>
</html>
其中，x，y值是它的缩放倍数
3.旋转 rotate(deg)
transform:rotate(45deg);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
transition: all 2s;
}
div:hover{
transform: rotate(60deg);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
可以对元素进行旋转，正值为顺时针，负值为逆时针；
4.transform-origin
transform-origin可以调整元素转换变形的原点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
transition: all 2s;
}
div:hover{
transform: rotate(60deg);
transform-origin: left right;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
例如这里，我们把旋转的中心店换到了左上
5.倾斜 skew(deg, deg)
transform:skew(30deg,0deg);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
transition: all 2s;
}
div:hover{
transform: skew(30deg,60deg);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
skew(xdeg,ydeg)
ydeg : 纵向倾斜度数
y取值为正，y轴不动,x轴顺时针倾斜一定角度
y取值为负，y轴不动,x轴逆时针倾斜一定角度
单位是deg
-
3D变形(CSS3) transform
1.rotateX()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
transition: all 2s;
}
div:hover{
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
就是沿着 x 立体旋转.
2.rotateY()
同理，沿着y轴进行旋转
3.rotateZ()
同理，沿着z轴进行旋转
4.透视(perspective)
多少像素的3D元素是从视图的perspective属性定义。这个属性允许你改变3D元素是怎样查看透视图。
定义时的perspective属性，它是一个元素的子元素，透视图，而不是元素本身。
-
透视原理： 近大远小 。
-
浏览器透视：把近大远小的所有图像，透视在屏幕上。
-
perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
5.translateX(x)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
transition: all 2s;
}
div:hover{
transform: translateX(60px);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
仅水平方向移动（X轴移动）
6.translateY(y)
仅垂直方向移动（Y轴移动）
7.translateZ(z)
z轴因为显示器是平面，所以直观表现就是大小变化
8.translate3d(x,y,z)
这个就是可以同时设置xyz的偏移量
9.backface-visibility
backface-visibility 属性定义当元素不面向屏幕时是否可见。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: pink;
transition: all 2s;
backface-visibility: hidden;
}
div:hover{
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
当元素旋转180度，背向我们，则会隐藏
-
动画(CSS3) animation
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
语法格式：
animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;
animation: go 2s infinite；//这里是写在需要动画的元素上
@keyframes go {//这里写具体动画，可以写多段动画
0% {
transform: translate3d(0, 0, 0);
}
25% {
transform: translate3d(600px, 0,0);
}
50% {
transform: translate3d(600px, 600px,0);
}
75% {
transform: translate3d(0, 600px,0);
}
100% {
transform: translate3d(0, 0, 0);
}
}