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;

}

}