Home » CSS border animation effect with HTML and CSS

CSS border animation effect with HTML and CSS

by techmidpoint
CSS border animation effect with HTML and CSS

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

You may also like

Leave a Comment