3.9K
CSS border animation effect with HTML and CSS
Welcome to the techmidpoint tutorial. In this tutorial, you will learn CSS border animation effects with HTML and CSS. When the animation is running it changes the background color of the border in every corner. Just copy the given source code and paste it into your text editor to see the results.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS border animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
</div>
</body>
</html>
CSS
html, body {
height: 100%;
}
body {
position: relative;
background-color: #0f222b;
}
*, *::before, *::after {
box-sizing: border-box;
}
.box, .box::before, .box::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.box {
width: 200px;
height: 200px;
margin: auto;
border:5px solid #fff;
}
.box::before, .box::after {
content: '';
z-index: -1;
margin: -7%;
box-shadow: inset 0 0 0 5px;
animation: clipMe 8s linear infinite;
}
.box::before {
animation-delay: -4s;
}
.box:hover::after, .box:hover::before {
background-color: rgba(255, 0, 0, .3);
}
@keyframes clipMe {
0%, 100% {
clip: rect(0px, 220px, 2px, 0px);
color: yellow;
}
25% {
clip: rect(0px, 2px, 220px, 0px);
color: orange;
}
50% {
clip: rect(218px, 220px, 220px, 0px);
color: violet;
}
75% {
clip: rect(0px, 220px, 220px, 218px);
color: yellowgreen;
}
}
For More Tutorials Please Click Here
