css3动画：分享css3水滴动画特效代码
随着CSS3的功能越来越强大，很多做网站的站长都使用css3做网站动画。下面是一个通过CSS3水滴动画特效，很好看。可以直接拿去用于网页制作。
效果如下：
代码如下：
- 在网页的head部分引入以下的css文件；
<style>
body {
background-color: #3498DB;
overflow: hidden;
}
div {
margin: 175px auto;
}
.drop {
position: relative;
width: 20px;
height: 20px;
top: -30px;
margin: 0 auto;
background: #FFF;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-animation-name: drip;
-webkit-animation-name: drip;
animation-name: drip;
-moz-animation-timing-function: cubic-bezier(1,0,.91,.19);
-webkit-animation-timing-function: cubic-bezier(1,0,.91,.19);
animation-timing-function: cubic-bezier(1,0,.91,.19);
-moz-animation-duration: 2s;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.drop:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 30px solid rgba(255,255,255,1);
top: -22px;
}
.wave {
position: relative;
opacity: 0;
top: 0;
width: 2px;
height: 1px;
border: #FFF 7px solid;
-moz-border-radius: 300px / 150px;
-webkit-border-radius: 300px / 150px;
border-radius: 300px / 150px;
-moz-animation-name: ripple;
-webkit-animation-name: ripple;
animation-name: ripple;
-moz-animation-delay: 2s;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-moz-animation-duration: 2s;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.wave:after {
content: "";
position: absolute;
opacity: 0;
top: -5px;
left: -5px;
width: 2px;
height: 1px;
border: #FFF 5px solid;
-moz-border-radius: 300px / 150px;
-webkit-border-radius: 300px / 150px;
border-radius: 300px / 150px;
-moz-animation-name: ripple-2;
-webkit-animation-name: ripple-2;
animation-name: ripple-2;
-moz-animation-duration: 2s;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes ripple {
from {
opacity: 1;
}
to {
width: 600px;
height: 300px;
border-width: 1px;
top: -100px;
opacity: 0;
}
}
@keyframes ripple-2 {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
width: 200px;
height: 100px;
border-width: 1px;
top: 100px;
left: 200px;
}
}
@keyframes drip {
to {
top: 190px;
}
}
</style> - 使用以下的HTML代码在网页上引入动画。
<div class="drop"></div>
<div class="wave"></div>
