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>