Implementation of CSS Fantastic Border Animation Effect

Today I was browsing the blog site - shoptalkshow, and saw this interface, which was very interesting:

I think its style is very unique, especially some of the borders.

Hey, so here’s a special article on borders to see what you can do with borders using CSS.

The border property

When talking about borders, the first thing that comes to mind border . The most commonly used ones are solid and dashed . dashed appears in the picture above.

In addition to the most common solid and dashed , CSS border also supports none , hidden , dotted , double , groove , ridge , inset , outset and other styles. Excluding none and hidden , take a look at all natively supported border styles:

These are the basics. If you want to implement a border of another style, or add animation to the border, you will need to use some other attributes, or use your imagination. OK, let's take a look at some additional interesting borders.

Border length changes

Let's start with a simpler one to achieve a border effect like this:

In fact, two pseudo-elements of the element are borrowed here. The two pseudo-elements only set the top and left borders and the bottom and right borders respectively, and change the height and width of the two pseudo-elements when hover . Very easy to understand.

div {
    position: relative;
    border: 1px solid #03A9F3;
     
    &::before,
    &::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
    }
     
    &::before {
        top: -5px;
        left: -5px;
        border-top: 1px solid var(--borderColor);
        border-left: 1px solid var(--borderColor);
    }
     
    &::after {
        right: -5px;
        bottom: -5px;
        border-bottom: 1px solid var(--borderColor);
        border-right: 1px solid var(--borderColor);
    }
     
    &:hover::before,
    &:hover::after {
        width: calc(100% + 9px);
        height: calc(100% + 9px);
    }
}

CodePen Demo -- width border animation

Next, we will start to increase the difficulty.

Dashed border animation

Using the dashed keyword, you can easily create a dashed border.

div {
    border: 1px dashed #333;
} 

Of course, our goal is to make the border animated. There is no way around this using the dashed keyword. But there are many ways to achieve dotted lines in CSS, such as gradient is a good way:

div {
    background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x;
    background-size: 4px 1px;
    background-position: 0 0;
}

Take a look at this dashed line simulated using a gradient:

OK, gradients support multiple gradients. We can use gradients on all four sides of the container:

div {
    background:
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
        linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
    background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
}

The effect is as follows:

OK, at this point, our dotted border animation is actually more than half completed. Although border-style: dashed does not support animation, gradients do support it. We add a hover effect to the above div, add an animation when hover , and change bakcground-position of the element.

div:hover {
    animation: linearGradientMove .3s infinite linear;
}
 
@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

OK, let’s see the effect. When you hover over it, the border moves. Because the whole animation is connected from beginning to end, the infinite loop animation looks like the dotted border is always moving. This is a little trick:

Here is another little trick. If we want the dotted border animation to transition from other borders to the dotted border and then move forward. It is also possible to simulate it completely with gradients. If you want to save some code, it will be faster to use border , such as this:

div {
    border: 1px solid #333;
     
    &:hover {
        border: none;
        background:
            linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
            linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
            linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
            linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
        background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
        background-position: 0 0, 0 100%, 0 0, 100% 0;
    }
}

Due to the difference in the position of border and background in the box model, there will be a very obvious visual misalignment:

To solve this problem, we can replace border with outline , because outline can set outline-offset . This can perfectly solve this problem:

div {
    outline: 1px solid #333;
    outline-offset: -1px;
     
    &:hover {
        outline: none;
    }
}

Finally, let’s take a look at the effect applied to the actual button:

The complete code of the above Demo is as follows:

CodePen Demo -- dashed border animation

In fact, due to the special relationship between the background and the border, when using border, the problem can be solved by modifying background-position , but it is more convoluted. For the relationship between background and border filling, you can refer to this article: Various ways to implement striped borders

Other Uses of Gradients

Using gradients can achieve more than just the effects mentioned above.

We continue to dig deeper into gradients and use gradients to achieve a background like this:

