CSS的基础动画效果

最新推荐文章于 2023-08-06 10:21:17 发布

白塔ing

最新推荐文章于 2023-08-06 10:21:17 发布

阅读量204

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/z742773955/article/details/101024044

版权

CSS的基础动画效果

过渡(CSS3)

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。在CSS3里使用transition可以实现补间动画（过渡效果）及A状态到B状态，B状态到A状态。

其语法格式为ransition: 要过渡的属性花费时间运动曲线何时开始; (多组属性变化，还是用逗号隔开)，详细应用为

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {
			width: 200px;
			height: 100px;
			background-color: pink;
			/*transition: 要过渡的属性  花费时间  运动曲线（可省略）  何时开始(可省略);*/
			/*transition: width 2s ease 0s, height 0.5s ease 0s;*//*多属性的应用*/
			transition: all 1.5s ease-in 0s;

			/*运动曲线的属性
			ease:逐渐慢下来;
			linear  匀速
			ease-in 加速
			ease-out 减速
			ease-in-out 先加速再减速	
			*/
		}
		div:hover {
			width: 600px;
			height: 600px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

2D变形(CSS3) transform

1.移动 translate(x, y)

使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动n个像素单位。案例为

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {
			width: 100px;
			height: 100px;
			background-color: pink;
			/*谁做动画就把过渡加在谁上*/
			transition: all 0.5s;
		}
		div:active {
			/*transform: translate(100px);*//*一个值时，默认指定x轴的距离*/
		/*:active  没有松开鼠标的状态;*/
		 /*transform: translateY(100px);*//*仅垂直方向移动（Y轴移动*/
		 transform: translateX(100px);/*仅水平方向移动（X轴移动）*/
		 
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

注意
transform: translateX(n)和transform: translateY(n)同时出现在一起的话只生效下面的一个，想两个同时生效则用translate(x, y)属性。

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 {
			height: 200px;
			width: 200px;
			background-color: pink;
			margin: 100px auto;
		}
		div:hover {
			transform:  scale(2);/*宽高同时放大2倍*/
		}

	</style>
</head>
<body>
	<div></div>

</body>
</html>

3.旋转 rotate(deg)

改元素可以对元素进行旋转，正值为顺时针，负值为逆时针；其案例为

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body {
			/*perspective: 1000px;*/
		}
		p {
			display: block;
			margin: 300px 500px;
			transition: all 1s;
		}
		p:hover {
			transform: rotateX(180deg);/*字体顺时针旋转了180度*/
			/*transform: rotateX(30deg) rotateY(90deg) rotateZ(180deg) skew(0, 10deg);*/
		}
	</style>
</head>
<body>
	<p>我是transform: rotateX(180deg);</p>
</body>
</html>

4.原点调整 transform-origin

transform-origin可以调整元素转换变形的原点

transform-origin: 50px 10px ;

特别提示
如果是4个角，用left,top，这些值，如果想要精确的位置，就用像素值。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body {
			/*perspective: 1000px;*/
		}
		p {
			display: block;
			margin: 300px 600px;
			transition: all 1s;
			/*transform-origin:left;*//*以最左边为原点旋转*/
			transform-origin:right;/*以最右边为原点旋转*/

		}
		p:hover {
			transform: rotateY(180deg);/*字体顺时针旋转了180度*/
			/*transform: rotateX(30deg) rotateY(90deg) rotateZ(180deg) skew(0, 10deg);*/
		}
	</style>
</head>
<body>
	<p>我是transform: rotateX(180deg);</p>
</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 {
			font-size: 50px;
			font-weight: 700;
			margin: 100px;
			transition: all 0.7s;
		}
		div:hover {
			transform: skew(0, -30deg)
		}
	</style>
</head>
<body>
	<div>
		倾斜 skew(deg, deg)
	</div>
</body>
</html>

白塔ing

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS的基础动画效果

CSS的基础动画效果过渡(CSS3)过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。在CSS3里使用transition可以实现补间动画（过渡效果）及A状态到B状态，B状态到A状态。其语法格式为ransition: 要过渡的属性花费时间运动曲线何时开始;...
复制链接

扫一扫