过渡&动画

最新推荐文章于 2024-09-26 19:50:45 发布

搬砖老金牛

最新推荐文章于 2024-09-26 19:50:45 发布

阅读量279

点赞数

分类专栏： html和css 文章标签： html5 css

本文链接：https://blog.csdn.net/qq_48968230/article/details/123810238

版权

html和css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、2D转换

css3转换

transform：向元素应用2D或3D转换

通过css3转换，能够对元素进行移动、缩放、转动、拉长或者拉伸。

转换即使元素改变形状、尺寸、位置的一种效果。

1、位移
transform: translate(x,y)/translateX()/translateY()

例如：transform: translateX(500px);

2、缩放
transform: scale(x,y)/scaleX()/scaleY()

例如： transform: scale(2,2);

3、旋转 deg度数

例如：transform: rotateY(180deg);

4、倾斜转换

transform: skew()/skewX()/skewY()

例如：transform: skew(60deg,60deg);

二、过渡

transition: 要去过渡的属性过渡时长过渡的时间延迟
例如：transition: all 2s;

实操：

test5.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>转换与过渡</title>
		<link rel="stylesheet" type="text/css" href="css/test5.css"/>
	</head>
	<body>
		<div class="box">
			<img src="img/巨星科技_05.png" alt="">
		</div>
		
	</body>
</html>

test5.css

*{
	padding: 0;
	margin:0;
}

.box{
	width:310px;
	height:413px;
	/* 过渡 */
	/* transition: 要去过渡的属性  过渡时长  过渡的时间延迟; */
	transition: all 2s;
}

.box:hover{
	/* 2D转换 */
	/* 位移 */
	/* transform: translate(x,y)/translateX()/translateY() */
	 transform: translateX(500px); 
	/* 缩放 */
	/* transform: scale(x,y)/scaleX()/scaleY() */
	transform: scale(2,2);
	/* 旋转 deg度数 */
	transform: rotateY(180deg);
	/* 倾斜转换 */
	/* transform: skew()/skewX()/skewY(); */
	transform: skew(60deg,60deg);
}

.box img{  
	display: block;  /* 行元素转为块元素 */
	width:100%;
	height: 100%;
}

三、动画

1、css3动画属性

animation: 执行动画的名称动画执行一次的时间动画执行的速度曲线动画执行的次数；

infinite不限次数 linear匀速

2、动画帧

@keyframes 动画的名称{
0%{
状态1
}

…………
100%{
状态n
}
}

实操：

test6.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画</title>
		<link rel="stylesheet" type="text/css" href="css/test6.css"/>
	</head>
	<body>
		<div class="ani">
		</div>
		
		<div class="heart">
			<img src="img/爱心.png" alt="" >
		</div>
	</body>
</html>

test6.css

*{
	padding: 0;
	margin: 0;
}

.ani{
	height: 100px;
	background-color: #f0f;
	/* 动画 */
	/* animation: 执行动画的名称 动画执行一次的时间 动画执行的速度曲线 动画执行的次数； */
	/* infinite不限次数 */
	/* linear匀速 */
	animation: anis 3s linear infinite;
}

/* 动画帧 */
@keyframes anis{
	0%{
		width: 0%;
		background-color: #0000FF;  /* 蓝色 */
	}
	100%{
		width:100%;
		background-color: #FF00FF; 
	}
}

/* 跳动的心 */
.heart{
	width:300px;
	height: 300px;
	margin:200px auto;
}

.heart img{
	display: block;
	width: 100%;
	animation: heart 1s infinite;
}

@keyframes heart{
	0%{
		transform: scale(1,1);
	}
	50%{
		transform: scale(1.4,1.4);
	}
	100%{
		transform: scale(1,1);
	}
}

练习：

test7.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<link rel="stylesheet" type="text/css" href="css/test7.css"/>
	</head>
	<body>
		<!-- 页面加载 -->
		<div class="loading">
		</div>
		
		<!-- 火箭 -->
		<div class="rocket">
			<img src="img/火箭.png" alt="">
		</div>
	</body>
</html>

test7.css

*{
	padding: 0;
	margin: 0;
}

/* 加载效果 */
.loading{
	width: 150px;
	height: 150px;
	border: 5px solid #00f;  /* 边框 */
	margin: 60px auto;  /* 居中 */
	animation: load 6s linear infinite;
	border-top-color: #f0f;
	border-radius:50%;  /* 圆角 */
}

@keyframes load{
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}

/* 火箭 */
.rocket{
	width:100px;
	height: 100px;
	border:5px solid #fcc;
	margin:20px auto;
	border-radius:50%;
}

.rocket img{
	display:block;
	width:100%;
	height: 100%;
	transition: all 1s;  /* 过渡 */
}

.rocket:hover img{
	transform: translateY(-400px);
}

运行效果（动态的）：