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 水珠动图,CSS3 水滴和波浪动画图标的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 有关数字电视的几个概念（OTT/DVB/
- 下一篇： 如何解决下载链接在微信中无法打开的问题？