css svg伸展动画,CSS和SVG小动画

css

body {

font-family: Lato, sans-serif;

--col-deepblue: #4478e3;

}

footer {

width:100vw;

position:fixed;

bottom:0px

}

footer div {

background-color: var(--col-deepblue);

margin: -5px 0px 0px 0px;

padding:0px;

color: #fff;

text-align:center;

}

svg {

width:100%;

overflow:visible;

}

.wave {

animation: wave 3s linear;

animation-iteration-count:infinite;

fill: #4478e3;

}

.drop {

fill: var(--col-deepblue);

xfill: #99000055;

animation: drop 3.2s linear infinite normal;

stroke: var(--col-deepblue);

stroke-width:0.5;

transform: translateY(25px) ;

transform-box: fill-box;

transform-origin: 50% 100%;

}

.drop1 {

}

.drop2 {

animation-delay: 3s;

animation-duration:3s;

}

.drop3 {

animation-delay: -2s;

animation-duration:3.4s;

}

.drop4 {

animation-delay: 1.7s;

}

.drop5 {

animation-delay: 2.7s;

animation-duration:3.1s;

}

.drop6 {

animation-delay: -2.1s;

animation-duration:3.2s;

}

.gooeff {

filter: url(#goo);

}

#wave2 {

animation-duration:5s;

animation-direction: reverse;

opacity: .6

}

#wave3 {

animation-duration: 7s;

opacity:.3;

}

@keyframes drop {

0% {

transform: translateY(25px);

}

30% {

transform: translateY(-10px) scale(.1);

}

30.001% {

transform: translateY(25px) scale(1);

}

70% {

transform: translateY(25px);

}

100% {

transform: translateY(-10px) scale(.1);

}

}

@keyframes wave {

to {transform: translateX(-100%);}

}

@keyframes ball {

to {transform: translateY(20%);}

}