<html>
  <head>
    <title>Latające kulki w tle [xnstrukcje]</title>
    </head>
  <body>
<div id="kulki">
<div class="kulka-1"/>
<div class="kulka-2"/>
<div class="kulka-3"/>
<div class="kulka-4"/>
<div class="kulka-5"/>
<div class="kulka-6"/>
</div>
<center>
  <div id="box">
  <span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis tellus nisl, vel mollis purus consectetur vitae. Duis euismod justo mi, et porta dui sagittis in. Integer ex nisl, efficitur et neque pulvinar, sagittis viverra neque. Mauris eget augue massa. Maecenas gravida et urna vel viverra. Aenean cursus et arcu at pretium. Mauris quis tortor euismod, suscipit metus id, hendrerit tortor. Donec et viverra orci, sit amet luctus nulla. Nam blandit lorem mauris. Proin est nibh, aliquam non est eu, tempus condimentum tellus. Nulla ut convallis risus, quis elementum turpis. Aenean vel augue congue, eleifend diam a, tempus enim. Donec bibendum dui id elit cursus ornare. Phasellus malesuada accumsan nunc vel dapibus. Curabitur pharetra augue ac bibendum semper.

Suspendisse lobortis ipsum at tincidunt cursus. Fusce ut purus nisi. Nunc urna justo, sagittis sed varius convallis, convallis sit amet diam. Vivamus vitae maximus erat. Pellentesque nec lectus arcu. Integer orci sapien, sodales at velit eu, facilisis posuere quam. Nam id maximus lectus. Nulla mauris lectus, ultrices in libero quis, sagittis pharetra tortor. Aliquam at elementum nisl. Pellentesque interdum luctus purus, quis consectetur ipsum. Phasellus condimentum in turpis eget elementum.

Vivamus erat tortor, feugiat vel fringilla in, hendrerit quis lectus. Pellentesque nunc nisl, bibendum vitae purus dictum, sagittis fringilla elit. Proin placerat, elit quis placerat fringilla, augue metus cursus sapien, non feugiat libero sem eu mauris. Praesent erat augue, vestibulum nec odio nec, efficitur rutrum sapien. Proin quis nunc sed quam euismod lacinia. Integer elementum pretium faucibus. Vestibulum ex erat, convallis quis blandit nec, hendrerit vehicula metus. Cras volutpat ornare erat vulputate congue. Nullam et massa ultrices, bibendum nisl et, porta ex. Donec urna arcu, vulputate quis pretium in, commodo ut neque. Fusce dapibus viverra odio vitae scelerisque. Nunc ut nisl est. Fusce quam ex, venenatis consequat mattis sit amet, faucibus eu nulla. Praesent mattis tellus in suscipit ultricies.
  </span>
</div>
</center>
    </body>
  </html>
/*-- KLUKI --*/
.kulka-1 {
position:absolute;
opacity:1;
bottom:0;
width:0px;
height:0px;
left:5em;
background: var(--kul);
border-radius:90px;
box-shadow: 0px 0px 10px var(--kul);
animation-name:kjeden;
animation-duration: 15s;
animation-iteration-count:infinite;   }

@keyframes kjeden {
0% {
bottom:0px;
}
100% {
bottom: 70em;
left: 10em;
width:25px;
height:25px;
}
}

.kulka-2 {
position:absolute;
opacity:1;
bottom:0;
width:0px;
height:0px;
left:7em;
background: var(--kul);
border-radius:90px;
box-shadow: 0px 0px 10px var(--kul);
animation-name:kdwa;
animation-delay: .3s;
animation-duration: 10s;
animation-iteration-count:infinite; }

@keyframes kdwa {
0% {
bottom:0px;
}
100% {
bottom: 70em;
left: 10em;
width:25px;
height:25px;
}
}

.kulka-3 {
position:absolute;
opacity:1;
bottom:0;
width:0px;
height:0px;
left:-2em;
background: var(--kul);
border-radius:90px;
box-shadow: 0px 0px 10px var(--kul);
animation-name:ktrzy;
animation-delay: .3s;
animation-duration: 10s;
animation-iteration-count:infinite; }

@keyframes ktrzy {
0% {
bottom:0px;
}
100% {
bottom: 70em;
left: 5em;
width:25px;
height:25px;
}
}

.kulka-4 {
position:absolute;
opacity:1;
bottom:0;
width:0px;
height:0px;
right:5em;
background: var(--kul);
border-radius:90px;
box-shadow: 0px 0px 10px var(--kul);
animation-name:kcztery;
animation-duration: 15s;
animation-iteration-count:infinite;   }

@keyframes kcztery {
0% {
bottom:0px;
}
100% {
bottom: 70em;
right: 10em;
width:25px;
height:25px;
}
}

/*-- TŁO I TE SPRAWY --*/
:root {
  --kul: #00E5FF;
}

body {
  background: url(https://funkyimg.com/i/39dPT.jpg);
  background-size: cover;
  background-attachemnt: fixed;
}

#box {
  background: rgb(255, 255, 255, .4);
  padding: 20px;
  display: block;
  position: fixed;
  top: 15em;
  left: 15em;
  width: 60%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.