Love you all (HTML5 & CSS3)

index.html

<div class="hint">
  <p>Bitte die drei Herzen in unterschiedlicher Art animieren.</p>
  <button class="closeme" type="button">
    <span aria-hidden="true">
      x
    </span>
    <span class="visuallyhidden">
      Das Hinweisfenster schliessen!
    </span>
  </button>
</div>
<div class="back"></div>
<div class="love love-0"></div>
<div class="love love-1"></div>
<div class="love love-2"></div>

love-you-all-html5-css3.markdown

Love you all (HTML5 & CSS3)

Vollversion: https://gist.github.com/jensgro/2de2703ce2033c11c50c341a23447af3

A Pen by Jens Grochtdreis on CodePen.

License.

script.js

// no js

style.css

/* Auch der Hintergrund kann pulsieren */
.back {
  position: fixed;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(252, 235, 236);
}

/* Extra die allgemein gültigen Eigenschaften und Werte auf eine Klasse konzentriert. Ist im Original nicht so. */
.love {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.love::before,
.love::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.love-0 {
  background-color: rgb(207, 105, 112);
  width: 250px;
  height: 250px;
}
.love-0::before {
  background-color: rgb(207, 105, 112);
  width: 250px;
  height: 250px;
  top: -125px;
  left: 0px;
}
.love-0::after {
  background-color: rgb(207, 105, 112);
  border-radius: 50%;
  width: 250px;
  height: 250px;
  left: 125px;
  top: 0px;
}
/*love-1*/
.love-1 {
  background-color: rgb(231, 132, 139);
  width: 125px;
  height: 125px;
}
.love-1::before {
  background-color: rgb(231, 132, 139);
  width: 125px;
  height: 125px;
  top: -62.5px;
  left: 0px;
}
.love-1::after {
  background-color: rgb(231, 132, 139);
  width: 125px;
  height: 125px;
  left: 62.5px;
  top: 0px;
}

/*love-2*/
.love-2 {
  background-color: pink;
  width: 62.5px;
  height: 62.5px;

}
.love-2::before {
  background-color: pink;
  width: 62.5px;
  height: 62.5px;
  top: -31.25px;
  left: 0px;
}
.love-2::after {
  background-color: pink;
  width: 62.5px;
  height: 62.5px;
  left: 31.25px;
  top: 0px;
}


/* Hinweisbox */
.hint {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 0 40px;
  font-size: 1.25rem;
  font-family: sans-serif;
}

.visuallyhidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;

  white-space: nowrap;

  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.closeme {
  background-color: #ddd;
  border: none;
  font-size: 2rem;
  padding: 0 10px;
  position: absolute;
  top: 10px;
  right: 20px;

  display: none;
}