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

Responsive Web Design Learning (2) — Can videos be made responsive?

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

Responsive Web Design Learning (2) — Can videos be made responsive?

How to use JS to implement waterfall layout of web pages

Three Ways to Lock and Unlock User Accounts in Linux

How to run Python script on Docker

Native js to implement 2048 game

Detailed explanation of the solution to the error in creating a user and granting permissions in mysql8.0

A brief introduction to web2.0 products and functions

WeChat applet + ECharts to achieve dynamic refresh process record

JavaScript implements large file upload processing

Detailed explanation of the principle and function of Vue list rendering key

Recommend

js object-oriented method to achieve drag effect

Vue Element front-end application development dynamic menu and routing association processing

Java+Tomcat environment deployment and installation process diagram

Why is it not recommended to use index as the key attribute value in Vue?

How to use Nginx proxy to surf the Internet

More than 300 lines of CSS code to achieve the explosive special effects of WeChat 8.0

Detailed explanation on how to avoid the pitfalls of replacing logical SQL in MySQL

Vue form input binding v-model

Summary of commonly used tags in HTML (must read)

Introduction to Sublime Text 2, a web front-end tool

Some settings of Div about border and transparency

A brief discussion on the solution to the failure of starting the server installation in MySQL

MySQL latest version 8.0.17 decompression version installation tutorial

Issues with Rancher deployment and importing K8S clusters

React implements multi-component value transfer function through conetxt