搜索到
1
篇与
热点地图
的结果
-
html+css实现热点地图单页 <!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>下面附上成品{cloud title="源码下载" type="lz" url="https://beginner.lanzouf.com/i1hRL03smxif" password=""/}
