css飘动的气球,CSS3 悬浮的彩色气球

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800);

body {

overflow: hidden;

background: #000;

color: #fff;

}

.love-pop {

font: bold 22px/0.3 Open Sans;

text-shadow: 0 3px 15px #ccc;

position: absolute;

right: -96px;

top: 73px;

transform: rotate(45deg);

background-color: #df151a;

background: linear-gradient(235deg, #df151a, #fd8603, #f4f328, #00da3c, #00cbe7);

line-height: 38px;

padding: 0 71px;

text-transform: capitalize;

z-index: 1000;

}

.love-box {

height: 120px;

width: 65px;

display: inline-block;

position: relative;

margin: 0 10px;

}

.love-container {

position: absolute;

top: 50%;

left: 50%;

white-space: nowrap;

text-align: center;

text-transform: uppercase;

font: bold 50px/0.8 Open Sans, Impact;

-webkit-transform: translateX(-50%) translateY(-50%);

transform: translateX(-50%) translateY(-50%);

}

.balloon {

height: 120px;

width: 75px;

border-radius: 50%;

position: relative;

z-index: 100;

}

.balloon:before,

.balloon:after {

content: "";

position: absolute;

}

.balloon:before {

height: 8px;

width: 9px;

left: 40%;

top: 95%;

background: inherit;

z-index: 10;

}

.balloon:after {

width: 1px;

height: 67px;

background: #ddd;

top: 100%;

left: 45%;

z-index: 1;

}

.text {

position: absolute;

display: none;

top: 25%;

left: 35%;

width: 55px;

margin: 0 auto;

z-index: 1;

}

.red {

background: #df151a;

animation: float1 6s ease-in-out infinite;

}

.orange {

background: #fd8603;

animation: float2 4s ease-in-out infinite;

}

.yellow {

background: #f4f328;

animation: float3 5s ease-in-out infinite;

}

.green {

background: #00da3c;

animation: float4 4s ease-in-out infinite;

}

.blue {

background: #00cbe7;

animation: float5 6s ease-in-out infinite;

}

@keyframes float1 {

0%, 100% {

transform: translateY(-25%);

transform: translateX(9%);

}

50% {

transform: translateY(-14%);

}

}

@keyframes float2 {

0%, 100% {

transform: translateY(5%);

}

50% {

transform: translateY(-12%);

}

}

@keyframes float3 {

0%, 100% {

transform: translateY(10%);

}

50% {

transform: translateY(-8%);

}

}

@keyframes float4 {

0%, 100% {

transform: translateY(10%);

}

50% {

transform: translateY(-12%);

}

}

@keyframes float5 {

0%, 100% {

transform: translateY(10%);

}

50% {

transform: translateY(-13%);

}

}