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.
