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

Detailed explanation of Cgroup, the core principle of Docker

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

Detailed explanation of Cgroup, the core principle of Docker

How to change the Ali source in Ubuntu 20.04

How to view the execution time of SQL statements in MySQL

Detailed explanation of the difference between MySQL normal index and unique index

Problems with index and FROM_UNIXTIME in mysql

MySql cache query principle and cache monitoring and index monitoring introduction

HTML table markup tutorial (38): Border color attribute of the header BORDERCOLOR

Talk about important subdirectory issues in Linux system

Recommended 20 best free English handwriting fonts

Detailed tutorial on building a JMeter+Grafana+Influxdb monitoring platform with Docker

Recommend

MySQL table addition, deletion, modification and query basic tutorial

A brief discussion on JS packaging objects

The most detailed installation and configuration of redis in docker (with pictures and text)

Analysis of the method of setting up scheduled tasks in mysql

Vue implements div wheel zooming in and out

Share 5 helpful CSS selectors to enrich your CSS experience

Detailed instructions for installing SuPHP on CentOS 7.2

Understanding MySQL Locking Based on Update SQL Statements

Vue implements verification whether the username is available

Vue keeps the user logged in (various token storage methods)

Detailed explanation of permission management commands in Linux (chmod/chown/chgrp/unmask)

Detailed tutorial on how to install MySQL 5.7.18 in Linux (CentOS 7) using YUM

Best Practices for Deploying ELK7.3.0 Log Collection Service with Docker

Correct use of Vue function anti-shake and throttling

Are the value ranges of int(3) and int(10) the same in mysql