超简单：好看的电子相册制作！

最新推荐文章于 2021-08-04 00:50:09 发布

蒙奇Dpzp

最新推荐文章于 2021-08-04 00:50:09 发布

阅读量405

点赞数 1

分类专栏：娱乐文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_45512136/article/details/109126109

版权

娱乐专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文件层级参看我的另一篇文章https://blog.csdn.net/weixin_45512136/article/details/109085556

直接进入正题

1.index.css文件代码

* {
	margin: 0;
	padding: 0;
}

.box {
	width: 100%;
	height: 100%;
}

.box img {
	width: 100%;
	height: 100%;
	position: fixed;
	transition: all 1s linear;
}

.list {
	position: absolute;
	z-index: 999;
	width: 1000px;
	height: auto;
	bottom: 20px;
	left: 0;
	right: 0;
	margin: auto;
}

.list li {
	list-style: none;
	width: 130px;
	height: 130px;
	border: 5px solid lightskyblue;
	float: left;
	margin-left: 60px;
	overflow: hidden;
	border-radius: 50%;

}

.list li img {
	width: 200%;
}

.box img:nth-child(1) {
	opacity: 0;
	left: -100%;
}

.box img:nth-child(1):target {
	z-index: 1;
	opacity: 1;
	left: 0;
}

.box img:nth-child(2) {
	top: -100%;
}

.box img:nth-child(2):target {
	z-index: 1;
	transform: rotate(360deg);
	top: 0;
}

.box img:nth-child(3) {
	opacity: 0;
	right: -100%;
}

.box img:nth-child(3):target {
	z-index: 1;
	opacity: 1;
	right: 0;
}

.box img:nth-child(4) {
	bottom: -100%;
}

.box img:nth-child(4):target {
	z-index: 1;
	transform: rotate(360deg);
	bottom: 0;
}

.box img:nth-child(5) {
	opacity: 0;
}

.box img:nth-child(5):target {
	z-index: 1;
	opacity: 1;
	transform: rotate(360deg);
}

2.html文件代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div class="box">
			<h1>电子相册</h1>
			<ul class="list1">
				<li><img src="img/1.jpg" id="img1"></li>
				<li><img src="img/2.jpg" id="img2"></li>
				<li><img src="img/3.jpg" id="img3"></li>
				<li><img src="img/4.jpg" id="img4"></li>
				<li><img src="img/5.jpg" id="img5"></li>
				<li><img src="img/6.jpg" id="img6"></li>
				<li><img src="img/7.jpg" id="img7"></li>
				<li><img src="img/8.jpg" id="img8"></li>
			</ul>
			<ul class="list2">
				<li><a href="#img1"><img src="img/1.jpg"></a></li>
				<li><a href="#img2"><img src="img/2.jpg"></a></li>
				<li><a href="#img3"><img src="img/3.jpg"></a></li>
				<li><a href="#img4"><img src="img/4.jpg"></a></li>
				<li><a href="#img5"><img src="img/5.jpg"></a></li>
				<li><a href="#img6"><img src="img/6.jpg"></a></li>
				<li><a href="#img7"><img src="img/7.jpg"></a></li>
				<li><a href="#img8"><img src="img/8.jpg"></a></li>
			</ul>
		</div>
	</body>
</html>

注意一下代码中的文件路径，不然的话，做出来不能显示图片。

3.img文件
里面存入8张图片，图片比例为1:1就行了。

结果展示。
在这里插入图片描述

蒙奇Dpzp

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
超简单：好看的电子相册制作！

文件层级参看我的另一篇文章https://blog.csdn.net/weixin_45512136/article/details/109085556直接进入正题1.index.css文件代码* { margin: 0; padding: 0;}.box { width: 100%; height: 100%;}.box img { width: 100%; height: 100%; position: fixed; transition: all 1s linear;
复制链接

扫一扫

专栏目录