Results show
Hello everyone, this is Yearth, welcome to 10 mins CSS, spend 10 minutes a day to achieve a simple and beautiful CSS effect.
So let’s get straight to the point. Let’s take a look at today’s results:
The key point
To analyze the key points of this effect:
- Mask layer frosted glass effect
- The bottom layer is a quarter of a round block, not a whole
The specific implementation
This effect is not complicated, let’s analyze the implementation of the above key points.
Frosted glass effect
In CSS, we use a backdrop – filter filter effects, specific can take a look at this article: backdrop – filter – | CSS Tricks.
Also, add a light background color to the mask layer:
.loader .cover {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
background: rgba(233.30.99.0.05);
border-radius: 50%;
backdrop-filter: blur(10px);
border: 1px solid rgba(255.255.255.0.1);
z-index: 2;
}
Copy the codeThe effect is as follows:
Color piece
In order to achieve the final quarter circle, there are quite a few options, but here are two simple ones.
clip-path- pseudo-classes
Let’s look at clip-path first. We know that, in theory, clip-Path can implement arbitrary graphics. Here is a recommended tool website: Clippy.
.loader .block {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
z-index: 1;
background: var(--loader-color);
clip-path: circle(50% at 0 0);
}
Copy the codeThe effect is as follows:
Rotate the transform: rotate is simple. Rotate the transform: origin in the upper left corner of the color block.
.loader .block {
/ *... * /
animation: rotate 1s linear infinite;
transform-origin: top left;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Copy the codeThe effect is as follows:
To achieve this effect with pseudo-classes, note the details: we can use blocks to implement the outline, and then use pseudo-classes to fill in the color, as follows:
.loader .block {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
z-index: 1;
overflow: hidden;
animation: rotate 1s linear infinite;
}
.loader .block::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 100%;
height: 100%;
background: var(--loader-color);
}
Copy the codeThe effect is as follows:
It’s in the back
Today’s effect is relatively simple, interested readers can see the online demo: Ground-glass Loader effect