圖標閃爍CSS代碼
<!DOCTYPE html>
<html>
<head>
<style>
#markerDiv {
position: absolute;
float: left;
left: 20px;
top: 20px;
width: 38px;
height: 44px;
background: url(marker.png) no-repeat;
}
@-webkit-keyframes flicker {
0% {
-webkit-transform: scale(1.2, 1.2);
}
50% {
-webkit-transform: scale(.9, .9);
}
100% {
-webkit-transform: scale(1.2, 1.2);
}
}
@keyframes flicker {
0% {
transform: scale(1.2, 1.2);
}
50% {
transform: scale(.9, .9);
}
100% {
transform: scale(1.2, 1.2);
}
}
.flicker-animation {
animation: flicker 1.5s infinite linear;
-webkit-animation: flicker 1.5s infinite linear;
}
</style>
</head>
<body>
<div id="markerDiv" class="flicker-animation"></div>
</body>
</html>
用途
電子地圖marker閃爍效果
效果圖
