水波
2018-09-14 本文已影响6人
tingshuo123
<!DOCTYPE html>
<html>
<head>
<title>分隔线</title>
<style type="text/css">
.outer {
width: 400px;
height: 400px;
position: relative;
overflow: hidden;
}
.outer .item {
position: absolute;;
border-radius: 50%;
opacity: 0;
/*波纹效果*/
width: calc(150% - 6px);
height: calc(150% - 6px);
border: 3px solid gray;
}
.outer .item:first-child {
animation: anim 4s infinite;
}
.outer .item:nth-child(2) {
animation: anim 4s infinite;
animation-delay: .8s;
}
.outer .item:nth-child(3) {
animation: anim 4s infinite;
animation-delay: 1.6s;
}
.outer .item:nth-child(4) {
animation: anim 4s infinite;
animation-delay: 2.4s;
}
.outer .item:nth-child(5) {
animation: anim 4s infinite;
animation-delay: 3.2s;
}
.outer .item:nth-child(6) {
animation: anim 4s infinite;
animation-delay: 4s;
}
@keyframes anim {
from {
opacity: 1;
transform: scale(0);
}
to {
opacity: 0;
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="outer">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
