How To Create Dancing Skull Border Animation

In this topic,

We are going to see how to create a dancing skull border animation.

Step-1: Create Html Code in the index.html file.

<body>
<div class="border-image-path"></div>
</body>

Step-2: Add CSS Code in the <style>…</style> on index.html file.

border-image It is also possible to directly fill colors or gradients in addition to texture references via URL.

To create a rounded border with gradient transformation, use border-image+ filter+ clip-path:

body, html {
  width: 100%;
  min-height: 100%;
  display: flex;
}
.border-image-path {
  width: 200px;
  height: 100px;
  margin: auto;
  border: 10px solid;
  border-image: linear-gradient(45deg, gold, deeppink) 1;
  clip-path: inset(0px round 10px);
  animation: huerotate 6s infinite linear;
  filter: hue-rotate(360deg);
}
@keyframes huerotate {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rorate(360deg);
  }
}

Review the below video.

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories