html5液体效果,HTML5/CSS3/SVG实现的液体掉落（滑落）动画

CSS

语言：

CSSSCSS

确定

@import url("https://fonts.googleapis.com/css?family=Raleway:300,700,900");

body {

background: #5444c4;

color: #FFF;

margin: 0;

font-family: 'Raleway', sans-serif;

text-align: center;

letter-spacing: 0.08em;

}

b {

font-size: 28px;

color: #FFF;

}

.container {

width: 300px;

height: 500px;

margin: 15px auto;

background: #6cd2ff;

overflow: hidden;

position: relative;

box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);

}

.text {

position: absolute;

left: 50%;

top: 45%;

transform: translate(-50%, -50%);

text-align: center;

color: #6cd2ff;

font-size: 64px;

font-weight: 900;

}

.liquid {

width: 120%;

height: 10px;

position: absolute;

top: -2%;

left: -10%;

background: #FFF;

border-radius: 10%;

animation: liquid 5s infinite;

}

.blobs {

filter: url("#goo");

width: 100%;

height: 100%;

position: relative;

}

.blobs .blob {

width: 30px;

height: 30px;

margin: 0 5px 0px 0;

background: #FFF;

border-radius: 50%;

position: absolute;

top: 0;

animation: drip_one 5s infinite;

}

.blobs .blob:nth-child(1) {

left: -14%;

}

.blobs .blob:nth-child(2) {

left: -1%;

}

.blobs .blob:nth-child(3) {

left: 12%;

}

.blobs .blob:nth-child(4) {

left: 25%;

}

.blobs .blob:nth-child(5) {

left: 38%;

}

.blobs .blob:nth-child(6) {

left: 51%;

}

.blobs .blob:nth-child(7) {

left: 64%;

}

.blobs .blob:nth-child(8) {

left: 77%;

}

.blobs .blob:nth-child(9) {

left: 90%;

}

.blobs .blob:nth-of-type(4n-7) {

width: 65px;

animation: drip_four 5s infinite;

}

.blobs .blob:nth-of-type(3n-2) {

width: 26px;

}

.blobs .blob:nth-of-type(2) {

width: 22px;

}

.blobs .blob:nth-of-type(8) {

animation: drip_five 5s infinite;

}

.blobs .blob:nth-of-type(4n+2) {

height: 56px;

animation: drip_two 5s infinite;

}

.blobs .blob:nth-of-type(6n-2) {

height: 42px;

animation: drip_three 5s infinite;

}

@keyframes drip_one {

from {

top: 0;

}

to {

top: 103%;

}

}

@keyframes drip_two {

from {

top: 0;

}

to {

top: 104%;

}

}

@keyframes drip_three {

from {

top: 0;

height: 52px;

}

to {

top: 102%;

height: 132px;

}

}

@keyframes drip_four {

from {

top: 0;

width: 65px;

height: 30px;

}

to {

top: 102%;

width: 75px;

height: 45px;

}

}

@keyframes drip_five {

from {

top: 0;

height: 30px;

}

to {

top: 102%;

height: 72px;

}

}

@keyframes liquid {

from {

height: 15px;

}

to {

height: 109%;

}

}