Cool Glowing Frame Effect

Description: Cool glowing animated frame, can be used to indicate activation or as click ripple effect

Dependencies: None

Mobile support: Yes

Image source: toyota.com

Inspiration: KIA Bongo start-up dash animation

Live(Click on the image):

style.css
.container {
  position: relative;
  background-color: rgb(61, 61, 61);
  width: min-content;
  padding: 50px;
}
#image {
  transform: scaleX(1);
  width: 200px;
}

.frame {
  top: 40px;
  left: 45px;
  height: 90px;
  width: 120px;
  position: absolute;
  transform: perspective(900px) rotateY(-35deg);
  opacity: 0;
  border-radius: 3px;
  pointer-events: none;
}
.above {
  border-right: 3px #fff solid;
  border-top: 3px #fff solid;
  border-bottom: 3px #fff solid;
  box-shadow: 0px 0px 0 #fff, 6px 1px 6px rgba(0, 0, 0, 0.35);
  z-index: 2;
}
.below {
  border-left: 3px #fff solid;
  box-shadow: 0 0 10px #9ecaed;
  padding-bottom: 5px;
}
@keyframes move-frame {
  5% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  80% {
    left: 120px;
    top: 40px;
    height: 90px;
    width: 120px;
  }
  100% {
    left: 230px;
    top: 85px;
    z-index: 0;
    width: 0;
    height: 0;
    opacity: 0;
  }
}
index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css">
    <title>Glowing Frame Effect</title>

  </head>
  <body>
    <div class="container">
      <div class="frame above"></div>
      <div class="frame below"></div>
      <img id="image" src="car.png" alt="" />
    </div>
  </body>

  <script>
    var img = document.getElementById("image");
    img.addEventListener("click", () => {
      var frames = document.getElementsByClassName("frame");
      for (var i = 0; i < frames.length; i++) {
        frames.item(i).style.animation="move-frame 2s ease-in-out 1";
      }
      setTimeout(() => {
        for (var i = 0; i < frames.length; i++) {
        frames.item(i).style.animation="";
      }
      }, 2000);
    });
  </script>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *