HTML：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>0002</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/reset.css">
</head>
<body>
<div class="box">
<ul class="slider">
<li><a href="#bg1">周一</a></li>
<li><a href="#bg2">周二</a></li>
<li><a href="#bg3">周三</a></li>
<li><a href="#bg4">周四</a></li>
<li><a href="#bg5">周五</a></li>
</ul>
<img src="./image/wind.jpg" alt="周一" class="bg slideLeft" id="bg1">
<img src="./image/thunderstorm.jpg" alt="周二" class="bg slideBottom" id="bg2">
<img src="./image/darkclouds.jpg" alt="周三" class="bg zoomInt" id="bg3">
<img src="./image/snow.jpg" alt="周四" class="bg zoomOut" id="bg4">
<img src="./image/spring.jpg" alt="周五" class="bg rotate" id="bg5">
</div>
</body>
</html>
CSS：
/* 樣式 */
a:link,a:visited{
text-decoration: none;
}
.box{
width: 1075px;
height: 535px;
margin: 20px auto;
position: relative;
background-color: rgb(247, 39, 39);
z-index: 2;
}
.bg{
width: 1075px;
height: 535px;
position: absolute;
z-index: 1;
}
.slider{
position: absolute;
bottom: 100px;
width: 100%;
text-align: center;
z-index: 9999;
}
.slider li{
display: inline-block;
width: 170px;
height: 130px;
margin-right: 15px;
}
.slider a{
width: 170px;
font-size: 22px;
color: #fff;
display: inline-block;
padding-top: 70px;
padding-bottom: 20px;
border: 2px solid #fff;
border-radius: 5px;
position: relative;
cursor: pointer;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8)
-2px -2px 1px rgba(0, 0, 0, 0.3)
-3px -3px 1px rgba(0, 0, 0, 0.3);
}
.slider li:nth-of-type(1) a{
background-color: #9d907f;
}
.slider li:nth-of-type(2) a{
background-color: #19425e;
}
.slider li:nth-of-type(3) a{
background-color: #58a180;
}
.slider li:nth-of-type(4) a{
background-color: #a1c64a;
}
.slider li:nth-of-type(5) a{
background-color: #ffc130;
}
.slider a::after{
content: "";
display: block;
height: 120px;
width: 120px;
border: 5px solid #fff;
border-radius: 50%;
position: absolute;
left: 50%;
top: -80px;
z-index: 9999;
margin-left: -65px;
}
.slider li:nth-of-type(1) a::after{
background: url(../image/wind.jpg) no-repeat center;
}
.slider li:nth-of-type(2) a::after{
background: url(../image/thunderstorm.jpg) no-repeat center;
}
.slider li:nth-of-type(3) a::after{
background: url(../image/darkclouds.jpg) no-repeat center;
}
.slider li:nth-of-type(4) a::after{
background: url(../image/snow.jpg) no-repeat center;
}
.slider li:nth-of-type(5) a::after{
background: url(../image/spring.jpg) no-repeat center;
}
.slider a::before{
content: "";
display: block;
width: 120px;
height: 120px;
border: 5px solid #fff;
border-radius: 50%;
position: absolute;
left: 50px;
top: -80px;
margin-left: -30px;
z-index: 10000;
background-color: rgba(0, 0, 0,0.3);
}
.slider a:hover::before{
opacity: 0;
}
/* 動畫 */
@keyframes slideLeft {
0%{
left: -500px;
}
100%{
left: 0;
}
}
.slideLeft:target{
z-index: 100;
animation: slideLeft 1s 1;
}
@keyframes slideBottom {
0%{
top: -350px;
}
100%{
top: 0;
}
}
.slideBottom:target{
z-index: 100;
animation: slideBottom 1s 1;
}
@keyframes zoomInt {
0%{
transform: scale(0.1);
}
100%{
transform: none;
}
}
.zoomInt:target{
z-index: 100;
animation: zoomInt 1s 1;
}
@keyframes zoomOut {
0%{
transform: scale(2);
}
100%{
transform: none;
}
}
.zoomOut:target{
z-index: 100;
animation: zoomOut 1s 1;
}
@keyframes rotate {
0%{
transform: scale(0.1) rotate(-360deg);
}
100%{
transform: none;
}
}
.rotate:target{
z-index: 100;
animation: rotate 1s 1;
}
@keyframes noTarget {
0%{
z-index: 75;
}
100%{
z-index: 75;
}
}
.bg:not(:target){
animation: notTarget 1s 1;
}
效果圖：
