CSS 2D的转换与部分Animation动画_css 2d aniamtion-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_57727027/article/details/123296954

CSS 2D的转换

transform属性可以对元素进行移动、缩放、转动、拉长或拉伸。

Transform属性有四个常用方法：rotate(x,y)旋转，scale(x,y)缩放，translate(x,y)移动（平移）和skew(x-angle,y-angle)倾斜

1 translate () 从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。

示例：

<title>无标题文档</title>
	<style>
		body{
			background:#2D9AAE;
		}
		div{
			width:50px;
			height: 50px;
			background: reds;
			transform: translate(30px,50px);/*translate()方法控制元素的移动*/
		}
	</style>

2 rotate () 方法根据给定的角度顺时针或逆时针旋转元素

示例：

<title>无标题文档</title>
	<style>
		body{
			background:#2D9AAE;
		}
		div{
			width:50px;
			height: 50px;
			background: red;
			transform: rotate(120deg);/*rotate()方法根据给定的角度顺时针或逆时针旋转元素。*/
		}
	</style>

3 scale () 方法增加或减少元素的大小（缩放）（根据给定的宽度和高度参数）。

示例：

<title>无标题文档</title>
	<style>
		body{
			background:#2D9AAE;
		}
		div{
			width:50px;
			height: 50px;
			background: red;
			transform:scale(2,2);/*scale()方法增加或减少元素的大小（根据给定的宽度和高度参数）。*/
		}
	</style>

4 skewX () 方法使元素沿 X 轴倾斜给定角度。skewY()方法使元素沿 Y 轴倾斜给定的角度。

示例：

<title>无标题文档</title>
	<style>
		body{
			background:#2D9AAE;
		}
		div{
			width:50px;
			height: 50px;
			background: red;
			transform:skewX(30deg) skewY(20deg);/*skewX()方法使元素沿 X 轴倾斜给定角度。skewY()方法使元素沿 Y 轴倾斜给定角度。。*/
		}
	</style>

2D 所有转换方法

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

Animation动画

可以灵活实现需要的动画效果。

Animation动画
	css3为Animation动画提供的几个属性如下：
	animation-name:指定动画名称，该属性指定一个已有的关键帧定义。
	animation-duration:指定动画持续时间。
	animation-timing-funtion:指定动画变化速度。
	animation-delay：指定动画延迟多长时间才开始执行。
	animation-iteration-count：指定动画的循环执行次数。
	animation:这是一个复合属性。该属性的格式为：
	animation:animation-name animation-duration animation-timing-funciotn
	animation-delay animation-iteration-count.

	keyframes(关键帧)：计算机动画术语，帧——就是动画中最小单位的单幅影像画面，
	相当于电影胶片上的每一格镜头。在动画软件的时间轴上帧表现为一格或一个标记。
	关键帧——相当于二维动画中的原画。指角色或者物体运动或变化中的关键动作所处的那一帧。
	关键帧与关键帧之间的动画可以由软件来创建，叫做过渡帧或者中间帧。

	Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，
	后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。

	@keyframes changecolor{
	0%{
	background: red;
	}
	50%{
	background: red;
	}
	100%{
	background: green;
	}
	}
	在一个“@keyframes”中的样式规则可以由多个百分比构成的，
	如在“0%”到“100%”之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，
	从而达到一种在不断变化的效果

eg：将鼠标移入，可以动画的改变背景颜色。也可以切换多种颜色。

视图页面 的代码
<body>
	<div>鼠标放在我这儿，看变化</div>
</body>

CSS外链样式 代码
@charset "utf-8";
/* CSS Document */
* {
	margin: 0;
	padding: 0;
}
@keyframes changecolor{
	0%{
		background:#E82733;
	}
	20%{
		background:#E038BA;
	}
	40%{
		background:#482EB1;
	}
	60%{
		background:#1DDD2D;
	}
	100%{
		background:#E3E834;
	}
}

div {
	width: 300px;
	height: 300px;
	margin: 100px auto;
	line-height: 300px;
	text-align: center;
	color: #fff;
	font-size: 20px;
	background: #0F3;
}
div:hover{
	animation-name:changecolor;
	animation-duration:3s;
	animation-timing-function:ease-in;
	animation-delay:.4s;
	animation-iteration-count:3;
	/*animation:changecolor 3s ease-in 0.3s 2;*/
}

效果图一：鼠标还没有放进去的时候