html+css实现热点地图单页

Test
<!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)
