Animated Border Image Effect using HTML and CSS.

6 Oct, 2022

Creating a Background Color Animation using HTML and CSS. Follow the Step by Step guide or Watch YouTube Video for Code.

Step 1: Create an borderani.html file and write basic HTML5 blocks.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
    content="width=device-width, 
    initial-scale=1.0" />
    <title>Border Animation</title>
    
  </head>
  <body>
  
  </body>
</html>

Step 2: Now, create one parent 'div' and one child 'div' with different classes.

<div class="box">
    <div class="mbox"></div>
</div>

Step 3: Final Step, Flex the main box to centre the child box then using transparent border add border multiple image for this we using only two black and white color.

:root{
    --angle:0deg;
}
@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
.box{
    margin-top: 5em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mbox{
    padding: 2em 5em;
    background: #dbdbdb;
    background-origin: border-box;
    z-index: 1;
    border: 0.2rem solid transparent;
    border-image: conic-gradient(from var(--angle),
    #000000 0deg 90deg,
    #ffffff 90deg 180deg,
    #000000 180deg 270deg,
    #ffffff 270deg 360deg)1;
    animation: rotate 2s linear infinite;
}
@keyframes rotate {
    to {
    --angle: 360deg;
    }
}

Done!

Pro Tips: In border Image you can use as many colours you want just arrange them between degree that's it.

Thanks for Reading, Follow for more tutorials like this on Instagram & YouTube. or Checkout other Blogs.

Blog

Step 1: Create an borderani.html file and write basic HTML5 blocks.

Step 2: Now, create one parent 'div' and one child 'div' with different classes.

Step 3: Final Step, Flex the main box to centre the child box then using transparent border add border multiple image for this we using only two black and white color.

0 Replies so far - Add your comment