文件层级参看我的另一篇文章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就行了。
结果展示。