How To Make animated border effect using html css
Hello Viewer in this article I will teach how to create animated border effect help of html CSS. you know that css3 provides keyframes animation feature. in this project I will use CSS keyframes for creating an animated border. first step I will create a html document. after then I will make a CSS file. CSS files are linked in html head tag. after then I will create a div on html document that’s div class are box you can see in below code. you can also copy the below code.
CSS Responsive Timeline Animated Effect Using HTML CSS Only
HTML Code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="box">
<p>01</p>
</div>
</body>
</html>
Now we will work on CSS file. You can see I will create a animation that’s name is border animation you can see this in below code. Border animation is my animation name you can modified name according to your need. I have also use CSS keyframes for border animation. you can copy the source code in below.
How To Make animated border effect using html css
CSS Code
html,
body{
height: 100%; overflow: hidden;
}
body{
position: relative; background: #19164d;
}
.box::before, .box::after, .box{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.box{
width: 200px;
height: 200px;
margin: auto;
background: #0403035c;
background-size: cover;
background-position: center;
color: #69ca62;
box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
}
.box::before, .box::after{
content: "";
z-index: -1;
margin: -5%;
box-shadow: inset 0 0 0 2px #69ca62;
animation: borderanimation 8s linear infinite;
}
.box::before{animation-delay: -4s;}
p{
font-size: 105px;
font-weight: bold;
font-family: fantasy;
color: #69ca62;
padding-top: 35px;
margin: 0px;
text-align: center;
letter-spacing: 10px;
}
@keyframes borderanimation{
0%, 100%{
clip: rect(0px, 220px, 2px, 0px);
}
25%{
clip: rect(0px, 2px, 220px, 0px);
}
50%{
clip: rect(218px, 220px, 220px, 0px);
}
75%{
clip: rect(0px, 220px, 220px, 218px);
}
}
If you don’t understand this code. then you also watch a video tutorial.
Awesome CSS Border Animation | Quick CSS3 Animation Effects
