css3动态小地图

css3小地图：

一般先想好、布局思路。（或者先写着最后在修改）

<div class="bj">
    <div class="jb">
      <div class="bb"><p></p><span></span></div>
      <div class="bb1"><p></p><span></span></div>
      <div class="bb2"><p></p><span></span></div>
      <div class="bb3"><p></p><span></span></div>
      <div class="bb4"><p></p><span></span></div>
      <div class="bb5"><p></p><span></span></div>

在设定内联样式：（ 背景图片的大小）

 .bj{width: 100%;height: auto;background:url(img/2.jpg)center no-repeat;}
	  .bj .jb{width:700px;height: 700px; background:url(img/1.png)center no-repeat;position: relative;left: 500px;}

确定小圆位置和大小

bj .jb div{background:#009FD9;width: 10px;height: 10px;border-radius:50%;position: relative;}
	.bj .jb p{position: absolute;top:-15px; width: 10px;height: 10px;border-radius:50%;animation: myfirst 3s  infinite;box-shadow: 0px 0px 1px #009FD9; }
	.bj .jb span{position: absolute;display:block;width: 10px;height: 10px;border-radius:50%;animation: myfirst 3s infinite;box-shadow: 0px 0px 1px #009FD9; animation-delay:0.7s;}

动漫格式：（opacity是透明度）

@keyframes myfirst{
			20% {transform: scale(2); opacity: 0.5}
			40% {transform: scale(3);opacity: 0.6}
			60% {transform: scale(4);opacity: 0.7}
			80% {transform: scale(5);opacity: 0.8}
			100% {transform: scale(6);opacity: 0.9}

 @keyframes quan4 {
            0%{transform: scale(0);opacity: 1;}
            100%{transform: scale(1);opacity: 0;}

最后就是：（复制多个样式）

.bj .jb .bb{position: absolute;left:600px; top:100px;}
     .bj .jb .bb1{position: absolute;left: 320px;top: 350px;}
     .bj .jb .bb2{position: absolute;left:420px;top: 420px;}
     .bj .jb .bb3{position: absolute;left:500px;top: 300px;}
     .bj .jb .bb4{background:yellow;position: absolute;left:350px;top:400px;}
     .bj .jb .bb5{background:red;position: absolute;left:480px;top:380px;}

整体

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
	  .bj{width: 100%;height: auto;background:url(img/2.jpg)center no-repeat;}
	  .bj .jb{width:700px;height: 700px; background:url(img/1.png)center no-repeat;position: relative;left: 500px;}
	.bj .jb div{background:#009FD9;width: 10px;height: 10px;border-radius:50%;position: relative;}
	.bj .jb p{position: absolute;top:-15px; width: 10px;height: 10px;border-radius:50%;animation: myfirst 3s  infinite;box-shadow: 0px 0px 1px #009FD9; }
	.bj .jb span{position: absolute;display:block;width: 10px;height: 10px;border-radius:50%;animation: myfirst 3s infinite;box-shadow: 0px 0px 1px #009FD9; animation-delay:0.7s;}
     .bj .jb .bb{position: absolute;left:600px; top:100px;}
     .bj .jb .bb1{position: absolute;left: 320px;top: 350px;}
     .bj .jb .bb2{position: absolute;left:420px;top: 420px;}
     .bj .jb .bb3{position: absolute;left:500px;top: 300px;}
     .bj .jb .bb4{background:yellow;position: absolute;left:350px;top:400px;}
     .bj .jb .bb5{background:red;position: absolute;left:480px;top:380px;}


	@keyframes myfirst{
			20% {transform: scale(2); opacity: 0.5}
			40% {transform: scale(3);opacity: 0.6}
			60% {transform: scale(4);opacity: 0.7}
			80% {transform: scale(5);opacity: 0.8}
			100% {transform: scale(6);opacity: 0.9}
	</style>
</head>
<body>
  <div class="bj">
    <div class="jb">
      <div class="bb"><p></p><span></span></div>
      <div class="bb1"><p></p><span></span></div>
      <div class="bb2"><p></p><span></span></div>
      <div class="bb3"><p></p><span></span></div>
      <div class="bb4"><p></p><span></span></div>
      <div class="bb5"><p></p><span></span></div>
      

    </div>
  </div>
</body>
</html>

学到的: opacity; animation-duration 整体速度2s animation-delay 延迟

猜你喜欢