<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.map {
position: relative;
width: 900px;
height: 600px;
background: url(./map.jpeg) no-repeat;
background-size: 900px 600px;
}
.map .point {
position: absolute;
top: 193px;
right: 242px;
width: 20px;
height: 20px;
/* background-color: red; */
}
.map .point .center {
position: absolute;
/* 让中心小蓝点水平垂直居中 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
background-color: red;
border-radius: 50%;
}
.point div[class^='circle'] {
position: absolute;
/* 水平垂直居中 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
border-radius: 50%;
box-shadow: 0 0 5px red;
animation: move 1s linear infinite;
}
.map .point .circle2 {
animation-delay: 0.4s;
}
@keyframes move {
0% {}
70% {
width: 15PX;
height: 15px;
opacity: 1;
}
100% {
width: 20px;
height: 20px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="map">
<div class="point">
<div class="center"></div>
<div class="circle1"></div>
<div class="circle2"></div>
</div>
</div>
</body>
</html>
【案例】animation动画
最新推荐文章于 2023-10-26 17:55:23 发布