Hello, guys in this tutorial we will create an animated snake border using HTML & CSS.
CSS Border Style
The border-style property specifies what kind of border to display.
The following values are allowed:
solid – Defines a solid borderdashed – Defines a dashed borderdotted – Defines a dotted borderdouble – Defines a double borderinset – Defines a 3D inset border.ridge – Defines a 3D ridged border.outset – Defines a 3D outset border.groove – Defines a 3D grooved border.none – Defines no borderhidden – Defines a hidden border
The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).
First, we need to create two files index.html and style.css then we need to do code for it.
Click here to learn more about border style
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 https-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;
}
i copied thesame but mine is behaving differently, hmmm