CSS
语言:
CSSSCSS
确定
body {
background-color: #31C5F3;
overflow: hidden;
}
div {
margin: 175px auto;
}
.wave {
position: relative;
opacity: 0;
top: 0;
width: 2px;
height: 0.5px;
border: #FFF 5px solid;
border-radius: 300px / 75px;
-webkit-animation: ripple 5s infinite;
-moz-animation: ripple 5s infinite;
animation: ripple 5s infinite;
}
.wave:after {
content: "";
position: absolute;
opacity: 0;
top: -5px;
left: -5px;
width: 2px;
height: 0.5px;
border: #FFF 3px solid;
border-radius: 300px / 75px;
-webkit-animation: ripple-2 5s infinite;
-moz-animation: ripple-2 5s infinite;
animation: ripple-2 5s infinite;
}
@keyframes ripple {
0% {
opacity: 1;
}
50% {
width: 600px;
height: 150px;
border-width: 1px;
top: -50px;
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes ripple-2 {
0% {
opacity: 1;
}
25% {
opacity: 0;
}
50% {
width: 200px;
height: 50px;
border-width: 1px;
top: 50px;
left: 200px;
}
100% {
opacity: 0;
}
}