先看效果
代码如下
HTML
<div class="maps-box">
<div class="kongzhi">
<a class="a1" href="#img1"><span>01.</span></a>
<a class="a2" href="#img2"><span>02.</span></a>
<a class="a3" href="#img3"><span>03.</span></a>
<a class="a4" href="#img4"><span>04.</span></a>
</div>
<div class="map">
<img class="cs-img" src="./img/无畏契约/map1.png" /><span
class="cs-span"> Ascent:亚海悬城</span>
<p id="img1"><img
src="./img/无畏契约/map1.png" /><span> Ascent:
亚海悬城</span></p>
<p id="img2"><img
src="./img/无畏契约/map2.png" /><span> Bind:
源工重镇</span></p>
<p id="img3"><img
src="./img/无畏契约/map3.png" /><span> Haven:
隐世修所</span></p>
<p id="img4"><img
src="./img/无畏契约/map4.png" /><span> Split:
霓虹町</span></p>
<div class="m5-mask"></div>
</div>
</div>
CSS
.mps-box {
width: 1482px;
margin: 0 auto 0;
position: relative;
}
.kongzhi {
position: absolute;
height: 20px;
top: 880px;
z-index: 10;
}
.maps-box a {
width: 60px;
height: 6px;
display: inline-block;
border: 1px solid #000;
z-index: 999;
border-radius: 5px;
}
.kongzhi a span {
position: absolute;
top: -40px;
font-family: DINMedium;
font-size: 40px;
color: #000;
opacity: 0;
}
.kongzhi a:hover span {
opacity: 1;
transition: 0.5s;
}
.kongzhi a:hover {
background-color: #ff4655;
transition: 0.5s;
}
.map p {
width: 1184px;
height: 664px;
margin-top: -50px;
margin-left: 135px;
position: absolute;
display: none;
z-index: 8;
}
.map p:target {
display: block;
}
.map {
width: 1184px;
height: 664px;
position: relative;
}
.m5-mask {
position: absolute;
top: 0;
left: 0;
margin-top: -50px;
margin-left: 135px;
width: 1184px;
height: 100%;
pointer-events: none;
z-index: 9;
}
.m5-mask::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
background: url(../img/无畏契约/m5-mask.png);
width: 888px;
height: 222px;
}
.map p span {
position: absolute;
right: -75px;
bottom: 0;
display: block;
width: 370px;
height: 95px;
background-color: #8b978f;
color: #ece8e1;
font-size: 20px;
line-height: 95px;
clip-path: polygon(0 0, calc(100% - 12px) 0, calc(100% - 12px) 12px, 100% 12px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
.cs-img {
width: 1184px;
height: 664px;
margin-top: -50px;
margin-left: 135px;
position: absolute;
z-index: 7;
}
.cs-span {
position: absolute;
right: -210px;
bottom: 50px;
display: block;
width: 370px;
height: 95px;
background-color: #8b978f;
color: #ece8e1;
font-size: 20px;
line-height: 95px;
z-index: 7;
clip-path: polygon(0 0, calc(100% - 12px) 0, calc(100% - 12px) 12px, 100% 12px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}