Коды воздушных шариков

Воздушными шариками можно украсить страницу с какими-либо поздравлениями или информацией, например, сообщение о годовщине создания сайта или о другой важной дате.

Плюс картинок на css в том, что они не утяжеляют сайт и загрузка страниц проходит быстрее.

Шарики

Код:

<div id="container">
	<div class="balloons">
		<div></div><div></div><div></div><div></div><div></div>
		<div></div><div></div><div></div><div></div><div></div>
		<div></div><div></div><div></div><div></div><div></div>
		<div></div><div></div><div></div><div></div><div></div>
		<div></div><div></div><div></div><div></div><div></div>
	</div>
</div>
  <style>
{
	margin: 0;
	padding: 0;
}

p {
	padding: 10px;
}

#container {
	position: relative;
	height: 300px;
	margin: 0;
	padding: 0;
	background: #87ceeb;
	overflow: hidden;
}



.balloons div {
	position: absolute;
	left: 0;
	bottom: -150px;
	width: 80px;
	height: 100px;
	background: #ffa07a;
	border-radius: 50%;
	box-shadow: -6px -6px 0 rgba(0, 0, 0, 0.15) inset;
}

.balloons div:before {
	content: '';
	position: absolute;
	left: 38px;
	bottom: -70px;
	width: 2px;
	height: 70px;
	background: #a0a0a0;
	transform: rotate(5deg);
}

/* .balloons div:after {
	content:"▲";
	position: absolute;
	left: 33px;
	bottom: -13px;
	color: #ffa07a;
} */



.balloons div:nth-of-type(1) {
	left: -5%;
	background: #9400d3;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
		wobbling_y 1.1s ease-in-out infinite alternate,
		fly_high 13s ease-in-out infinite;
}

.balloons div:nth-of-type(2) {
	left: 12%;
	background: #ffc0cb;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
		wobbling_y 1.1s ease-in-out infinite alternate,
		fly_high 7s ease-in-out infinite;
}

.balloons div:nth-of-type(3) {
	left: 18%;
	background: #ffa07a;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
		wobbling_y 1.1s ease-in-out infinite alternate,
		fly_high 16s ease-in-out infinite;
}

.balloons div:nth-of-type(4) {
	left: 22%;
	background: #f0f8ff;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
		wobbling_y 1.1s ease-in-out infinite alternate,
		fly_high 14s ease-in-out infinite;
}

.balloons div:nth-of-type(5) {
	left: 36%;
	background: #ffa07a;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
		wobbling_y 1.1s ease-in-out infinite alternate,
		fly_high 7s ease-in-out infinite;
}

.balloons div:nth-of-type(6) {
	left: 50%;
	background: #00fa9a;
	animation: wobbling_x 0.9s ease-in-out infinite alternate,
		wobbling_y 1.2s ease-in-out infinite alternate,
		fly_high 12s ease-in-out infinite;
}

.balloons div:nth-of-type(7) {
	left: 62%;
	background: #ffc0cb;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
		wobbling_y 1.1s ease-in-out infinite alternate,
		fly_high 15s ease-in-out infinite;
}

.balloons div:nth-of-type(8) {
	left: 68%;
	background: #9400d3;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
		wobbling_y 1.1s ease-in-out infinite alternate,
		fly_high 7s ease-in-out infinite;
}

.balloons div:nth-of-type(9) {
	left: 78%;
	background: #ffa07a;
	animation: wobbling_x 0.9s ease-in-out infinite alternate,
		wobbling_y 1.2s ease-in-out infinite alternate,
		fly_high 9s ease-in-out infinite;
}

.balloons div:nth-of-type(10) {
	left: 90%;
	background: #ff0000;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
		wobbling_y 1.1s ease-in-out infinite alternate,
		fly_high 11s ease-in-out infinite;
}

.balloons div:nth-of-type(11) {
	left: 0%;
	background: #f0f8ff;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
		wobbling_y 1.1s ease-in-out infinite alternate,
		fly_high 9s ease-in-out infinite 7s;
}

.balloons div:nth-of-type(12) {
	left: 3%;
	background: #ffa07a;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
		wobbling_y 1.1s ease-in-out infinite alternate,
		fly_high 7s ease-in-out infinite 2s;
}

.balloons div:nth-of-type(13) {
	left: 10%;
	background: #ff0000;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
		wobbling_y 1.1s ease-in-out infinite alternate,
		fly_high 8s ease-in-out infinite 5s;
}

