动画制作之平移案例：包含伪类nth-of-type(),平移transform,过度样式：transition透明度opicity;

最新推荐文章于 2025-05-13 15:49:27 发布

原创最新推荐文章于 2025-05-13 15:49:27 发布 · 738 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#transform #nth-of-type #opacity #transition-delay #transition

前端学习笔记专栏收录该内容

30 篇文章

订阅专栏

本文通过实例演示了如何使用HTML和CSS实现图片和平移动画效果。重点介绍了transform平移属性、transition过渡效果及伪类nth-of-type的选择技巧，同时展示了如何设置元素的透明度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画制作之平移案例</title>
		<!--学习四个样式
			1、伪类：nth-of-type(n)
			2、transform的四种样式使用
			3、transition样式的使用
			4、opacity样式（设置透明度） 
		-->
		<link rel="stylesheet" href="CSS/style2.css" />
	</head>
	<body>
		<div class="box pingyi">
			<img src="image/meiren.jpg" alt="" />
			<div class="wenzi">
				<h4>平移动画</h4>
				<p>文字说明1</p>
				<p>文字说明2</p>
				<p>文字说明3</p>
			</div>
		</div>
		<div class="box">
				<img src="image/meiren2.jpg" alt="" />
			<div class="wenzi">
				<h4>平移动画</h4>
				<p>文字说明1</p>
			</div>
		</div>
			<div class="box">
				<img src="image/miaomiao.jpg" alt="" />
			<div class="wenzi">
				<h4>平移动画</h4>
				<p>文字说明1</p>
			</div>
		</div>
			<div class="box">
				<img src="image/yumen.jpg" alt="" />
			<div class="wenzi">
				<h4>平移动画</h4>
				<p>文字说明1</p>
			</div>
		</div>
	</body>
</html>







================================================

@charset "utf-8";
/*初始化样式*/
*{
	padding: 0;
	margin: 0;
}
/**号包含div,body等所有公共样式*/
.box{
	width: 33%;
	height: 300px;
	overflow: hidden;/*溢出隐藏*/
	position: relative;
	float: left;
}
.wenzi{
	position: absolute;
	top: 0;
	left: 0;
	
}
.pingyi{
	background-color: #130700;
}
.pingyi .wenzi{
	padding: 20px;
	color: #fff;
}
.pingyi .wenzi p{
	color: #666;
	background-color: #fff;
	margin-top: 5px;/*外边距5px*/
	transform: translate(-300px);/*向左平移300px*/
}
.pingyi:hover img{
	opacity: 0.7;/*设置透明度*/
	transition: all 2s ease-in;/*过度动画2s ease-in尽快出来*/
	
}
.pingyi:hover .wenzi p{
	transform: translate(0);/*取消平移*/
	transition: all 2s ease-in;/*过度2s出来*/
}
/*延时出来这个是三个p标签的出场顺序上面那个是过度2s,即出来的过程*/
.pingyi:hover .wenzi p:nth-of-type(1){
	transition-delay: 0.1s;/*延时0.1s*/
}
.pingyi:hover .wenzi p:nth-of-type(2){
	transition-delay: 0.2s;/*第二个延时0.2s出来*/
}
.pingyi:hover .wenzi p:nth-of-type(3){
	transition-delay: 0.3s;
}