css 水珠动图,CSS3 水滴和波浪动画图标
CSS
语言：
CSSSCSS
确定
body {
background: #0a6a8d;
}
h2,
p {
text-align: center;
text-transform: uppercase;
font-family: Arial;
font-size: 22px;
color: #cdeffc;
}
p {
font-size: 10px;
}
.rain {
margin: 80px auto 0;
width: 150px;
height: 150px;
position: relative;
}
.rain:before {
content: "";
position: absolute;
margin: auto;
font-size: 0;
width: 0;
hieght: 0;
top: -81px;
left: 0;
right: 0;
z-index: 99;
border: 50px transparent solid;
border-bottom: 50px #f2f2f2 solid;
}
.mod {
font-family: arial black;
width: inherit;
height: inherit;
background: #f2f2f2;
border-radius: 50%;
font-size: 600px;
overflow: hidden;
position: relative;
}
.mod span:nth-child(1) {
position: absolute;
-webkit-animation: seamc01 6s linear infinite alternate;
animation: seamc01 6s linear infinite alternate;
color: rgba(62, 193, 242, 0.8);
display: block;
line-height: 250px;
text-indent: -30px;
z-index: 3;
}
.mod span:nth-child(2) {
position: absolute;
-webkit-animation: seamc02 8s linear infinite alternate;
animation: seamc02 8s linear infinite alternate;
color: #9ee0f8;
display: block;
line-height: 250px;
text-indent: -200px;
z-index: 1;
}
.mod span:nth-child(3) {
position: absolute;
-webkit-animation: seamc03 4s linear infinite alternate;
animation: seamc03 4s linear infinite alternate;
color: rgba(255, 255, 255, 0.7);
display: block;
line-height: 280px;
text-indent: -30px;
z-index: 4;
}
@-webkit-keyframes seamc01 {
to {
text-indent: -200px;
}
}
@-webkit-keyframes seamc02 {
to {
text-indent: -30px;
}
}
@-webkit-keyframes seamc03 {
to {
text-indent: -150px;
}
}
@keyframes seamc01 {
to {
text-indent: -200px;
}
}
@keyframes seamc02 {
to {
text-indent: -30px;
}
}
@keyframes seamc03 {
to {
text-indent: -150px;
}
}
CSS 语言： CSSSCSS 确定 body { background: #0a6a8d; } h2, p { text-align: center; text-transform: uppercase; font-family: Arial; font-size: 22px; color: #cdeffc; } p { font-size: 10px; } .rain { margin: 80px auto 0; width: 150px; height: 150px; position: relative; } .rain:before { content: ""; position: absolute; margin: auto; font-size: 0; width: 0; hieght: 0; top: -81px; left: 0; right: 0; z-index: 99; border: 50px transparent solid; border-bottom: 50px #f2f2f2 solid; } .mod { font-family: arial black; width: inherit; height: inherit; background: #f2f2f2; border-radius: 50%; font-size: 600px; overflow: hidden; position: relative; } .mod span:nth-child(1) { position: absolute; -webkit-animation: seamc01 6s linear infinite alternate; animation: seamc01 6s linear infinite alternate; color: rgba(62, 193, 242, 0.8); display: block; line-height: 250px; text-indent: -30px; z-index: 3; } .mod span:nth-child(2) { position: absolute; -webkit-animation: seamc02 8s linear infinite alternate; animation: seamc02 8s linear infinite alternate; color: #9ee0f8; display: block; line-height: 250px; text-indent: -200px; z-index: 1; } .mod span:nth-child(3) { position: absolute; -webkit-animation: seamc03 4s linear infinite alternate; animation: seamc03 4s linear infinite alternate; color: rgba(255, 255, 255, 0.7); display: block; line-height: 280px; text-indent: -30px; z-index: 4; } @-webkit-keyframes seamc01 { to { text-indent: -200px; } } @-webkit-keyframes seamc02 { to { text-indent: -30px; } } @-webkit-keyframes seamc03 { to { text-indent: -150px; } } @keyframes seamc01 { to { text-indent: -200px; } } @keyframes seamc02 { to { text-indent: -30px; } } @keyframes seamc03 { to { text-indent: -150px; } }