How to Create Border Animation using HTML/CSS ?

Hello Guys,

After long time, i am here with awesome border animation using html/css. Let's create it.

In this tutorial , we are making awesome animated border using html. Here we used to some html code and used some css code to making animated border.

Border Animation looking like below picture:

Let's get started.

Step 1 : Add HTML Code.

CODE :-

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Border Animation</title> </head> <body> <div></div> </body> </html>

Step 2 : Add CSS Code.

CODE :-

 

*{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #181920;
        }

        div{
            width: 220px;
            height: 220px;
            box-shadow: 16px 18px 20px #0000008c;
            border-radius: 79px;
            position: relative;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;

        }
        div::before{
           content: "";
           background-image: conic-gradient(
               #ffee00 , #00ff0d , #00b7ff 200deg,
               transparent 140deg
           );
           width: 110%;
           height: 110%;
           position: absolute;
           animation: rotate 2s linear infinite;
        }

        div::after{
            content: "Animation";
            width: 190px;
            height: 190px;
            background: #101010;
            position: absolute;
            border-radius: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #ffffff;
            font-size: larger;
            letter-spacing: 7px; 
            box-shadow: inset 10px 10px 10px #0000008c;  
        }


        @keyframes rotate {
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(-360deg);
            }
        }

Project Code :

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Border Animation</title>
  <style>
          *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #181920;
        }

        div{
            width: 220px;
            height: 220px;
            box-shadow: 16px 18px 20px #0000008c;
            border-radius: 79px;
            position: relative;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;

        }
        div::before{
           content: "";
           background-image: conic-gradient(
               #ffee00 , #00ff0d , #00b7ff 200deg,
               transparent 140deg
           );
           width: 110%;
           height: 110%;
           position: absolute;
           animation: rotate 2s linear infinite;
        }

        div::after{
            content: "Animation";
            width: 190px;
            height: 190px;
            background: #101010;
            position: absolute;
            border-radius: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #ffffff;
            font-size: larger;
            letter-spacing: 7px; 
            box-shadow: inset 10px 10px 10px #0000008c;  
        }


        @keyframes rotate {
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform: rotate(-360deg);
            }
        }

         
  
  
  </style>
</head>
<body>
    <div></div>
</body>
</html>

Output :-

I hope you like post. If you liked this post do comment ,share and promote the post 🙏 . Please stay with us and support. 🙏

PsInf0

How to Create Border Animation using HTML/CSS ?

Project Code :

Post a Comment

0 Comments

Recent Post

#9 Python Tutorial for Beginners

Popular Posts

How to Create Shimmer Effect in Android ?

Tags

Contact Form

Categories

Most Popular

How to Create Bottom Navigation Bar Animation in Android ?

How to add fingerprint scanner in android programmatically ?

How to Create Shimmer Effect in Android ?

Pages

Footer Menu Widget

PsInf0

How to Create Border Animation using HTML/CSS ?

Project Code :

Related Posts

Post a Comment

0 Comments

Recent Post

#9 Python Tutorial for Beginners

Popular Posts

How to Create Shimmer Effect in Android ?

Tags

Contact Form

Categories

Most Popular

How to Create Bottom Navigation Bar Animation in Android ?

How to add fingerprint scanner in android programmatically ?

How to Create Shimmer Effect in Android ?

Pages

Footer Menu Widget