Scribd
Upload
4 views11 pages

Balloons Code

The document is an HTML page titled 'Happy Birthday' that features a colorful balloon animation and a greeting. It includes CSS styles for the layout and animations of the balloons, as well as a title displayed in a large font. The design utilizes a radial gradient background and custom fonts to enhance the visual appeal.

Uploaded by

samswag2898
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views11 pages

Balloons Code

The document is an HTML page titled 'Happy Birthday' that features a colorful balloon animation and a greeting. It includes CSS styles for the layout and animations of the balloons, as well as a title displayed in a large font. The design utilizes a radial gradient background and custom fonts to enhance the visual appeal.

Uploaded by

samswag2898
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

<html __fvdsurfcanyoninserted="1" class=" clickberry-extension clickberry-extension-standalone

clickberry-extension clickberry-extension-standalone clickberry-extension clickberry-extension-


standalone">

<head>

<meta charset="UTF-8">

<title>Happy Birthday</title>

<script type="text/javascript"
src="chrome-extension://bfbmjmiodbnnpllbbbfblcplfjjepjdn/js/injected.js"></script>

<meta content="clickberry-extension-here">

<meta content="clickberry-extension-here">

<style type="text/css"></style>

<style type="text/css"></style>

<style type="text/css"></style>

<style type="text/css"></style>

<script type="text/javascript"
src="chrome-extension://bfbmjmiodbnnpllbbbfblcplfjjepjdn/js/injected.js"></script>

<meta content="clickberry-extension-here">

</head>

<body>

<link href="https://fonts.googleapis.com/css?family=Wendy+One" rel="stylesheet"


type="text/css">

<div class="container">

<div class="balloon">

<div><span>☺</span>

</div>

<div><span>B</span>

</div>

<div><span>D</span>

</div>

<div><span>A</span>

</div>
<div><span>Y</span>

</div>

<div><span>☺</span>

</div>

</div>

<h1>omjipanggg</h1>

</div>

</body></html>

body {

font-family:'Wendy One', sans-serif;

body {

background-image: -webkit-gradient(radial, 50% 50%,

0,

50% 50%,

100,

color-stop(0%, #374566),

color-stop(100%, #010203));

background-image: -webkit-radial-gradient(#374566,

#010203);

background-image: -moz-radial-gradient(#374566,

#010203);

background-image: -o-radial-gradient(#374566,

#010203);

background-image: radial-gradient(#374566,

#010203);

span {
text-transform: uppercase;

.container {

width: 800px;

height: 420px;

padding: 10px;

margin: 0 auto;

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: white;

font-size: 3.5em;

You might also like