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

What to do if you forget your password in MySQL 5.7.17

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

What to do if you forget your password in MySQL 5.7.17

Practice of dynamically creating dialog according to file name in vue+el-element

Solution to BT Baota Panel php7.3 and php7.4 not supporting ZipArchive

Discussion on more reasonable creation rules for MySQL string indexes

Detailed tutorial on deploying SpringBoot + Vue project to Linux server

Detailed explanation of the group by statement in MySQL database group query

MySQL Optimization Summary - Total Number of Query Entries

Analysis of MySQL duplicate index and redundant index examples

MySQL index failure principle

MySQL Database Indexes and Transactions

Recommend

Share some key interview questions about MySQL index

A guide to writing flexible, stable, high-quality HTML and CSS code standards

A brief discussion on the implementation principle of Vue slot

MySQL 5.7 Common Data Types

Implementation steps of js object-oriented encapsulation cascading drop-down menu list

Design theory: On the issues of scheme, resources and communication

WeChat applet implements user login module server construction

Comparing Node.js and Deno

How to install Graphviz and get started tutorial under Windows

Introduction to the differences between HTML name, id, class (format/application scenario/features), etc.

Implementation of waterfall layout in uni-app project

Example of how to enable Slow query in MySQL

Discussion on the numerical limit of the ol element in the html document

Create a screen recording function with JS

How to solve the problem of too many open files in Linux