<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>热点地图</title>
<style type="text/css">
.content{
position:relative;
}
.content div{
width:1087px;
height:721px;
background-image:url(images/map.jpg);
background-size:cover;
position:absolute;
top:120px;
left:50%;
transform:translateX(-50%);
}
/*确定四个圆点的位置start*/
.content>div .city1{
position:absolute;
top:220px;
left:440px;
}
.content>div .city2{
position:absolute;
top:120px;
left:300px;
}
.content>div .city3{
position:absolute;
top:180px;
left:872px;
}
.content>div .city4{
position:absolute;
top:486px;
left:1000px;
}
/*确定四个圆点的位置end*/
/*设置圆点的样式start*/
.content>div span[class^=city] .dotted{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:12px;
height:12px;
background-color:#F06;
border-radius: 50%;
}
.content>div span[class^=city] span[class^=pulse]{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:12px;
height:12px;
border-radius: 50%;
box-shadow:0 0 15px #F06;
animation:trans 1s linear infinite;
}
@keyframes trans{
0%{
}
50%{
width:80px;
height:45px;
opacity:0.8;
}
100%{
width:80px;
height:80px;
opacity:0;
}
}
.content>div span[class^=city] .pulse2{
animation-delay:0.5s !important;
}
.content>div span[class^=city] .pulse3{
animation-delay:1s !important;
}
/*设置圆点的样式end*/
/*设置图片跳动样式start*/
.content>div a span[class^=square]{
position:absolute;
width:110px;
height:110px;
}
.content>div a .square1{
position:absolute;
top:180px;
left:480px;
background-image:url(images/2.jpeg);
background-size:cover;
animation:move 2s linear infinite;
border-radius:25px;
}
.content>div a .square2{
position:absolute;
top:80px;
left:150px;
background-image:url(images/3.jpeg);
background-size:cover;
animation:move 2s linear infinite;
border-radius:25px;
}
.content>div a .square3{
position:absolute;
top:140px;
left:724px;
background-image:url(images/4.jpeg);
background-size:cover;
animation:move 2s linear infinite;
border-radius:25px;
}
.content>div a .square4{
position:absolute;
top:350px;
left:1000px;
background-image:url(images/5.jpeg);
background-size:cover;
animation:move 2s linear infinite;
border-radius:25px;
}
@keyframes move{
0%{
transform:translateY(10px);
}
50%{
transform:translateY(-10px);
}
100%{
transform:translateY(10px);
}
}
/*设置图片跳动样式end*/
</style>
</head>
<body>
<div class="content">
<div>
<span class="city1">
<span class="dotted"></span>
<span class="pulse1"></span>
<span class="pulse2"></span>
<span class="pulse3"></span>
</span>
<span class="city2">
<span class="dotted"></span>
<span class="pulse1"></span>
<span class="pulse2"></span>
<span class="pulse3"></span>
</span>
<span class="city3">
<span class="dotted"></span>
<span class="pulse1"></span>
<span class="pulse2"></span>
<span class="pulse3"></span>
</span>
<span class="city4">
<span class="dotted"></span>
<span class="pulse1"></span>
<span class="pulse2"></span>
<span class="pulse3"></span>
</span>
<a href="#">
<span class="square1" style="--i:1"></span>
</a>
<a href="#">
<span class="square2" style="--i:2"></span>
</a>
<a href="#">
<span class="square3" style="--i:3"></span>
</a>
<a href="#">
<span class="square4" style="--i:4"></span>
</a>
</div>
</div>
</body>
</html>
下面附上成品
评论 (0)