Posted on Jan 21, 2021 • Edited on May 17, 2021

Snake border animation CSS

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>

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; }