Modificare cod Animated musical notes

[Anghell]

Fiindca astazi suntem in 31 decembrie 2020, va doresc un sincer La multi ani si toate cele bune in 2021.

Sincer sa fiu,"am imprumutat" un cod de pe CodePen. Link code - codepen.io/affurida/pen/gOMbNjK
Deocamdata n-am facut nimic concret cu acest cod. Astept raspunsul vostru.

Codul:

Cod: Selectaţi tot

<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: black;
  color: white;
}

.muzieknootjes {
  display: block;
  margin: auto;
  position: relative;
  width: 50%;
  min-width: 300px;
  height: 200px;
  border: 0px solid #000;
}

.noot-1,
.noot-2,
.noot-3,
.noot-4 {
  position: absolute;
  animation: notes 2s infinite linear;
  font-size: 35px;
  opacity: 0;
}

.noot-1 {
  top: 60px;
  left: 0;
  animation-delay: 0.5s;
}

.noot-2 {
  top: 30px;
  left: 30%;
  animation-delay: 1s;
}

.noot-3 {
  top: 90px;
  left: 60%;
  animation-delay: 1.5s;
}

.noot-4 {
  top: 40px;
  left: 90%;
  animation-delay: 2s;
}

@keyframes notes {
  0% {
    transform: scale(1) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: scale(1.5) translate(50%, -50%);
  }
  80% {
    opacity: 0;
    transform: scale(1.5) translate(100%, -100%);
  }
  100% {
    transform: scale(1.5) translate(100%, -100%);
    opacity: 0;
  }
}
</style>

<div class="muzieknootjes">
  <div class="noot-1">
  &#9835; &#9833;
</div>
<div class="noot-2">
  &#9833;
</div>
<div class="noot-3">
  &#9839; &#9834;
</div>
<div class="noot-4">
  &#9834;
</div>
</div>

Ce vreau sa fac?
a. Vreau sa modific notele muzicale simfonice, cu cifre sau eventual cu nume de orase din Romania.
b. Eventual daca se poate, sa adaug un sunet (cred eu), de pe un alt site poate special.
c. Totusi, am impresia ca vreau mult si cunosc putin.

Multumesc anticipat!

Parerea mea e ca ar trebui sa studiezi mai mult HTML si CSS daca vrei sa faci ceva in acest domeniu.

Pentru sunet, cauta pe interneet "Adaugare sunet in pagina html" , si vezi ce gasesti.
Pentru modificarle notelor cu cifre sau nume, modifici datele din codul html, dintre Div-uri.
Exemplu:

Cod: Selectaţi tot

<style>
#body_notes {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
  color: white;
}

.muzieknootjes {
  display: block;
  margin: auto;
  position: relative;
  width: 50%;
  min-width: 300px;
  height: 200px;
  border: 0px solid #000;
}

.noot-1,
.noot-2,
.noot-3,
.noot-4 {
  position: absolute;
  animation: notes 2s infinite linear;
  font-size: 35px;
  opacity: 0;
}

.noot-1 {
  top: 60px;
  left: 0;
  animation-delay: 0.5s;
}

.noot-2 {
  top: 30px;
  left: 30%;
  animation-delay: 1s;
}

.noot-3 {
  top: 90px;
  left: 60%;
  animation-delay: 1.5s;
}

.noot-4 {
  top: 40px;
  left: 90%;
  animation-delay: 2s;
}

@keyframes notes {
  0% {
    transform: scale(1) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: scale(1.5) translate(50%, -50%);
  }
  80% {
    opacity: 0;
    transform: scale(1.5) translate(100%, -100%);
  }
  100% {
    transform: scale(1.5) translate(100%, -100%);
    opacity: 0;
  }
}
</style>

<div id='body_notes'>
<div class='muzieknootjes'>
  <div class='noot-1'>EU</div>
<div class='noot-2'>Viata</div>
<div class='noot-3'>Visare</div>
<div class='noot-4'>Trezire</div>
</div>
</div>

Demo:

EU

Viata

Visare

Trezire

Multumesc pentru raspuns si pentru solutia de cod.