CSS动画（2D，3D的转化）

最新推荐文章于 2024-06-17 09:00:23 发布

WL磊0.0

最新推荐文章于 2024-06-17 09:00:23 发布

阅读量26

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/akedf/article/details/134176795

版权

CSS动画

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

下面的表格列出了 @keyframes 规则和所有动画属性：

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3

实时实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
	from {background:red;}
	to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	from {background:red;}
	to {background:yellow;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

这就是一个背景色由红色转黄色的变化

此外该动画效果不仅能改变背景色也能改变字体区块大小也是为了css过渡做了一个很好的前置

CSS 2.3D的转化

2D 转换

在本章您将了解2D变换方法：

translate()
rotate()
scale()
skew()
matrix()

translate() 方法

Translate

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

rotate() 方法

Rotate

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

scale() 方法

Scale

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

skew() 方法

语法

transform:skew(<angle> [,<angle>]);

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

matrix() 方法

Rotate

matrix()方法和2D变换方法合并成一个。

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

3D的转换

其本质上和2D并无太大的差异性，只是多了一个2D变化的z轴，可变性更多了

translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

WL磊0.0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS动画（2D，3D的转化）

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。rotate()方法，在一个给定度数顺时针旋转的元素。其本质上和2D并无太大的差异性，只是多了一个2D变化的z轴，可变性更多了。matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
复制链接

扫一扫