<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
.circleBox{
position: relative;
width:100px;
height:100px;
top:100px;
left:50%;
}
.circle{
width:100px;
height:100px;
position: absolute;
}
.dot{
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
width:10px;
height:10px;
background: #00cdec;
border-radius:50%;
}
.circle:after{
position: absolute;
content:"";
display:block;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
border:1px solid #00cdec;
width:100%;
height:100%;
border-radius:50%;
box-shadow: inset 0 0 5em rgba(0,205,236,.16);
opacity: 0;
}
.circle1:after{
-webkit-animation: mymove 4.5s ease-out 200ms infinite;
-o-animation: mymove 4.5s ease-out 200ms infinite;
animation: mymove 4.5s ease-out 200ms infinite;
}
.circle2:after{
-webkit-animation: mymove 4.5s ease-out 1725ms infinite;
-o-animation: mymove 4.5s ease-out 1725ms infinite;
animation: mymove 4.5s ease-out 1725ms infinite;
}
.circle3:after{
-webkit-animation: mymove 4.5s ease-out 3225ms infinite;
-o-animation: mymove 4.5s ease-out 3225ms infinite;
animation: mymove 4.5s ease-out 3225ms infinite;
}
@keyframes mymove {
from {width:0px;height:0px;opacity: 1;}
to {width:100px;height:100px;opacity: 0;}
}
</style>
</head>
<body>
<div class="circleBox">
<div class="dot"></div>
<div class="circle1 circle"></div>
<div class="circle2 circle"></div>
<div class="circle3 circle"></div>
</div>
<script
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script type="text/javascript">
</script>
</body>
</html>
WEB前端学习交流群21 598399936
WEB前端学习交流群21 598399936
