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

Hey, so here is a border special to see what tricks can be made on the border using CSS.

border property

When it comes to borders, the first thing that comes to mind is borderthat the most commonly used one is,, solidwhich dashedappears in the picture above dashed.

In addition to the most common solid, dashed, also supports CSS border none, hidden, dotted, double, groove, ridge, inset, outsetand other styles. Remove none, hiddenand look at all the border styles that are natively supported:

That's all for the basics. If you want to implement a border of other styles, or add animation to the border, you need to cooperate with some other attributes, or get a lot of ideas. OK, let's take a look at some additional interesting borders.

Frame length change

Let's start with a relatively simple one, to achieve a border effect similar to this:

Here are actually two pseudo-elements borrowed from the element. Two dummy elements are provided only on the left border, lower, right border, by hoverchanging the aspect to two dummy elements. 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);
    }
}

Next, some difficulties will start to deepen.

Dotted border animation

Use dashedkeywords, you can easily create a dotted border.

div {
    border: 1px dashed #333;
}

Of course, our goal is to make the frame move. Use dashedthe keyword is no way. However, there are many ways to implement dashed lines in CSS. For example, gradients are 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, the dashed line simulated with a gradient is as follows:

Well, gradients support multiple gradients. We can use gradients to represent all 4 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, so far, our dotted border animation is actually more than half completed. Although border-style: dashednot support animation, but it supports gradient. We give the above plus a div hovereffect, hoveradd a time animationanimation, elements of change background-positioncan be.

div:hover {
    animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

OK, look at the effect, when the hover goes up, the border can move , because the entire animation is connected end to end, the infinite loop animation looks like the dotted border is moving all the time, this is a small blind trick or trick :

Here is another little trick, if we want the animation of the dashed border to transition from other borders to the dashed border, and then proceed with the animation. Gradient is also entirely possible to simulate, if you want to save some code, borderbe faster, 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 on the box model, there will be a very obvious sense of dislocation visually:

To solve this problem, we can borderreplace outline, because outlineyou can set outline-offset. Can solve this problem perfectly:

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

Finally, look at the effect applied to the actual button:

Other magical uses of gradients

Using gradients, not only can achieve the above-mentioned effects.

We continue to dig deeper into the gradient and use it to achieve such a background:

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 graphic generated by the pseudo element of the element is used here, and the width and height are all of the parent element 200%, beyond the rule overflow: hidden.

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, and a nice frame animation will come out (the animation will show translucent elements, which is convenient for understanding the principle):

Change the color of the gradient

After mastering the above basic skills, we can make some adjustments to the colors of the gradient. 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 such a graph:

Similarly, let it rotate together, and a border animation of monochrome chasing comes out:

Wow, it looks good. However, if it is a single line, there is an obvious defect, that is, the end of the frame is a small triangle instead of vertical. It may not be suitable for some scenes or PM can not accept it.

Is there any way to eliminate these small triangles? Yes, in the following we will introduce another method to use clip-pathand eliminate these small triangles.

conic-gradient Magical effect

Re-introduced clip-pathbefore the first corner to talk about gradual change.

The linear gradient is mainly used above linear-gradient. We use the gradient angle conic-gradientin fact, it can also achieve exactly the same effect.

We try to use conic-gradientalso realized again, this time in a different style of Diablo. 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 renderings and schematic diagrams are as follows. Rotate a part of the angular gradient graphics, and use another pseudo element to mask the middle part, and only the line part can be omitted:

clip-path Magical effect

It's an old friend again clip-path, it will never be absent for interesting things.

clip-path It can animate the coordinate points, transforming from one cropping shape to another cropping shape.

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 picture and the schematic diagram together:

Here, because it will cut elements borrowed from pseudo-elements and animations can be cut as a background, using clip-paththe advantages of the cutting out of the border will not produce a small triangle. At the same time, this approach is also supported fillet border-radiusof.

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

overflow Magical effect

The following technique is implemented using overflow. To achieve such a border animation:

Why is it use overflow to achieve?

Post a schematic diagram:

Two core points:

1. We use overflow: hiddento hide a whole element originally outside the container
2. Used transform-origin, controlled the center of rotation of the element

Didn't find out, in fact, almost most of the interesting CSS effects use similar techniques:

Simply put, the animation we see is only a small part of the original phenomenon. Through specific cropping, changes in transparency, masking, etc., we finally see only a part of the original phenomenon.

border-image Magical effect

Using border-image, we can also implement some interesting border animations. Regarding border-image, there is a very good explanation article-the correct usage of border-image. This article does not explain the basic definition too much.

If we have such a picture:

You can use border-image-sliceand border-image-repeatthe characteristics of the border to get a similar 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 be extended to any size container border:

Then, in this article - [How to Animate a SVG with border-image] , it is also to explain the use of a border-imageframe animation, very cool.

The difference from the above example is that we only need to make our pattern move, that is, we need such a background image:

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

border-image Use gradient

border-imageIn addition to a reference map urloutside but also can be filled directly or color gradient.

Before also an article on the border-imagearticle - [ingenious realization rounded gradient border] github.com/chokcoco/iCSS/issues/77

We can use border-image+ filter+ to clip-pathachieve the rounded border of the gradual 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-rotate(360deg);
    }
}