html背景飘汽水气泡,SVG 柠檬汽水和气泡

CSS

语言：

CSSSCSS

确定

body {

background: #FFABE1;

}

#drank {

width: 600px;

height: auto;

margin: 0 auto;

display: block;

}

.st0 {

fill: #E6E6E6;

}

.st1 {

fill: #8AB7FF;

}

.st2 {

fill: #BBFFE6;

}

.ice1,

.ice2,

.ice3 {

fill: #F8FFFC;

}

.st4 {

fill: #FAFBFB;

}

.st5 {

fill: #FFF48D;

}

.st6 {

fill: #FFF9D4;

}

.st7,

.bubble {

fill: #FFFFFF;

}

.b1 {

animation: bubble1 2000ms linear infinite;

-webkit-animation: bubble1 2000ms linear infinite;

animation-fill-mode: forwards;

}

.b2 {

animation: bubble2 2500ms linear infinite;

-webkit-animation: bubble2 2500ms linear infinite;

animation-fill-mode: forwards;

}

.b3 {

animation: bubble3 3000ms linear infinite;

-webkit-animation: bubble3 3000ms linear infinite;

animation-fill-mode: forwards;

}

.b4 {

animation: bubble4 3000ms linear infinite;

-webkit-animation: bubble4 3000ms linear infinite;

animation-fill-mode: forwards;

}

.b5 {

animation: bubble1 3500ms linear infinite;

-webkit-animation: bubble1 3500ms linear infinite;

animation-fill-mode: forwards;

}

.b6 {

animation: bubble3 4000ms linear infinite;

-webkit-animation: bubble3 4000ms linear infinite;

animation-fill-mode: forwards;

}

.b7 {

animation: bubble2 1800ms linear infinite;

-webkit-animation: bubble2 1800ms linear infinite;

animation-fill-mode: forwards;

}

.b8 {

animation: bubble1 3000ms linear infinite;

-webkit-animation: bubble1 3000ms linear infinite;

animation-fill-mode: forwards;

}

@keyframes bubble1 {

0% {

transform: translate3d(5px, 0, 0);

opacity: 0;

}

13% {

transform: translate3d(2px, -5px, 0);

opacity: 1;

}

20% {

transform: translate3d(5px, -15px, 0) scale(1);

}

30% {

transform: translate3d(4px, -20px, 0);

}

40% {

transform: translate3d(-2px, -30px, 0);

}

50% {

transform: translate3d(5px, -60px, 0);

}

60% {

transform: translate3d(-3px, -80px, 0px, 0);

}

70% {

transform: translate3d(5px, -100px, 0px, 0);

opacity: 0.4;

}

80%,

100% {

transform: translate3d(0, -150px, 0);

opacity: 0;

}

}

@-webkit-keyframes bubble1 {

0% {

transform: translate3d(5px, 0, 0);

opacity: 0;

}

13% {

transform: translate3d(2px, -5px, 0);

opacity: 1;

}

20% {

transform: translate3d(5px, -15px, 0) scale(1);

}

30% {

transform: translate3d(4px, -20px, 0);

}

40% {

transform: translate3d(-2px, -30px, 0);

}

50% {

transform: translate3d(5px, -60px, 0);

}

60% {

transform: translate3d(-3px, -80px, 0px, 0);

}

70% {

transform: translate3d(5px, -100px, 0px, 0);

opacity: 0.4;

}

80%,

100% {

transform: translate3d(0, -150px, 0);

opacity: 0;

}

}

@keyframes bubble2 {

0% {

transform: translate3d(5px, 0, 0);

opacity: 0;

}

13% {

transform: translate3d(2px, -10px, 0);

opacity: 1;

}

20% {

transform: translate3d(0px, -25px, 0) scale(1);

}

30% {

transform: translate3d(1px, -40px, 0);

}

40% {

transform: translate3d(-1px, -50px, 0);

}

50% {

transform: translate3d(2px, -70px, 0);

}

60% {

transform: translate3d(-1px, -100px, 0px, 0);

}

70% {

transform: translate3d(3px, -250px, 0px, 0);

opacity: 0.5;

}

80%,

100% {

transform: translate3d(0, -300px, 0);

opacity: 0;

}

}

