Night baloons

Developer
Judith Neumann
Size
2,511 Kb
Views
40,480
  1. Night baloons Previews
  2. Night baloons HTML Codes
  3. Night baloons CSS Codes

How do I make an night baloons?

Only CSS... inspired in my dribbble shot https://dribbble.com/shots/3125382-Night-baloons.... What is a night baloons? How do you make a night baloons? This script and codes were developed by Judith Neumann on 13 October 2022, Thursday.

Night baloons Previews
IQ Test

Night baloons - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Night baloons</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <div class="estrellas"></div> <div class="estrellas3"></div> <div class="luna"></div> <div class="hills"></div>
<div class="baloons"> <div class="baloon1"> <div class="hilos"></div> <div class="cesta"></div> <div class="refle"></div> <div class="refle3"></div> <div class="viento"></div> </div> <div class="baloon2"> <div class="hilos"></div> <div class="cesta"></div> <div class="refle"></div> <div class="refle3"></div> <div class="viento"> </div> </div>
</div>
</body>
</html>

Night baloons - Script Codes CSS Codes

body{ background:black;
}
.container{ position:relative; width:800px; height:600px; background:#131F2C; margin:90px auto; overflow:hidden;
}
@-webkit-keyframes brillo{
0%{box-shadow:0 0 3px 3px rgba(255,255,255,.3); }
50%{box-shadow:0 0 3px 3px rgba(255,255,255,.7); }
100%{box-shadow:0 0 3px 3px rgba(255,255,255,.3);
; }
}
@keyframes brillo{
0%{box-shadow:0 0 3px 3px rgba(255,255,255,.3); }
50%{box-shadow:0 0 3px 3px rgba(255,255,255,.7); }
100%{box-shadow:0 0 3px 3px rgba(255,255,255,.3);
; }
}
.estrellas{ position:absolute; width:9px; height:9px; border-radius:100%; background:#ccc; box-shadow:0 0 3px 3px rgba(255,255,255,.3); margin:121px 121px;
}
.estrellas::before{ content:""; position:absolute; width:9px; height:9px; border-radius:100%; background:#ccc; box-shadow:0 0 3px 3px rgba(255,255,255,.3); margin:121px 121px;
}
.estrellas::after{ content:""; position:absolute; width:9px; height:9px; border-radius:100%; background:#ccc; box-shadow:0 0 3px 3px rgba(255,255,255,.3); margin:0px 521px;
}
.estrellas3{ position:absolute; width:9px; height:9px; border-radius:100%; background:#ccc; box-shadow:0 0 3px 3px rgba(255,255,255,.3); margin:241px 550px
}
.estrellas3::before{ content:""; position:absolute; width:7px; height:7px; border-radius:100%; background:#ccc; box-shadow:0 0 3px 3px rgba(255,255,255,.3); margin:90px -500px
}
.estrellas3::after{ content:""; position:absolute; width:7px; height:7px; border-radius:100%; background:#ccc; box-shadow:0 0 3px 3px rgba(255,255,255,.3); margin:90px 172px
}
.luna{ position:absolute; width:112px; height:112px; border-radius:100%; background:#ccc; margin: 70px 350px; box-shadow:0 0 70px #FFf;
}
.baloons{ position:absolute; margin:30px 30px; -webkit-animation: va 30s linear infinite; animation: va 30s linear infinite;
}
.baloon1, .baloon2{ position:absolute; width:90px; height:90px; border-radius:100%; background:#333;
}
.baloon1{ margin:241px 830px; -webkit-animation:sube 12s alternate infinite; animation:sube 12s alternate infinite;
}
.baloon2{ margin:221px 950px; -webkit-transform:scale(.9); transform:scale(.9); -webkit-animation:sube3 12s alternate infinite; animation:sube3 12s alternate infinite;
}
.baloon1::before, .baloon2::before{ content:""; position:absolute; width:80px; height:83px; border-radius:100%; margin:4px 3px
}
.baloon1::before{ background:#05A9CE; border-right:5px solid #0D7090;
}
.baloon2::before{ background:#EB5385; border-right:5px solid #C9334C;
}
.cesta{ position:absolute; border-top: 30px solid #333; border-left: 12px solid transparent; border-right: 12px solid transparent; height: 0; width: 30px; margin:112px 21px
}
.cesta::before{ content:""; position:absolute; border-top: 25px solid #83939C; border-left: 10px solid transparent; border-right: 10px solid transparent; height: 0; width: 27px; margin:-27px -8px
}
.refle{ position:absolute; width: 70px; height:30px; border-radius: 121px 121px 0 0;
border-top:7px solid white; margin:12px 0px; -webkit-transform:rotate(-35deg); transform:rotate(-35deg)
}
.hilos{ position:absolute; width:3px; height:60px; background:#333; -webkit-transform:rotate(-21deg); transform:rotate(-21deg); margin:80px 30px
}
.hilos::before{ content:""; position:absolute; width:3px; height:53px; background:#333; -webkit-transform:rotate(42deg); transform:rotate(42deg); margin:9px 30px
}
.viento{ position:absolute; width:70px; height:9px; border-radius:6px; background:#344656; margin:142px 75px
}
.viento::before{ content:""; position:absolute; width:50px; height:9px; border-radius:6px; background:#344656; margin:14px 33px
}
.viento::after{ content:""; position:absolute; width:21px; height:9px; border-radius:6px; background:#344656; margin:0px 75px
}
.hills{ position:absolute; width:400px; height:231px; border-radius: 231px 231px 0 0; background:#161B26; border-top:7px solid #131921; margin:470px -53px
}
.hills::after{ content:""; position:absolute; width:300px; height:152px; border-radius: 231px 231px 0 0; background:#161B26; border-top:7px solid #131921; margin:12px 312px
}
.hills::before{ content:""; position:absolute; width:400px; height:231px; border-radius: 231px 231px 0 0; background:#161B26; border-top:7px solid #131921; margin:0px 512px
}
@-webkit-keyframes va{ 0%{-webkit-transform:translatex(0px);transform:translatex(0px) } 100%{-webkit-transform:translatex(-1132px);transform:translatex(-1132px) }
}
@keyframes va{ 0%{-webkit-transform:translatex(0px);transform:translatex(0px) } 100%{-webkit-transform:translatex(-1132px);transform:translatex(-1132px) }
}
@-webkit-keyframes sube{ 0%{-webkit-transform:translatey(-21px);transform:translatey(-21px)} 35%{-webkit-transform:translatey(-12px);transform:translatey(-12px)} 50%{-webkit-transform:translatey(12px);transform:translatey(12px) } 70%{-webkit-transform:translatey(-12px);transform:translatey(-12px) }
}
@keyframes sube{ 0%{-webkit-transform:translatey(-21px);transform:translatey(-21px)} 35%{-webkit-transform:translatey(-12px);transform:translatey(-12px)} 50%{-webkit-transform:translatey(12px);transform:translatey(12px) } 70%{-webkit-transform:translatey(-12px);transform:translatey(-12px) }
}
@-webkit-keyframes sube3 { 0%{margin-top:221px } 35%{margin-top:212px } 50%{margin-top:231px } 70%{margin-top:221px }
}
@keyframes sube3 { 0%{margin-top:221px } 35%{margin-top:212px } 50%{margin-top:231px } 70%{margin-top:221px }
}
Night baloons - Script Codes
Night baloons - Script Codes
Home Page Home
Developer Judith Neumann
Username judag
Uploaded October 13, 2022
Rating 4
Size 2,511 Kb
Views 40,480
Do you need developer help for Night baloons?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Judith Neumann (judag) Script Codes
Name
Css or Czz..
Css flat day landscape
Landscapes animated icons...
Code and view
Parrot preloader...
Colorfull rain
Fantasy earth...
Pericles mi loro...
Crazy icons
Take a beer
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!