css 水珠动图,使用CSS3实现的水滴涟漪动画
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;
}
}
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; } }