@-webkit-keyframes bubble2 {

0% {

transform: translate3d(5px, 0, 0);

opacity: 0;

}

13% {

transform: translate3d(2px, -10px, 0);

opacity: 1;

}

20% {

transform: translate3d(0px, -25px, 0) scale(1);

}

30% {

transform: translate3d(1px, -40px, 0);

}

40% {

transform: translate3d(-1px, -50px, 0);

}

50% {

transform: translate3d(2px, -70px, 0);

}

60% {

transform: translate3d(-1px, -100px, 0px, 0);

}

70% {

transform: translate3d(3px, -250px, 0px, 0);

opacity: 0.5;

}

80%,

100% {

transform: translate3d(0, -300px, 0);

opacity: 0;

}

}

@keyframes bubble3 {

0% {

transform: translate3d(0px, 0, 0);

opacity: 0;

}

13% {

transform: translate3d(5px, -10px, 0);

opacity: 1;

}

20% {

transform: translate3d(2px, -25px, 0) scale(1);

}

30% {

transform: translate3d(2px, -40px, 0);

}

40% {

transform: translate3d(-5px, -50px, 0);

}

50% {

transform: translate3d(-1px, -70px, 0);

}

60% {

transform: translate3d(6px, -100px, 0px, 0);

}

70% {

transform: translate3d(-3px, -200px, 0px, 0);

opacity: 0.5;

}

80%,

100% {

transform: translate3d(5px, -250px, 0);

opacity: 0;

}

}

@-webkit-keyframes bubble3 {

0% {

transform: translate3d(0px, 0, 0);

opacity: 0;

}

13% {

transform: translate3d(5px, -10px, 0);

opacity: 1;

}

20% {

transform: translate3d(2px, -25px, 0) scale(1);

}

30% {

transform: translate3d(2px, -40px, 0);

}

40% {

transform: translate3d(-5px, -50px, 0);

}

50% {

transform: translate3d(-1px, -70px, 0);

}

60% {

transform: translate3d(6px, -100px, 0px, 0);

}

70% {

transform: translate3d(-3px, -200px, 0px, 0);

opacity: 0.5;

}

80%,

100% {

transform: translate3d(5px, -250px, 0);

opacity: 0;

}

}

@keyframes bubble4 {

0% {

transform: translate3d(0px, 0, 0);

opacity: 0;

}

13% {

transform: translate3d(2px, 0px, 0);

opacity: 1;

}

20% {

transform: translate3d(0px, 0px, 0) scale(1);

}

30% {

transform: translate3d(2px, -40px, 0);

}

40% {

transform: translate3d(-5px, -50px, 0);

}

50% {

transform: translate3d(-1px, -70px, 0);

}

60% {

transform: translate3d(6px, -100px, 0px, 0);

}

70% {

transform: translate3d(-3px, -250px, 0px, 0);

opacity: 0.5;

}

80%,

100% {

transform: translate3d(5px, -300px, 0);

opacity: 0;

}

}

@-webkit-keyframes bubble4 {

0% {

transform: translate3d(0px, 0, 0);

opacity: 0;

}

13% {

transform: translate3d(2px, 0px, 0);

opacity: 1;

}

20% {

transform: translate3d(0px, 0px, 0) scale(1);

}

30% {

transform: translate3d(2px, -40px, 0);

}

40% {

transform: translate3d(-5px, -50px, 0);

}

50% {

transform: translate3d(-1px, -70px, 0);

}

60% {

transform: translate3d(6px, -100px, 0px, 0);

}

70% {

transform: translate3d(-3px, -250px, 0px, 0);

opacity: 0.5;

}

80%,

100% {

transform: translate3d(5px, -300px, 0);

opacity: 0;

}

}