.balloons div:nth-of-type(14) {
	left: 25%;
	background: #00ced1;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
		wobbling_y 1.1s ease-in-out infinite alternate,
		fly_high 12s ease-in-out infinite 6s;
}

.balloons div:nth-of-type(15) {
	left: 37%;
	background: #00fa9a;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
		wobbling_y 1.1s ease-in-out infinite alternate,
		fly_high 7s ease-in-out infinite 4s;
}

.balloons div:nth-of-type(16) {
	left: 45%;
	background: #00ced1;
	animation: wobbling_x 0.9s ease-in-out infinite alternate,
		wobbling_y 1.2s ease-in-out infinite alternate,
		fly_high 9s ease-in-out infinite;
}

.balloons div:nth-of-type(17) {
	left: 55%;
	background: #ffc0cb;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
		wobbling_y 1.1s ease-in-out infinite alternate,
		fly_high 13s ease-in-out infinite 8s;
}

.balloons div:nth-of-type(18) {
	left: 60%;
	background: #f0f8ff;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
		wobbling_y 1.1s ease-in-out infinite alternate,
		fly_high 10s ease-in-out infinite 1s;
}

.balloons div:nth-of-type(19) {
	left: 75%;
	background: #00fa9a;
	animation: wobbling_x 0.9s ease-in-out infinite alternate,
		wobbling_y 1.2s ease-in-out infinite alternate,
		fly_high 15s ease-in-out infinite 7s;
}

.balloons div:nth-of-type(20) {
	left: 95%;
	background: #00ced1;
	animation: wobbling_x 0.8s ease-in-out infinite alternate,
		wobbling_y 1.1s ease-in-out infinite alternate,
		fly_high 11s ease-in-out infinite 6s;
}

@keyframes wobbling_x {
	0% {
		margin-left: 8px;
	}

	100% {
		margin-left: 0px;
	}
}

@keyframes wobbling_y {
	0% {
		margin-bottom: 0px;
	}

	100% {
		margin-bottom: 8px;
	}
}

@keyframes fly_high {
	100% {
		transform:translateY(-1000px);
	}
}
 </style>

Красным в коде выделила цвет фона, где летают шарики.
Синим выделала цвет шариков, их 20 штук. Можно менять на свои цвета. Меняйте как угодно - одинаковые, два цвета, по оттенкам или все разных цветов.
Зелёным отметила в коде цвет верёвочки у шарика.

Автор кода https://codepen.io/yochans

Шарики обычные

Обычная картинка svg

<svg width="360" height="500">
    <rect width="320" height="460" fill="lemonchiffon" rx="20" x="20" y="20" />
    <circle fill="crimson" r="100" cx="140" cy="160" />
    <polygon points="135,270 145,260 155,270" fill="crimson" />
    <polygon points="240, 290 250,280 260,290 " fill="gold" />
    <ellipse rx="60" ry="80" cx="250" cy="200" fill="gold" />
    <polyline points="150,420 135,390 150,360 135,330 150,300 145,260" stroke="brown" fill="none"/>
     <polyline points="260,440 245,410 260,380 245,350 260,320 250,290" stroke="brown" fill="none"/>
</svg>

Красным в коде выделила цвет фона.

Синим - цвет первого шарика и треугольника от шарика

Зелёным - цвет второго шарика и треугольника от шарика

Оранжевым - цвет ниточек

Одиночный шарик

Шарик анимированный. Он покачивается из стороны в сторону. Посмотреть на него можно в редакторе, добавьте код в первое окно и нажмите кнопку Показать результат.

В коде выделила синим цвет шарика - можно поменять на свой.

<div id="container">
  <div class="balloon"></div>
  </div>
<style>
#container{
  position:relative;
  width:300px;
  height:400px;
  margin:40px auto;
}


.balloon{
  position:absolute;
  left:0px;
  width:100px;
  height:130px;
  background:rgba(190, 190, 255, 0.7);
  border-radius:50%;
  box-shadow:inset -20px -20px 20px rgba(0, 0, 0, 0.2);
  opacity:0.9;
  -webkit-animation:float 5s ease-in-out infinite;
 
}

.balloon:before{
  content:"";
  position:absolute;
  top:130px;
  left:40px;
  width:0px;
  height:0px;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:10px solid rgba(190, 190, 255, 0.7);
}

.balloon:after{
  content:"";
  position:absolute;
  left:50px;
  top:135px;
  width:1px;
  height:200px;
  background:rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.4);
}

