body {
font-family:'Wendy One',sans-serif;
}
span {
text-transform:uppercase;
}
.container {
width:800px;
height:420px;
padding:10px;
margin:0 auto;
background:whitesmoke;
position:relative;
}
.balloon {
width:738px;
margin:0 auto;
padding-top:30px;
position:relative;
}
.balloon > div {
width:104px;
height:140px;
background:rgba(182,15,97,0.9);
border-radius:0;
border-radius:80% 80% 80% 80%;
margin:0 auto;
position:absolute;
padding:10px;
box-shadow:inset 17px 7px 10px rgba(182,15,97,0.9);
-webkit-transform-origin:bottom center;
}
.balloon > div:nth-child(1) {
background:rgba(182,15,97,0.9);
left:0;
box-shadow:inset 10px 10px 10px rgba(135,11,72,0.9);
-webkit-animation:balloon1 6s ease-in-out infinite;
-moz-animation:balloon1 6s ease-in-out infinite;
-o-animation:balloon1 6s ease-in-out infinite;
animation:balloon1 6s ease-in-out infinite;
}
.balloon > div:nth-child(1):before {
color:rgba(182,15,97,0.9);
}
.balloon > div:nth-child(2) {
background:rgba(242,112,45,0.9);
left:120px;
box-shadow:inset 10px 10px 10px rgba(222,85,14,0.9);
-webkit-animation:balloon2 6s ease-in-out infinite;
-moz-animation:balloon2 6s ease-in-out infinite;
-o-animation:balloon2 6s ease-in-out infinite;
animation:balloon2 6s ease-in-out infinite;
}
.balloon > div:nth-child(2):before {
color:rgba(242,112,45,0.9);
}
.balloon > div:nth-child(3) {
background:rgba(45,181,167,0.9);
left:240px;
box-shadow:inset 10px 10px 10px rgba(35,140,129,0.9);
-webkit-animation:balloon4 6s ease-in-out infinite;
-moz-animation:balloon4 6s ease-in-out infinite;
-o-animation:balloon4 6s ease-in-out infinite;
animation:balloon4 6s ease-in-out infinite;
}
.balloon > div:nth-child(3):before {
color:rgba(45,181,167,0.9);
}
.balloon > div:nth-child(4) {
background:rgba(190,61,244,0.9);
left:360px;
box-shadow:inset 10px 10px 10px rgba(173,14,240,0.9);
-webkit-animation:balloon1 5s ease-in-out infinite;
-moz-animation:balloon1 5s ease-in-out infinite;
-o-animation:balloon1 5s ease-in-out infinite;
animation:balloon1 5s ease-in-out infinite;
}
.balloon > div:nth-child(4):before {
color:rgba(190,61,244,0.9);
}
.balloon > div:nth-child(5) {
background:rgba(180,224,67,0.9);
left:480px;
box-shadow:inset 10px 10px 10px rgba(158,206,34,0.9);
-webkit-animation:balloon3 5s ease-in-out infinite;
-moz-animation:balloon3 5s ease-in-out infinite;
-o-animation:balloon3 5s ease-in-out infinite;
animation:balloon3 5s ease-in-out infinite;
}
.balloon > div:nth-child(5):before {
color:rgba(180,224,67,0.9);
}
.balloon > div:nth-child(6) {
background:rgba(242,194,58,0.9);
left:600px;
box-shadow:inset 10px 10px 10px rgba(234,177,15,0.9);
-webkit-animation:balloon2 3s ease-in-out infinite;
-moz-animation:balloon2 3s ease-in-out infinite;
-o-animation:balloon2 3s ease-in-out infinite;
animation:balloon2 3s ease-in-out infinite;
}
.balloon > div:nth-child(6):before {
color:rgba(242,194,58,0.9);
}
.balloon > div:before {
color:rgba(182,15,97,0.9);
position:absolute;
bottom:-11px;
left:52px;
content:"▲";
font-size:1em;
}
span {
font-size:4.8em;
color:white;
position:relative;
top:30px;
left:50%;
margin-left:-27px;
}
/*BALLOON 1 4*/
@-webkit-keyframes balloon1 {
0%,100% {
-webkit-transform:translateY(0) rotate(-6deg);
}
50% {
-webkit-transform:translateY(-20px) rotate(8deg);
}
}@-moz-keyframes balloon1 {
0%,100% {
-moz-transform:translateY(0) rotate(-6deg);
}
50% {
-moz-transform:translateY(-20px) rotate(8deg);
}
}@-o-keyframes balloon1 {
0%,100% {
-o-transform:translateY(0) rotate(-6deg);
}
50% {
-o-transform:translateY(-20px) rotate(8deg);
}
}@keyframes balloon1 {
0%,100% {
transform:translateY(0) rotate(-6deg);
}
50% {
transform:translateY(-20px) rotate(8deg);
}
}/* BAllOON 2 5*/
@-webkit-keyframes balloon2 {
0%,100% {
-webkit-transform:translateY(0) rotate(6eg);
}
50% {
-webkit-transform:translateY(-30px) rotate(-8deg);
}
}@-moz-keyframes balloon2 {
0%,100% {
-moz-transform:translateY(0) rotate(6deg);
}
50% {
-moz-transform:translateY(-30px) rotate(-8deg);
}
}@-o-keyframes balloon2 {
0%,100% {
-o-transform:translateY(0) rotate(6deg);
}
50% {
-o-transform:translateY(-30px) rotate(-8deg);
}
}@keyframes balloon2 {
0%,100% {
transform:translateY(0) rotate(6deg);
}
50% {
transform:translateY(-30px) rotate(-8deg);
}
}/* BAllOON 0*/
@-webkit-keyframes balloon3 {
0%,100% {
-webkit-transform:translate(0,-10px) rotate(6eg);
}
50% {
-webkit-transform:translate(-20px,30px) rotate(-8deg);
}
}@-moz-keyframes balloon3 {
0%,100% {
-moz-transform:translate(0,-10px) rotate(6eg);
}
50% {
-moz-transform:translate(-20px,30px) rotate(-8deg);
}
}@-o-keyframes balloon3 {
0%,100% {
-o-transform:translate(0,-10px) rotate(6eg);
}
50% {
-o-transform:translate(-20px,30px) rotate(-8deg);
}
}@keyframes balloon3 {
0%,100% {
transform:translate(0,-10px) rotate(6eg);
}
50% {
transform:translate(-20px,30px) rotate(-8deg);
}
}/* BAllOON 3*/
@-webkit-keyframes balloon4 {
0%,100% {
-webkit-transform:translate(10px,-10px) rotate(-8eg);
}
50% {
-webkit-transform:translate(-15px,20px) rotate(10deg);
}
}@-moz-keyframes balloon4 {
0%,100% {
-moz-transform:translate(10px,-10px) rotate(-8eg);
}
50% {
-moz-transform:translate(-15px,10px) rotate(10deg);
}
}@-o-keyframes balloon4 {
0%,100% {
-o-transform:translate(10px,-10px) rotate(-8eg);
}
50% {
-o-transform:translate(-15px,10px) rotate(10deg);
}
}@keyframes balloon4 {
0%,100% {
transform:translate(10px,-10px) rotate(-8eg);
}
50% {
transform:translate(-15px,10px) rotate(10deg);
}
}h1 {
position:relative;
top:200px;
text-align:center;
color:rgba(182,15,97,0.9);
font-size:3.5em;
}
css3-balloons-animation 动画制作