DEV Community

loading...
Cover image for Snake border animation CSS

Snake border animation CSS

stackfindover profile image Stackfindover ・2 min read

Hello, guys in this tutorial we will create an animated snake border using HTML & CSS.

First, we need to create two files index.html and style.css then we need to do code for it.

Snake border animation Step:1

Add below code inside index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Rotating Border Animation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="anim-border">
      <img src="rahul.jpg">
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Snake border animation Step:2

Then we need to add code for style.css which code i provide in below screen.

* {
    padding: 0;
    margin: 0;
    font-family: 'IBM Plex Sans', sans-serif;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #f1f2f3;
}
@-webkit-keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}
@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}
.anim-border {
    position: relative;
    z-index: 0;
    width: 300px;
    height: auto;
    border-radius: 10px;
    overflow: hidden;
    padding: 2rem;
}
.anim-border::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #b7a7ff;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#2e00ff, #917af9);
    -webkit-animation: rotate 4s linear infinite;
    animation: rotate 4s linear infinite;
}
.anim-border::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 6px;
  top: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  background: white;
  border-radius: 5px;
} 
.anim-border img {
    width: 100%;
}
.container {
    max-width: 1060px;
    margin: auto;
}
Enter fullscreen mode Exit fullscreen mode

Snake border animation Output:

Trending Responsive Menu
Advance Hover Animation

Discussion (3)

pic
Editor guide
Collapse
vikkio88 profile image
Vincenzo

it would be nice to have a codepen or a hosted demo of the example too

Collapse
bc profile image
Collapse
jupiteris profile image