div {
    position: relative;
     
    &::after {
        content: '';
        position: absolute;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background-repeat: no-repeat;
        background-size: 50% 50%, 50% 50%;
        background-position: 0 0, 100% 0, 100% 100%, 0 100%;
        background-image: linear-gradient(#399953, #399953), linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33), linear-gradient(#377af5, #377af5);
    }
}

Note that the element's pseudo-element is used here to generate this graphic, and the width and height are both 200% of the parent element, and overflow: hidden if it exceeds the limit.

Next, add rotation to it:

div {
    animation: rotate 4s linear infinite;
}
 
@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

See the effect:

Finally, use a pseudo element to mask the middle part, and a nice border animation will appear:

The complete code of the above demo is as follows. I first saw this effect from the author--Jesse B

CodePen Demo -- gradient border animation

Change the color of the gradient

After mastering the basic techniques above, we can make some adjustments to the gradient colors. We will turn 4 colors into 1 color:

div::after {
    content: '';
    position: absolute;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 50% 50%;
    background-position: 0 0;
    background-image: linear-gradient(#399953, #399953);
}

Get a graph like this:

Similarly, let it rotate together, and a monochrome chasing border animation will appear:

CodePen Demo -- gradient border animation 2

Wow, looks pretty good. However, if it is a single line, there is an obvious flaw, that is, the end of the border is a small triangle instead of a vertical one, which may not be applicable in some scenes or the PM may not accept it.

Is there any way to eliminate these small triangles? Yes, in the following article we will introduce a method to eliminate these small triangles using clip-path .

The magic of conic-gradient

Before introducing clip-path , let's talk about angular gradient.

The above mainly uses linear gradient linear-gradient . We can actually achieve exactly the same effect using conic-gradient .

Let’s try using conic-gradient again, this time with a dark style. The core code is as follows:

.conic {
    position: relative;
     
    &::before {
        content: '';
        position: absolute;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background: conic-gradient(transparent, rgba(168, 239, 255, 1), transparent 30%);
        animation: rotate 4s linear infinite;
    }
}
@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

The effect diagram and schematic diagram are as follows. A partially angularly gradient shape is rotated, and the middle part is masked with another pseudo element, leaving only the line part exposed:

CodePen Demo -- Rotating border 3

The magic of clip-path

It’s our old friend clip-path again. It’s always there for interesting things.

clip-path itself can animate coordinate points, transforming from one clipping shape to another.

Using this feature, we can cleverly achieve such a border following effect. The pseudo code is as follows:

div {
    position: relative;
 
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 2px solid gold;
        animation: clippath 3s infinite linear;
    }
}
 
@keyframes clippath {
    0%,
    100% {
        clip-path: inset(0 0 95% 0);
    }
    25% {
        clip-path: inset(0 95% 0 0);
    }
    50% {
        clip-path: inset(95% 0 0 0);
    }
    75% {
        clip-path: inset(0 0 0 95%);
    }
}

The effect diagram is together with the schematic diagram:

CodePen - clip-path border animation

Here, because the element will be cropped, the pseudo-element can be used as the background for cropping and animation. The advantage of using clip-path is that the cut border will not produce a small triangle. At the same time, this method also supports rounded border-radius .

If we use another pseudo-element to actually implement a button style, we can get the following effect:

CodePen - clip-path border animation 2

The magic of overflow

The following trick uses overflow. To implement such a border animation:

Why is it said that it is achieved by using overflow ?

Post a schematic diagram:

CodePen Demo -- Using overflow and transform to achieve line hover effect

Two core points:

• We use overflow: hidden to hide the entire element that was originally outside the container
• transform-origin is used to control the rotation center of the element

Did you notice that almost all interesting CSS effects use similar techniques:

To put it simply, the animation we see is only a small part of the original phenomenon. Through specific cropping, changes in transparency, masking, etc., we can only see a part of the original phenomenon in the end.

The magic of border-image

Using border-image , we can also achieve some interesting border animations. Regarding border-image , there is a very good article explaining the correct usage of border-image. This article will not go into too much detail on the basic definition.

If we have a picture like this:

You can use the properties of border-image-slice and border-image-repeat to get a similar border pattern:

div {
  width: 200px;
  height: 120px;
  border: 24px solid;
  border-image: url(image-url);
  border-image-slice: 32;
  border-image-repeat: round;
}

On this basis, you can change the height and width of the element at will, so that it can expand to any size container border:

CodePen Demo -- border-image Demo

Next, in this article - How to Animate a SVG with border-image, a border animation using border-image is also explained, which is very cool.

What is different from the above example is that we just need to make our pattern move, that is, we need a background image like this (Blog Garden does not support SVG animations, original image address):

Then, we can also get a moving border image. The code is exactly the same, but the border is moving:

CodePen Demo -- Dancing Skull Border

border-image uses gradient

In addition to the texture reference url , border-image can also be directly filled with color or gradient.

There was also an article about border-image before - cleverly implement gradient borders with rounded corners

We can use border-image + filter + clip-path to achieve a rounded border with a gradient transformation:

.border-image-clip-path {
    width: 200px;
    height: 100px;
    border: 10px solid;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
    clip-path: inset(0px round 10px);
    animation: huerotate 6s infinite linear;
    filter: hue-rotate(360deg);
}
 
@keyframes huerotate {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rorate(360deg);
    }
} 

CodePen Demo -- clip-path, border-image plus filter to achieve rounded gradient border

at last

This article introduces some border animation tips that I think are interesting. Of course, there are many more interesting effects produced by CSS, but due to space limitations, I will not expand on them one by one.

This is the end of this article about the implementation of CSS creative border animation effects. For more related CSS border animation content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!