Connect with us!

Lock Icon shake Animation CSS HTML

The lock icon appears when the screen is locked. Have you ever wondered how to create it using CSS and add a shaking animation. In this tutorial we design the lock symbol and shake animation.

Following is the CSS Class for Lock Icon Symbol.

.lock {
  font-size: 8px;
  position: relative;
  width: 18em;
  height: 13em;
  border-radius: 2em;
  top: 10em;
  box-sizing: border-box;
  border: 3.5em solid white;
  border-right-width: 7.5em;
  border-left-width: 7.5em;
  margin: 0 0 6rem 0;
}
.lock:before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  border: 2.5em solid white;
  width: 14em;
  height: 12em;
  left: 50%;
  margin-left: -7em;
  top: -12em;
  border-top-left-radius: 7em;
  border-top-right-radius: 7em;
}
.lock:after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  border: 1em solid gainsboro;
  width: 5em;
  height: 8em;
  border-radius: 2.5em;
  left: 50%;
  top: -1em;
  margin-left: -2.5em;
}

The above code creates a static output:

Lock

The following code is to add animation to the Yin Yang symbol. We will try to spin the symbol. Shake animation vibrate on animation.

@keyframes shake {
  10%,
  90% {
    transform: translate(-1px, 0);
  }

  20%,
  80% {
    transform: translate(4px, 0);
  }

  30%,
  50%,
  70% {
    transform: translate(-8px, 0);
  }

  40%,
  60% {
    transform: translate(8px, 0);
  }
}

Below is the Lock icon animation

Lock animation

You can find the complete coding in Visual Studio Code tutorial in the following YouTube Video.

Here is the complete code for creating Lock animation with CSS animation using  HTML and CSS:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .lock {
        font-size: 8px;
        position: relative;
        width: 18em;
        height: 13em;
        border-radius: 2em;
        top: 10em;
        box-sizing: border-box;
        border: 3.5em solid white;
        border-right-width: 7.5em;
        border-left-width: 7.5em;
        margin: 0 0 6rem 0;
        animation: shake 2s linear infinite;
      }
      .lock:before {
        content: "";
        box-sizing: border-box;
        position: absolute;
        border: 2.5em solid white;
        width: 14em;
        height: 12em;
        left: 50%;
        margin-left: -7em;
        top: -12em;
        border-top-left-radius: 7em;
        border-top-right-radius: 7em;
      }
      .lock:after {
        content: "";
        box-sizing: border-box;
        position: absolute;
        border: 1em solid gainsboro;
        width: 5em;
        height: 8em;
        border-radius: 2.5em;
        left: 50%;
        top: -1em;
        margin-left: -2.5em;
      }
      @keyframes shake {
        10%,
        90% {
          transform: translate(-1px, 0);
        }

        20%,
        80% {
          transform: translate(4px, 0);
        }

        30%,
        50%,
        70% {
          transform: translate(-8px, 0);
        }

        40%,
        60% {
          transform: translate(8px, 0);
        }
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1 class="h1">Lock Animation</h1>
    <div class="lock"></div>
  </body>
</html>

Thank you for reading. I hope that it has helped you with your project. Good luck and happy coding!

See you in another tutorial!

Related Posts

Trending now

Creating Six Sided Star for rating using HTML and CSS
Creating Diamond using HTML and CSS
Creating Triangle using HTML and CSS
Creating Trapezoid using HTML and CSS