In the previous article, The Magic of a Single LINE of CSS code, we introduced a nice (or perhaps more appropriate) background that a single line of CSS code can generate.
This article will continue to introduce some interesting background knowledge, using some very small units, only a few lines of code, can produce a wonderful and interesting background effect ~
Order of magnitude effect on background graphics
The main characters of this paper are:
- Repeating-radial gradient
- Repeating-Conic-gradient
What is the order of magnitude on background graphics? Let’s look at an interesting phenomenon:
We use repeating-Conic-gradient multiple Angle gradient to realize a graph. The code is very simple, as shown below:
<div></div>
Copy the codediv {
width: 100vw;
height: 100vh;
background: repeating-conic-gradient(#fff.# 000.#fff 30deg);
}
Copy the code
will30degReplace with0.1 deg
We then replace the 30DEg in the code above with a very small value, something like this:
{
background: repeating-conic-gradient(#fff.# 000.#fff 0.1 deg);
}
Copy the codeWhat the hell is this? Imagine what this line of code would look like.
Look at the results:
Wow, incredible. 0.1deg is critical here, the smaller the Angle (less than 1deg is preferred), the cooler the image, which is the order of magnitude effect on the background image.
CodePen — One Line CSS Pattern
Use CSS @Property to observe the changes
Previously, if we had written the following transition code, we would not have gotten a tween animation, only a frame-by-frame animation:
div{
background: repeating-conic-gradient(#fff.# 000.#fff 0.1 deg);
transition: background 1s;
}
div:hover {
background: repeating-conic-gradient(#fff.# 000.#fff 30deg);
}
Copy the codeThis is only possible because CSS does not support direct transition animations for such complex gradients:
OK, next, using the knowledge of CSS @ Property introduced in this article, CSS @ Property, Making the Impossible Possible, we can use CSS @ Property to observe the process of their two states changing.
Simple code transformation, the core code is as follows:
@property --angle {
syntax: '<angle>';
inherits: false;
initial-value: 0.1 deg;
}
div{
background: repeating-conic-gradient(#fff.# 000.#fff var(--angle));
transition: --angle 2s;
}
html:hover {
--angle: 30deg;
}
Copy the code
Wow, looking for the effect of different orders of magnitude units on this graphic, accidentally got a transition animation that looked magical. You are strongly advised to click on the DEMO to feel the effect of the transformation:
CodePen — Repeating-Conic-gradient CSS Pattern Transition (Only Chrome 85+)
With the tween animation implemented by CSS @Property, we can see how a small unit of 0.1deg can affect the graph.
At the same time, the smaller the unit, the more details of the picture, you can try again.
Multiple radial gradients & Multiple angular gradients with small units for interesting backgrounds
Using some of the tricks mentioned above, we used repeating-radial gradient, repeating-Conic-gradient to generate some very interesting background images.
Just to name a few:
div {
background-image: repeating-radial-gradient(
circle at center center,
rgb(241.43.239),
rgb(239.246.244) 3px
);
}
Copy the code
div {
background-image: repeating-radial-gradient(
circle at 15% 30%.rgb(4.4.0),
rgb(52.72.197),
rgb(115.252.224),
rgb(116.71.5),
rgb(223.46.169),
rgb(0.160.56),
rgb(234.255.0) 2px
);
}
Copy the code
div {
background-image: repeating-radial-gradient(
circle at center center,
rgb(81.9.72),
rgb(72.90.223),
rgb(80.0.34),
rgb(34.134.255),
rgb(65.217.176),
rgb(241.15.15),
rgb(148.213.118) 0.1 px.
);
}
Copy the code
div {
background-image: repeating-radial-gradient(
ellipse at center center,
rgb(75.154.242),
rgb(64.135.228),
rgb(54.117.214),
rgb(43.98.200),
rgb(33.79.185),
rgb(22.60.171),
rgb(12.42.157),
rgb(1.23.143) 0.01 px.
);
}
Copy the code
Hey hey, don’t have some meaning, more interesting graphics can try their own, complete DEMO code, you can poke into here to see:
CodePen Demo — Magic Gradient Art
How small can it be?
Repeating-radial -gradient It is similar to radial-gradient() and takes the same parameters, but it repeats the color in all directions to cover its entire container.
Take the following code for example. How small can a single draw end point of 1px, which is the focus of this article, be?
:root {
--length: 1px
}
{
background-image: repeating-radial-gradient(
circle at 17% 32%.rgb(4.4.0),
rgb(52.72.197),
rgb(115.252.224),
rgb(116.71.5),
rgb(223.46.169),
rgb(0.160.56),
rgb(234.255.0) var(--length)
);
}
Copy the codeI drew 8 images from 100px to 0.00001px for comparison:
At 0.001px to 0.0001px, the image basically degenerates into a particle shape with no radial gradient, and at 0.00001px, it degenerates into a solid color.
CodePen Demo — The effect of different levels of length units on repeating-Radial -gradient graphics
Implement TV snowflake noise animation using repeating-Radial -gradient
In the DEMO above, we found that at 0.001px to 0.0001px, repeating-radial-gradient basically degenerates into particle graphics:
{
background-image: repeating-radial-gradient(
circle at 17% 32%.rgb(4.4.0),
rgb(52.72.197),
rgb(115.252.224),
rgb(116.71.5),
rgb(223.46.169),
rgb(0.160.56),
rgb(234.255.0) 0.0008 px.
);
}
Copy the code
Isn’t this very similar to the effect of a TV snowflake screen? By tweaking the 0.0008px parameter and using several different frames of animation, we can get an animation of the TV’s snowflake noise.
Aha, very interesting, complete source code you can poke here:
Copepen Demo — PURE CSS TV NOISE EFFECT (Only Chrome 85+)
The last
What can a few lines of background code do? More than that, of course, is the fun of CSS. Want to Get the most interesting CSS information, do not miss my iCSS official number – iCSS front-end interesting news
Well, the end of this article, I hope to help you 🙂
More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.
If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.