@-webkit-keyframes float{
  0%,100%{
    -webkit-transform: translateY(0px) rotate(3deg);
  }
  50%{
    -webkit-transform: translateY(-25px) rotate(-5deg);
  }

}

</style>

Автор - https://codepen.io/r2k

Шарики и конфетти

Ещё одна картинка картинка svg

<div class='flex'>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300"><style type="text/css">.st0{fill:#F15B51;} .st1{fill:#C0D84E;} .st2{fill:#22ABC6;} .st3{fill:#626EB3;} .st4{fill:#FFCF30;} .st5{fill:#F1F2F3;} .st6{fill:url(#SVGID_1_);} .st7{fill:url(#SVGID_2_);} .st8{fill:#F89E2B;} .st9{fill:url(#SVGID_3_);} .st10{fill:#5CBC6A;}</style>
<g class="confetti explode animated delay--c speed--a">
  <path class="st0" d="M119.694-.005l3.394 3.394-6.788 6.788-3.394-3.394z"/>
  <path class="st1" d="M10.195 48.495l3.394 3.394-6.788 6.788-3.394-3.394zM136.602 128.702l3.394 3.394-6.788 6.788-3.394-3.394zM174.146 11.587l-1.128 4.666-9.331-2.255 1.128-4.666z"/>
  <path class="st2" d="M148.201 39.509l3.394 3.394-6.788 6.788-3.394-3.394zM12.384 151.076l-2.147 4.293-8.586-4.293 2.147-4.293z"/>
  <path class="st0" d="M228.332 146.818l-2.147 4.293-8.586-4.293 2.147-4.293z"/>
  <path class="st3" d="M201.33 40.339l-.679 4.752-9.503-1.357.679-4.752z"/>
  <path class="st0" d="M57.283 160.811l4.723-.859 1.717 9.445-4.723.859z"/>
  <path class="st2" d="M137.193 161.319l4.547-1.539 3.079 9.093-4.547 1.539z"/>
  <path class="st3" d="M49.751 20.813l2.373-4.173 8.345 4.745-2.373 4.173zM176.232 191.886l-.913-4.712 9.424-1.826.913 4.712z"/>
  <path class="st4" d="M214.738 82.678l-.714-4.747 9.493-1.428.714 4.747zM64.555 129.023l3.645-3.124 6.248 7.289-3.645 3.124zM83.243 196.246l4.391 1.94-3.88 8.781-4.391-1.94z"/>
</g>
<g class="balloon fadeInUp animated delay">
  <path class="st5" d="M49.1 200.3c-9-1.5-15.3-5-18.6-10.2-3.3-5.2-3.7-12.1-1.2-21 3.2-11.4.4-22.8.3-22.9l2.9-.7c.1.5 3.1 12.2-.3 24.4-2.2 8.1-2 14.2.9 18.6 2.8 4.5 8.4 7.4 16.6 8.8l-.6 3z"/>
  <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="32" y1="150.273" x2="32" y2="74.272"><stop offset="0" stop-color="#22ABC6"/><stop offset="1" stop-color="#626EB3"/></linearGradient>
  <path class="st6" d="M32 74.3c-17.7 0-32 14.3-32 32 0 23.6 20.3 44 32 44s32-20.4 32-44c0-17.7-14.3-32-32-32z"/>
  <path class="st3" d="M39.2 75.1c7 5.9 11.4 14.7 11.4 24.5 0 23.6-20.3 44-32 44h-.8c4.9 4.2 10.1 6.7 14.1 6.7 11.7 0 32-20.4 32-44 .1-15.2-10.5-27.9-24.7-31.2z"/>
  <ellipse transform="matrix(.707 .707 -.707 .707 69.985 14.519)" class="st2" cx="17.5" cy="91.7" rx="5.3" ry="8"/><circle class="st2" cx="26" cy="100.3" r="2.7"/>
  <path class="st3" d="M32.7 148.7c-.4-.6-1.1-.6-1.5 0l-3.9 5.8c-.4.6-.1 1.1.6 1.1h8c.7 0 1-.5.6-1.1l-3.8-5.8z"/>
