

.leaflet-marker-icon{
  background-size: 100%;
}
.icon1{
  background-image: url("../image/icon/1.png");
}
.icon2{
  background-image: url("../image/icon/2.png");
}
.icon3{
  background-image: url("../image/icon/3.png");
}
.icon4{
  background-image: url("../image/icon/4.png");
}
.icon5{
  background-image: url("../image/icon/5.png");
}
.icon6{
  background-image: url("../image/icon/6.png");
}
.icon7{
  background-image: url("../image/icon/7.png");
}
.icon8{
  background-image: url("../image/icon/8.png");
}


.cartoon{
  animation: myfirst 2s linear infinite;
  border: 5px solid red;
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
@keyframes myfirst
{
  0% {
    border-color: red;
  }
  50% {
    border-color: blue;
  }
  100% {
    border-color: red;
  }
}


.iconhover1{
  background-image: url("../image/icon/1.png");
  animation: iconhover1 1.5s linear infinite;
}
.iconhover2{
  background-image: url("../image/icon/2.png");
  animation: iconhover2 1.5s linear infinite;
}
.iconhover3{
  background-image: url("../image/icon/3.png");
  animation: iconhover3 1.5s linear infinite;
}
.iconhover4{
  background-image: url("../image/icon/4.png");
  animation: iconhover4 1.5s linear infinite;
}

.iconhover5{
  background-image: url("../image/icon/5.png");
  animation: iconhover5 1.5s linear infinite;
}
.iconhover6{
  background-image: url("../image/icon/6.png");
  animation: iconhover6 1.5s linear infinite;
}
.iconhover7{
  background-image: url("../image/icon/7.png");
  animation: iconhover7 1.5s linear infinite;
}
.iconhover8{
  background-image: url("../image/icon/8.png");
  animation: iconhover8 1.5s linear infinite;
}


.donghua(@num){
  0% {
    background-image: url("../image/icon/@{num}.png");
  }
  50% {
    background-image: url("../image/icon/@{num}hover.png");
  }
  100% {
    background-image: url("../image/icon/@{num}.png");
  }
}

@keyframes iconhover1
{
  .donghua(1);
}
@keyframes iconhover2
{
  .donghua(2);
}
@keyframes iconhover3
{
  .donghua(3);
}
@keyframes iconhover4
{
  .donghua(4);
}

@keyframes iconhover5
{
  .donghua(5);
}
@keyframes iconhover6
{
  .donghua(6);
}
@keyframes iconhover7
{
  .donghua(7);
}
@keyframes iconhover8
{
  .donghua(8);
}


.jump{
  margin-top: -35px;
  animation: jump 1s linear infinite;
  animation-direction:alternate;
  -webkit-animation-direction:alternate; /* Safari 和 Chrome */
}

@keyframes jump{
  0%{ margin-top: -35px; }
  25%{margin-top: -31px;  }
  50%{ margin-top: -27px; }
  75%{ margin-top: -31px; }
  100%{ margin-top: -35px; }
}
