Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail the "cicada principle of CSS3 how to achieve random multi-background random fillet and other effects", the content is detailed, the steps are clear, the details are handled properly, I hope that this "cicada principle CSS3 how to achieve random multi-background random fillet and other effects" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

What is the "cicada principle"?

The "cicada principle", known as "cicada principle" in English, is a rule that makes the repetition of things conform to "natural randomness". Why do you say so?

The "cicada principle" originated in North America. China does not seem to have such a saying, but there is a story behind it:

The populations of cicadas in North America and East Asia are different, where the larvae of cicadas live in the soil for 3 years, 5 years or 7 years, but there is a periodic cicada (Magicicada) in North America, whose life cycle is 13 or 17 years, also known as 17-year cicadas or 13-year cicadas. The life cycle of cicadas in East Asia is short, so it feels as if there are many cicadas every year, while the life cycle of periodic cicadas in North America is very long, so it makes people feel that the number of cicadas breaks out on a large scale every ten years. This will cause some scientists to wonder why the life cycle is 13 or 17 years.

The boom and bust cycles of birds, the natural enemies of cicadas, are regular (usually 2 to 6 years), and then repeated over and over again. 13 and 17 of the thirteen or seventeen years are prime numbers, while birds that eat cicadas generally live no more than 13 years, so they do not encounter the natural predators of the previous generation. The life span of cicada larvae in East Asia is relatively short, which may be related to the short lifespan of major bird populations in East Asia, such as the 2-year lifespan of sparrows.

Another very important reason is that there is more than one population of cicadas in an area, and using prime numbers as life cycle years can avoid drilling out of the soil with cicadas of other species, so that the pressure of competition will be small. For example, 17-year-old cicadas and 13-year-old cicadas in North America only break out at the same time every 221 years.

This strategy of using prime numbers as cycles to increase "natural randomness" is called the "cicada principle".

What enlightenment does the "cicada principle" have to our web design? That is, more natural random effects can be achieved at the lowest cost.

2. CSS3 multiple Backgrounds random multi-background under the "cicada principle"

There is such a case in the famous CSS3 background shading site. The screenshot is as follows:

The principle behind it can be seen from the name. Cicada stripes means "cicada stripe", which means that the random background lines here are actually implemented using the "cicada principle". The code is as follows:

Stripes {background-color: # 026873; background-image: linear-gradient (90deg, rgba (255Power.07) 50%, transparent 50%), linear-gradient (90deg, rgba (255 transparent 50%) 50%, transparent 50%), linear-gradient (90deg, transparent 50%, rgba (255PX. 17) 50%), linear-gradient (90deg, transparent 50%, rgba (255 13px, 29px, 37px, 53px;}) 50%)

The above CSS code shows that there are a total of four gradient background images, and then the color transparency and regional range of each background image are different, and then the final random effect, the most important thing is to control the four background map cycle size of the background-size attribute, the corresponding four dimension values 13px, 29px, 37px, 53px are all prime numbers, so to ensure the maximum natural random, the final random line effect is more natural.

Third, the random fillet effect of CSS3 border-radius under the "cicada principle"

The random fillet effect can be found on this site: http://2016.uxlondon.com/speakers. The screenshot of the effect is as follows:

We can see that the rounded corners of the guests' avatars are random and irregular, some are flat here and there are crooked, and their realization also makes use of the "cicada principle".

According to past experience, the above is that the effect address is easy to fail, just in case, I also have a cleaner demonstration of demo here, you can click here: random fillet effect demo under "cicada principle"

The effect is as follows:

The principle of its implementation is that nth-child is naturally random, and according to the original author, it was originally intended to be similar to the following implementation:

.list:nth-child (2n) {}. List:nth-child (3n) {}. List:nth-child (5n) {}. List:nth-child (7n) {}. List:nth-child (11n) {}

However, it is found that it is not natural to cover all the list items, so the following improvements have been made:

.list:nth-child (2n + 1) {}. List:nth-child (3n + 2) {}. List:nth-child (5n + 3) {}. List:nth-child (7n + 4) {}. List:nth-child (11n + 5) {}

That is, a prime value of a smaller size is added, so, combined with the default effect, the seamless random list interaction is achieved. Take the 2n+1 item as an example:

.list {border-radius: 87% 91% 98% 100%;} .list:hover {border-radius: 95% 70% 100%; transform: rotate (- 2deg);}. List:nth-child (2n+1) {border-radius: 59% 52% 56% 59%; transform: rotate (- 6deg);}. List:nth-child (2n+1): hover {border-radius: 51% 67% 56% 64%; transform: rotate (- 4deg);}. After reading this, the article "how to achieve random multi-background random rounded corners and other effects in CSS3 under the principle of cicada" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.