I visited the blog site - shoptalkshow today , and it was very interesting to see such an interface:
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);
}
}
复制代码CodePen Demo -- width border animation
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:
Okay, 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. This problem can be solved perfectly:
div {
outline: 1px solid #333;
outline-offset: -1px;
&:hover {
outline: none;
}
}
复制代码Finally, 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, because of the special relationship between the background and border, when using the border by modifying
background-positioncan be resolved, it is to compare around. Regarding the filling relationship between the background and the border, you can read this article: Multiple implementations of striped borders
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 semi-transparent elements, which is convenient to understand the principle):
The complete code of the above Demo is as follows. I first saw this effect by this author - Jesse B
CodePen Demo -- gradient border animation
Change the color of the gradient
After mastering the above basic skills, we can make some adjustments to the color of the gradient. We will change 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:
CodePen Demo -- gradient border animation 2
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, which may not be suitable for some scenes or the PM cannot accept it.
Is there any way to eliminate these small triangles? Yes, in the following we will introduce a 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:
CodePen Demo -- Rotating border 3
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%);
}
}
复制代码Effect picture and schematic diagram together:
CodePen - clip-path border animation
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:
CodePen - clip-path border animation 2
overflow Magical effect
The following technique is implemented using overflow. To achieve such a border animation:
Why is it use overflowto achieve?
Post a schematic diagram:
CodePen Demo - Use overflow and transform to achieve line hover effect
Two core points:
- We use
overflow: hiddento hide a whole element originally outside the container - Used
transform-origin, controlled the center of rotation of the element
Did you 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 article to explain 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:
CodePen Demo -- border-image Demo
Then, in this article - How to Animate A border-Image with SVG , 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 patterns move, that is, we need such a background image (Nuggets do not support SVG moving images, the original image address ):
Then, we can also get the moving border image, the code is exactly the same, but the border is moving:
CodePen Demo -- Dancing Skull Border
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 - cleverly achieved with rounded corners gradient border
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);
}
}
复制代码
CodePen Demo - clip-path, border-image and filter to achieve rounded gradient border
Finally, if you need these materials, you can click here to get them
