SHOCKED! It is very unfair

why just for a one heart we have to code that much.i am a beginner.for me it is so annoying and hurting.

<style>
  .back {
    position: fixed;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    animation-name: backdiv;
    animation-duration: 1s;
   animation-iteration-count:infinite;
  }

  .heart {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: rotate(-45deg);
    animation-name: beat;
    animation-duration: 1s;
    animation-iteration-count:infinite;
     }
  .heart:after {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
  }
  .heart:before {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
  }

  @keyframes backdiv {
    50% {
      background: #ffe6f2;
    }
  }

  @keyframes beat {
    0% {
      transform: scale(1) rotate(-45deg);
    }
    50% {
      transform: scale(0.6) rotate(-45deg);
    }
  }

</style>
<div class="back"></div>
<div class="heart"></div>

Three things:

  1. CSS isn’t designed for drawing pictures. It can be used for very simple shapes very easily, and that doesn’t take much code. More complicated things are going to take more code to get around CSS’ limitations.
  2. That isn’t really that much code there, and shorthand versions of some of the properties haven’t been used to make it easier to understand (it would have been a few lines shorter otherwise).
  3. It uses two aspects of CSS (the styling and animations); animation syntax is quite verbose & removing it, just having the shape, would cut the code in half.
1 Like

This is aimed at equipping you with key CSS concepts before you venture into actual programming languages