CSS3水滴向下滴落动画效果
分类：实例代码
CSS3水滴向下滴落动画效果属于前端实例代码，有关更多实例代码大家可以查看。
本章节分享一段代码实例，它实现了水滴下落的拉伸效果。
不过看起来有一点点的邪恶，咱们就不去计较了，代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
body, html {
margin: 0;
background-color: #fff;
}
.content {
position: absolute;
z-index: 10;
}
.father {
position: absolute;
top: 0px;
bottom: 0px;
width: 100%;
background-color: #fff;
margin: -50px 0px;
-webkit-filter: contrast(100);
z-index: 1;
}
.big {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin: -100px -100px;
background-color: #f00;
border-radius: 50%;
-webkit-filter: blur(20px);
z-index: 100;
}
.small {
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 80px;
margin: 140px 0px;
background-color: #f00;
border-radius: 50%;
-webkit-filter: blur(20px);
animation-name: 'change1';
animation-duration: 5s;
animation-iteration-count: infinite;
}
.center {
position: absolute;
width: 40px;
height: 200px;
background-color: #f00;
-webkit-filter: blur(20px);
top: 50%;
left: 50%;
margin: -30px -70px;
animation-name: 'change2';
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes change1 {
0% {
margin: -85px -90px;
}
50% {
margin: 50px -90px;
}
100% {
margin: -85px -90px;
}
}
@-keyframes change2 {
0% {
height: 0px;
}
50% {
height: 100px;
}
100% {
height: 0px;
}
}
</style>
</head>
<body>
<div class="father">
<div class="center"></div>
<div class="big"></div>
<div class="small"></div>
</div>
</body>
</html>
CSS3水滴向下滴落动画效果，这样的场景在实际项目中还是用的比较多的，关于CSS3水滴向下滴落动画效果就介绍到这了。