</g>
<g class="balloon fadeInUp animated delay--b">
  <path class="st5" d="M146.5 218.1c-4.9-8-6.3-16.5-4-25.4 3.1-12.2 12.7-22.4 20.3-26.7 10.5-5.9 8.5-18.1 8.5-18.2l3-.5c0 .1 2.3 14.4-10 21.3-7.1 4-16 13.5-18.9 24.8-2.1 8.1-.8 15.8 3.7 23.1l-2.6 1.6z"/>
  <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="980.951" y1="842.552" x2="980.951" y2="761.871" gradientTransform="matrix(.995 .104 -.104 .995 -714.362 -794.94)"><stop offset="0" stop-color="#F89E2B"/><stop offset="1" stop-color="#F15B51"/></linearGradient>
  <path class="st7" d="M181.6 65.3c-18.7-2-35.4 11.6-37.3 30.2-2.6 24.9 16.6 48.7 28.9 50 12.3 1.3 36.1-18 38.7-42.9 1.9-18.6-11.7-35.3-30.3-37.3z"/>
  <path class="st0" d="M189.1 67c6.7 7 10.4 16.8 9.3 27.1-2.6 24.9-26.3 44.2-38.7 42.9l-.8-.1c4.7 5 9.9 8.2 14.2 8.6 12.3 1.3 36.1-18 38.7-42.9 1.7-16-8.1-30.6-22.7-35.6z"/>
  <ellipse transform="matrix(.629 .777 -.777 .629 124.722 -97.24)" class="st8" cx="164.3" cy="82.1" rx="5.7" ry="8.5"/><circle class="st8" cx="172.4" cy="92.1" r="2.8"/>
  <path class="st0" d="M174.1 144c-.4-.7-1.1-.8-1.6-.2l-4.7 5.7c-.5.6-.3 1.2.5 1.2l8.4.9c.8.1 1.1-.4.7-1.1l-3.3-6.5z"/>
</g>
<g class="balloon fadeInUp animated">
  <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="98.667" y1="130.439" x2="98.667" y2="16.439"><stop offset="0" stop-color="#C0D84E"/><stop offset="1" stop-color="#5CBC6A"/></linearGradient>
  <path class="st9" d="M98.7 16.4c-26.5 0-48 21.5-48 48 0 35.3 30.5 66 48 66s48-30.7 48-66c0-26.5-21.5-48-48-48z"/>
  <path class="st10" d="M109.5 17.7c10.5 8.8 17.1 22 17.1 36.7 0 35.3-30.5 66-48 66-.4 0-.8 0-1.2-.1 7.4 6.3 15.1 10.1 21.2 10.1 17.5 0 48-30.7 48-66 .1-22.7-15.8-41.8-37.1-46.7z"/>
  <ellipse transform="matrix(.707 .707 -.707 .707 52.663 -41.864)" class="st1" cx="76.9" cy="42.6" rx="8" ry="12"/><circle class="st1" cx="89.7" cy="55.4" r="4"/>
  <path class="st5" d="M115.7 197.1h-4c0-15.9-11.7-22-20.2-26.5-4.9-2.6-8.4-4.4-8.7-7.7-.2-2.7 2-4.7 3.7-6.1 10.6-8.2 9.3-20 9.2-20.2l4-.5c.1.6 1.7 14.2-10.8 23.8-1.8 1.4-2.2 2.2-2.2 2.5.1 1.1 3.9 3 6.6 4.5 8.9 4.8 22.4 11.9 22.4 30.2z"/>
  <path class="st10" d="M99.8 128.1c-.6-.9-1.6-.9-2.2 0l-5.8 8.7c-.6.9-.2 1.7.9 1.7h12c1.1 0 1.5-.7.9-1.7l-5.8-8.7z"/>
</g>

</svg>
</div>
<style>
.dn
  display: none

.flex
  align-items: center
  display: flex
  justify-content: center
  height: 100%
  
.balloon
  opacity: 0
  
.confetti
  transform-origin: 50% 50%
 
  
@keyframes fadeInUp
  0%
    opacity: 0
    transform: translate3d(0, 100%, 0)
  
  70%
    transform: translate3d(0, -5%, 0)
  100%
    opacity: 1
    transform: none
  
@keyframes explode
  from
    opacity: 0
    transform: scale3d(.3, .3, .3)
    
  25%
    transform: scale3d(1.1, 1.1, 1.1)
  
  50%
    opacity: 1
  
.fadeInUp 
  animation-name: fadeInUp
  
.explode 
  animation-name: explode
  
.animated
  animation-duration: 1.3s
  animation-fill-mode: both
  
.delay
  animation-delay: 0.2s
  
.delay--b
  animation-delay: 0.5s
  
.delay--c
  animation-delay: 0.6s
  
.speed
  animation-duration: 1.3s
  
.speed--a
  animation-duration: 1s
  
</style>

Автор https://codepen.io/jordanwade