css动画 实验,CSS3 化学实验容器动画

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

font-family: arial;

}

body {

background-color: #191f26;

padding: 0;

margin: 0;

text-align: center;

font-family: arial;

color: #fff;

/*=============================*/

}

.jar {

position: relative;

width: 200px;

margin: 100px auto 0;

text-align: center;

}

.jar .mouth {

width: 40px;

height: 10px;

margin: 0 auto -1px;

border-right: 4px solid #fff;

border-left: 4px solid #fff;

-moz-border-radius: 20px;

-webkit-border-radius: 20px;

border-radius: 20px;

}

.jar .neck {

width: 35px;

height: 45px;

margin: 0 auto -5px;

z-index: 7;

position: relative;

background-color: #191f26;

border-right: 4px solid #fff;

border-left: 4px solid #fff;

}

.jar .bubble {

width: 10px;

height: 10px;

position: absolute;

background-color: #35eefb;

opacity: 0.4;

left: 92px;

z-index: 8;

top: 110px;

-moz-border-radius: 100%;

-webkit-border-radius: 100%;

border-radius: 100%;

-moz-animation: buble 2s linear 1s infinite;

-webkit-animation: buble 2s linear 1s infinite;

animation: buble 2s linear 1s infinite;

}

.jar .bubble + .bubble {

left: 87px;

top: 120px;

width: 15px;

height: 15px;

-moz-animation-duration: 3s;

-webkit-animation-duration: 3s;

animation-duration: 3s;

}

.jar .base {

margin: auto;

width: 120px;

height: 100px;

border: 4px solid #fff;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

overflow: hidden;

position: relative;

z-index: 5;

}

.jar .base .bubble {

left: 15px;

top: 50px;

-moz-animation: bounce 2.3s linear 0s infinite alternate;

-webkit-animation: bounce 2.3s linear 0s infinite alternate;

animation: bounce 2.3s linear 0s infinite alternate;

}

.jar .base .bubble + .bubble {

left: 75px;

top: 40px;

-moz-animation-duration: 3s;

-webkit-animation-duration: 3s;

animation-duration: 3s;

}

.jar .liquid {

height: 40px;

background-color: #35eefb;

position: absolute;

bottom: 0;

left: 0;

right: 0;

}

.jar .wave {

width: 60px;

height: 20px;

position: absolute;

background-color: #35eefb;

left: 0;

top: 50px;

-moz-animation: wave 1s linear 1s infinite alternate;

-webkit-animation: wave 1s linear 1s infinite alternate;

animation: wave 1s linear 1s infinite alternate;

-moz-border-radius: 50%;

-webkit-border-radius: 50%;

border-radius: 50%;

}

.jar .wave + .wave {

left: auto;

right: 0;

}

@-moz-keyframes wave {

from {

-moz-transform: translateX(100px);

transform: translateX(100px);

}

to {

-moz-transform: translateX(-100px);

transform: translateX(-100px);

}

}

@-webkit-keyframes wave {

from {

-webkit-transform: translateX(100px);

transform: translateX(100px);

}

to {

-webkit-transform: translateX(-100px);

transform: translateX(-100px);

}

}

@keyframes wave {

from {

-moz-transform: translateX(100px);

-ms-transform: translateX(100px);

-webkit-transform: translateX(100px);

transform: translateX(100px);

}

to {

-moz-transform: translateX(-100px);

-ms-transform: translateX(-100px);

-webkit-transform: translateX(-100px);

transform: translateX(-100px);

}

}

@-moz-keyframes bounce {

0% {

-moz-transform: translate(5px, 15px);

transform: translate(5px, 15px);

}

50% {

-moz-transform: translate(0, -15px);

transform: translate(0, -15px);

}

100% {

-moz-transform: translate(-5px, -37px);

transform: translate(-5px, -37px);

opacity: 1;

}

}

@-webkit-keyframes bounce {

0% {

-webkit-transform: translate(5px, 15px);

transform: translate(5px, 15px);

}

50% {

-webkit-transform: translate(0, -15px);

transform: translate(0, -15px);

}

100% {

-webkit-transform: translate(-5px, -37px);

transform: translate(-5px, -37px);

opacity: 1;

}

}

@keyframes bounce {

0% {

-moz-transform: translate(5px, 15px);

-ms-transform: translate(5px, 15px);

-webkit-transform: translate(5px, 15px);

transform: translate(5px, 15px);

}

50% {

-moz-transform: translate(0, -15px);

-ms-transform: translate(0, -15px);

-webkit-transform: translate(0, -15px);

transform: translate(0, -15px);

}

100% {

-moz-transform: translate(-5px, -37px);

-ms-transform: translate(-5px, -37px);

-webkit-transform: translate(-5px, -37px);

transform: translate(-5px, -37px);

opacity: 1;

}

}

@-moz-keyframes buble {

0% {

-moz-transform: translate(3px, 10px);

transform: translate(3px, 10px);

}

25% {

-moz-transform: translate(0, 0px);

transform: translate(0, 0px);

}

50% {

-moz-transform: translate(-3px, -25px);

transform: translate(-3px, -25px);

}

75% {

-moz-transform: translate(0, -50px);

transform: translate(0, -50px);

opacity: 1;

}

100% {

-moz-transform: translate(3px, -100px);

transform: translate(3px, -100px);

opacity: 0;

}

}

@-webkit-keyframes buble {

0% {

-webkit-transform: translate(3px, 10px);

transform: translate(3px, 10px);

}

25% {

-webkit-transform: translate(0, 0px);

transform: translate(0, 0px);

}

50% {

-webkit-transform: translate(-3px, -25px);

transform: translate(-3px, -25px);

}

75% {

-webkit-transform: translate(0, -50px);

transform: translate(0, -50px);

opacity: 1;

}

100% {

-webkit-transform: translate(3px, -100px);

transform: translate(3px, -100px);

opacity: 0;

}

}

@keyframes buble {

0% {

-moz-transform: translate(3px, 10px);

-ms-transform: translate(3px, 10px);

-webkit-transform: translate(3px, 10px);

transform: translate(3px, 10px);

}

25% {

-moz-transform: translate(0, 0px);

-ms-transform: translate(0, 0px);

-webkit-transform: translate(0, 0px);

transform: translate(0, 0px);

}

50% {

-moz-transform: translate(-3px, -25px);

-ms-transform: translate(-3px, -25px);

-webkit-transform: translate(-3px, -25px);

transform: translate(-3px, -25px);

}

75% {

-moz-transform: translate(0, -50px);

-ms-transform: translate(0, -50px);

-webkit-transform: translate(0, -50px);

transform: translate(0, -50px);

opacity: 1;

}

100% {

-moz-transform: translate(3px, -100px);

-ms-transform: translate(3px, -100px);

-webkit-transform: translate(3px, -100px);

transform: translate(3px, -100px);

opacity: 0;

}

}