How to Create Rotating Border Animation in CSS

Rotating Border Animation in CSS

Rotating Border Animation is a common web element that is used in many different places. This type of border animation can be used in various buttons, login forms, profile cards, etc. There is no substitute for this type of Rotating Border Animation to enhance the beauty.

You can create this kind of simple animation using Pure CSS. Four colors have been used for the 4 edges of the box. These colors revolve around the elements. If you want to know how these are made then this tutorial will help you.

Rotating Border Animation CSS

Here I have given three sections. First I gave a preview which is above. From this preview, you can learn how it works. Then I gave a step-by-step tutorial. 

And at the end of all, there is a button with the help of which you can directly download the code needed to create this Rotating Border Animation CSS.


See the Pen Untitled by Shantanu Jana (@shantanu-jana) on CodePen.

Now the question arises in your mind about how it was made. So let us know from the tutorial below how I made it. For this, I have used only HTML CSS.

1. Make a box on the webpage

Using the HTML and CSS codes below, I have created a box that looks around the animation.


<div class="rainbow">
 
</div>

I have designed the webpage using the following CSS. Here are some basic designs of web pages and the use of the background color black.


*, *::before, *::after {
box-sizing: border-box;
}

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #111c1f;
}

Box width: 400px, height: 300px used. In this step, we will not see the box because no background color has been used.


.rainbow {
position: relative;
z-index: 0;
width: 400px;
height: 300px;
border-radius: 10px;
overflow: hidden;
padding: 2rem;
}

2. Add Rotating Border to the box

Now I have added color animation in the background of the box. Here I have used four colors. Then a rotating animation of 4 seconds was used. 

That animation has been executed by @keyframes. Since this box has four edges, we can see each color on each edge for one second.


.rainbow::before {
content: "";
position: absolute;
z-index: -2;
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-repeat: no-repeat;
background-size: 50% 50%, 50% 50%;
background-position: 0 0, 100% 0, 100% 100%, 0 100%;
background-image: linear-gradient(#399953, #399953), 
linear-gradient(#fbb300, #fbb300), 
linear-gradient(#d53e33, #d53e33), 
linear-gradient(#377af5, #377af5);
-webkit-animation: rotate 4s linear infinite;
        animation: rotate 4s linear infinite;
}

@-webkit-keyframes rotate {
100% {
  transform: rotate(1turn);
}
}

@keyframes rotate {
100% {
  transform: rotate(1turn);
}
}

Add Rotating Border to the box

3. One more box on the colorful box

As you can see from this animation in the whole box. Now we need to create one more box on top of this box.

For this I used After Effects (":: after") and made a box of 12px less size than the total size of this box in that big box. As a result, we see a color animation of 12 pixels all around. 

I used left and top to adjust the position of the box. I used white as the background color of the box. Here you can use any other text, image, color, etc.


.rainbow::after {
content: "";
position: absolute;
z-index: -1;
left: 6px;
top: 6px;
width: calc(100% - 12px);
height: calc(100% - 12px);
background: white;
border-radius: 5px;
}

One more box on the colorful box

 Now, this Rotating Border Animation is absolutely ready to use in any project. You can copy this project and use it in any of your works. 

Or you can implement this CSS Border Animation in any element using the same method. If you can't connect the codes above, use the button below.







Comments

Post a Comment

Tell me what you think ??😎

Popular posts from this blog

Splash Image Mask Using HTML and CSS (Free Code)

Image
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image.  Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image.  Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file.  Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code: The following
Read more

Simple Day Night Toggle Button Using HTML and CSS

Image
Day-Night Toggle Button is a common web element that is often found on websites. This Day Night Toggle Switch in the navigation bar helps to choose the dark and light theme of the website. Currently, the Day And Night Toggle Switch can be seen on almost all major websites starting from Facebook and Instagram. Demo Download This article will help you to know step by step how to create Day Night Toggle Button using CSS . This type of CSS Toggle Button is used to create HTML checkboxes . Here's how to easily create a Toggle Switch using the checkboxes. CSS Day Night Toggle Button Although there are many such tutorials on the Internet. But here I will tell you how to make Day Night Toggle Button and how to implement it in your project. A check box was first created using HTML input to create this button. Then that checkbox is shaped like a button by CSS. To make CSS Day Night Toggle Switch you must have some idea about HTML and CSS. This is not the first time I ha
Read more

Simple RGB Color Generator Using JavaScript & CSS

Image
In this article, you will learn how to create RGB Color Generator using JavaScript. Earlier I shared with you the project of different types of JavaScript color generators . Some projects create background colors, some gradient colors, and some generate random colors.  Using this simple RGB Color Generator you can manually generate RGB color . It is much more modern and professional than other color generators. Here you can mix different colors together and create gradients.  This JavaScript RGB Color Generator project has various control buttons. With the help of which you can create gradients by adding colors in different ways.  JavaScript RGB Color Generator Many times I use different applications or websites to create my gradient color . In that case, such a project will help you. You can get the required code of the color you have created from here. Which you can copy directly and use as CSS code. Below I have given a demo that will help you to know how this project (RGB Color
Read more