Effect of CSS dynamic gradient border rotating around content area (instance code)

Posted on

Design sketch

After consulting the relevant materials on the Internet, it is found that most of the current implementation methods of dynamic gradient frame are realized by using pseudo elements that are one circle larger than the content area and then moving the gradient background horizontally. There is no effect of gradient frame rotating around the content area. I have made a demo like this for your reference.

Realization principle

   first nest the content area into a div box and set overflow: hidden;. The size of the box is the size of the content area plus the width of the gradient border you want to achieve, and then center the content area so that there is a blank area between the content area and the parent element that looks like a border.
                        ;. Then add the box with the gradient background to the rotation animation.
It seems rather complicated, but the actual structure is very simple. As long as you can have a general three-dimensional feeling in your mind, you can understand the principle immediately.

html structure

<body>
    <! -- the outermost layer only limits the size of the gradient area -- >
    <div class="wrap">
        <! -- gradient display area -- >
        <div class="bgc"></div>
        <! -- content -- >
        <div class="content"></div>
    </div>
</body>

CSS

<style>
        /*Elastic box centers demo*/
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /*The outermost layer is used to hide the overflow part of the. BGC in the middle 
        Size can be adjusted freely according to content area and border size*/
        .wrap {
            width: 300px;
            height: 300px;
            overflow: hidden;
            position: relative;
            border-radius: 20px;
            /*Elastic box to center content area*/
            display: flex;
            align-items: center;
            justify-content: center; 
        }
        /*In the end, the actual content of the dynamic gradient frame is larger than that of. Wrap, but the overflow part is hidden 
        And the middle part is covered by. Content because of hierarchy 
        Finally, only the gap between. Wrap and. Content shows the rotated 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;
        }
        /*Content area resizes according to its own situation*/
        .content {
            width: 250px;
            height: 250px;
            background-color: #fff;
            border-radius: 20px;
        }
 /*Gradient background rotation animation*/
        @keyframes bgc {
            0% {
                transform: rotateZ(0);
            }

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

 

In order to let you understand the hierarchical relationship more clearly, I have made a 3D effect diagram. The closer the arrow is, the higher the level is. The smallest solid box is the content area, the largest blue circle is the gradient background for rotation, but the part beyond the size of the middle box is hidden.
 

summary

The above is the effect of CSS dynamic gradient frame rotating around the content area introduced by Xiaobian. I hope it can help you. If you have any questions, please leave me a message and Xiaobian will reply to you in time. Thank you very much for your support of the developepaer website!
If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you!

Leave a Reply

Your email address will not be published.