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 动画制作