This is the 26th day of my participation in the August Text Challenge.More challenges in August

Author: battleKing warehouse: Github, CodePen blog: CSDN, nuggets feedback email: [email protected] Special statement: original is not easy, shall not be reproduced without authorization or plagiarism, if need to be reproduced can contact the author authorized

background

Rainbow run color border effect: Rainbow run color border is a commonly used CSS border effect, compared to other monochrome border, mainly play to highlight the button or a specific area of the content, to attract the attention of the reader. Let’s use CSS code to achieve this effect.

The final result

Add HTML files

  1. HTMLThe part is as simple as adding a class namegradient-border 的 div
<div class="gradient-border">css<br />is<br />handsome</div>
Copy the code

2. Add the CSS file

Initialize the page first

  1. Set up the* 为 box-sizing: border-box
  2. Set up thebodyKeep the whole project centered

CSS global variables

  1. CSS global variables are declared in:rootIn the document root element, the syntax is--*
  2. CSS global variables use syntax forvar(--*)
  • The statement
:root{-border-width: 3px;
}
Copy the code
  • use
.gradient-border{
    border-radius: var(--border-width);
}
Copy the code

The main CSS code

.gradient-border{-border-width: 3px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 200px;
    font-family: Lato, sans-serif;
    font-size: 2.5 rem;
    text-transform: uppercase;
    color: white;
    background: # 222;
    border-radius: var(--border-width);
}

.gradient-border::after {
    position: absolute;
    content: "";
    top: calc(-1 * var(--border-width));
    left: calc(-1 * var(--border-width));
    z-index: -1;
    width: calc(100% + var(--border-width) * 2);
    height: calc(100% + var(--border-width) * 2);
    background: linear-gradient(60deg.#5f86f2.#a65ff2.#f25fd0.#f25f61.#f2cb5f.#abf25f.#5ff281.#5ff2f0);
    background-size: 300% 300%;
    background-position: 0 50%;
    border-radius: calc(2 * var(--border-width));
    animation: moveGradient 4s alternate infinite;
}

@keyframes moveGradient {
    50% {
        background-position: 100% 50%; }}Copy the code

❤️ thank you

If this article is helpful to you, please support it by clicking a “like”. Your “like” is my motivation for writing.

If you like this article, you can “like” + “favorites” + “forward” to more friends.