<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
/* 1.定义动画 */
/* */
@keyframes pulse{
%0{}
70%{width: 40px;
height: 40px;
opacity: 1;}
100%{
width: 70px;
height: 70px;
opacity: 0;
}
}
/* 2.元素使用动画 */
.box{
position: absolute;
top: 100px;
left:100px;
background-color: #09dfd;
/* margin: 50px auto; */
}
.map{
width: 8px;
height: 8px;
background-color: aqua;
border-radius:50% ;
position: absolute;
left:-4px;
top:-4px;
/* margin: 50px auto; */
}
.box div[class^="pulse"]{
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
width: 8px;
height: 8px;
box-shadow:0 0 12px #009dfd;
border-radius:50% ;
animation: pulse 1.2s linear infinite;
}
.pulse2{
animation-delay: 0.4s!important;
}
.box div .pulse3{
animation-delay: 0.8s;
}
</style>
<body>
<div class="box">
<div class="map"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</body>
</html>
``
`
03-25
886
886
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
