The effect of CSS dynamic gradient border rotating around the content area (example code)

Rendering

After looking up relevant information online, I found that most of the current implementation methods of dynamic gradient borders are to use a pseudo-element that is larger than the content area and then move the gradient background horizontally, but there is no effect of the gradient border rotating around the content area. So I made a demo like this for your reference.

Implementation principle

First, nest the content area into a DIV box and set overflow: hidden;. The size of this box is the size of the content area plus the width of the gradient border you wish to achieve, and then the content area is centered so that there is a white space between the content area and the parent element that appears to be a border.
Now add a box that is larger than the parent element and has a gradient background in this blank area, and set the layer to the lowest z-index: -1;. Then add the rotation animation to the box with the gradient background and you're done.
It looks quite complicated, but the actual structure is very simple. As long as you have a rough three-dimensional sense in your mind, you can immediately understand the principle behind it.

HTML Structure

<body>
    <!-- The outermost layer only serves to limit the size of the gradient area-->
    <div class="wrap">
        <!-- Gradient display area -->
        <div class="bgc"></div>
        <!-- Contents -->
        <div class="content"></div>
    </div>
</body>

CSS

<style>
        /* Elastic box to center the demo*/
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* The outermost layer is used to hide the overflowing .bgc in the middle. The size can be adjusted freely according to the content area and border size*/
        .wrap {
            width: 300px;
            height: 300px;
            overflow: hidden;
            position: relative;
            border-radius: 20px;
            /* The elastic box makes the content area centered */
            display: flex;
            align-items: center;
            justify-content: center; 
        }
        /* The actual content of the final dynamic gradient border is larger than .wrap, but the overflow part is hidden and the middle part is covered by .content due to the hierarchical relationship. Finally, only the gap between .wrap and .content shows the rotating gradient background*/
        .bgc {
            width: 500px;
            height: 500px;
            background: linear-gradient(#fff,#448de0);
            animation: bgc 1.5s infinite linear;
            border-radius: 50%;
            position: absolute; 
            z-index: -1;
        }
        /* The content area adjusts its size according to its own situation*/
        .content {
            width: 250px;
            height: 250px;
            background-color: #fff;
            border-radius: 20px;
        }
 /* Gradient color background rotation animation */
        @keyframes bgc {
            0% {
                transform: rotateZ(0);
            }

            100% {
                transform: rotateZ(360deg);
            }
        }
    </style>

In order to help everyone understand the hierarchical relationship more clearly, I made a 3D relationship diagram. The closer the arrow is to the direction it points to, the higher the level. The smallest solid square is the content area, and the largest blue circle is the rotating gradient background, but the part that exceeds the size of the middle box is hidden.

Summarize

The above is the effect of CSS dynamic gradient color border rotating around the content area introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<: JavaScript Basics Objects

>>: The past two years with user experience