preface

This article is the author writes the CSS often uses the routine. No matter how gorgeous the effect is, it never changes.

Staggered animation

Sometimes, we need to add the same animation to multiple elements, after playing, it is not difficult to find that they will move together, end together, so it will be very dull.

So how do you make animation a little more interesting? It’s very simple, since they all start moving at the same time, why not make them not move at the same time? How do you make them not move at the same time? Notice that CSS animations have a delay property. For example, if you have ten elements playing ten animations, set the second element’s animation to play 0.5 second later than the first, and so on, the other elements will stagger, creating a unique visual effect.

This is called interleaved animation: the animation is interleaved by setting different delay times.

Demo address: Staggered Wave Loading

Split the text with JS

There is a often used gameplay: the sentence or word is divided into letters with JS, and add different delay animation to each letter, also very gorgeous

Demo address: Staggered LandIn Text

Interleaved animation of different locations

Usually we start with the first element. But if you want to interleave from the middle element, you add a value to each of the current element’s delays, which is the product of the distance from the middle element’s index to the current element’s index (the absolute value of the difference) and the step size

This demo address: Reveal Text

Random particle animation

Speaking of randomness, we can achieve an even crazier effect: interleaving hundreds of particles at random times and at random position sizes. This allows us to simulate snow in pure CSS.

Snow (Pure CSS)

Pseudo-classes and pseudo-elements

pseudo-classes

The state of an HTML element can change dynamically. For example, when your mouse hover over a button, the button will become a “hover” state, then we can use the pseudo class :hover to select this state of the button, and change its style.

Hover: Hover is one of the most common pseudo-classes I use. Another very common pseudo-class is nTH-child, which is used to select a child of an element. Other similar :focus, :focus-within and so on also have certain use.

Button Hover Border Stroke With Float Text

Absolute positioning implements multiple borders

Who says buttons can only have one set of borders? Using absolute positioning and padding, we can create three different sets of bezels for the button to make it even more impressive

Button Hover Multiple Border Stroke

Pseudo elements

In short, a pseudo-element is an extra element that is inserted on top of the original element, and that element does not act as an HTML tag, thus keeping the HTML structure clean.

We know that each element has two pseudo-elements ::before and ::after, which means that each element provides three rectangles (one for the element itself and two for the pseudo-element) for us to draw the shape. Now with the clip-path property, almost any shape can be drawn, depending on your imagination

The GIF above is an animation of slivers across text. Slivers are pseudo-elements corresponding to each text. By animating each text and its pseudo-elements, you can achieve the effect shown in the above image

Header With Slide Bar

Attr () generates text content

Elements can have custom attribute values, which are usually named in the format data-*

Attr () is used to take the value of such a custom attribute for an element and assign the value to its pseudo-element’s content as its generated content

Using this function, we can use pseudo-elements to “copy” text from the original text, as shown in the figure below

Looks a little messy, doesn’t it? No problem, just add overflow: hidden to it to cover up any extra text. Using JS to split the text and apply interleaved animation, you get the following effect, which is also the Overflow trick for the rest of this article

This demo address: Staggered Float Text Menu

Overflow smoke screen

We’ve done the flash button effect before: a light moves from left to right as the mouse hovers over the button.

I used a gradient to simulate that light and translated it to the right using Transform: translateX()

But that’s obviously not right. Why is this light visible? Shouldn’t it be blocked?

Add overflow: hidden to the button and the light is hidden when it is outside the button

This demo address: Button Hover Shining

The custom input

What if the default input is too ugly? Erase it and set opacity: 0

Closely related to input is the label element, because clicking on the label element also triggers a change in the input state. Using this feature, you can customize the style of the label. You can also add more elements next to the label and select them with the sibling selector ~ to define the style. You can customize the input using the: Checked pseudo-class that listens for state changes of the input and a little animation

For now, the input element also supports pseudo-elements, which leads to another idea: eliminate the default input style with appearance: None and customize it with pseudo-elements so that the label retains its original style.

Demo address: Todo List

CSS properties

Make good use of certain CSS features, and you can add a lot of color to your work

animation

This includes transition and transform

Here are my personal business cards. Can you guess what techniques are used in them?

First of all, the animation that appears in the first four borders uses overflow camouflage

Second, the sliver across the text uses pseudo-element animation

Finally, the sequential appearance of social ICONS uses interlaced animation

Demo address: Profile Card

border-radius

Add rounded corners to boxes, often used to beautify components such as buttons

If you set it to 50%, it’s a circle, which is also very common

Irregular curved edge shape

Adjusting the border-RADIUS of multiple vertices creates irregular curved edges

Demo address: Nav Tab

box-shadow

Adding a shadow to the box gives the box a sense of dimension, can be layered, and will make the shadow more silky

This demo address: Pagination

Inner glow

Notice that box-shadow also has an inset, which is used to light up the inside of the box

Using this property we can set the color within a certain range of the box to make a crescent shape

With a little animation and filter effects, “Scarlet Moon” is here!

Notice that it gives off a faint red glow, which is the effect of two pseudo-elements with a blur filter applied

Address: Crimson Crescent Loading

text-shadow

Text shadows, which are essentially the same as box-shadow, only relative to text, are often used to glow text, and can also be layered to create neon text and pseudo-3D text effects

Glowing text

This demo address: Staggered GlowIn Text

Neon text

Demo address: Neon Text

Pseudo 3 d text

Demo address: Staggered Bouncing 3D Loading

background-clip:text

A foreground color that can crop the background to text. Used with Color: Transparent to create gradient text

This demo address: Menu Hover Fill Text

gradient

A gradient can be used as a background image with a strong color effect and can even be used to simulate light

linear-gradient

Linear gradient is the most commonly used gradient

This work uses the HTML dialog tag, linear gradient background, animation and overflow smoke screen, careful you see 🙂

This demo address: Confirm Modal

radial-gradient

Radial gradients are often used to create circular backgrounds. In the example above, Snow’s background is an elliptical radial gradient

In addition, since the background can be superimposed, we can superimpose multiple radial gradients of different position sizes to create a cluster of dots, which together with animation creates a particle effect without the need for extra div elements

Demo address: Particle Button

conic-gradient

Cone gradients can be used to make pie charts

Once again, the smokescreen works by superimposing a pseudo-element on top of the pie chart and setting the content to a value (which is calculated from the CSS variable)

Gauge (No SVG)

filter

In Photoshop, blur is the most common filter

The fusion results

When used together with the Contrast filter, the blur filter creates a gooey effect

This demo address: Snow Scratch

backdrop-filter

Apply a filter to the background to create the frosted glass effect

Demo address: Frosted Glass

mix-blend-mode

Blend mode in Photoshop, used to create special effects on text in the background

The following uses screen mode to achieve the text video mask effect

Demo address: Video Mask Text

clip-path

Cutting in PHOTOSHOP can make a variety of irregular shapes. It would also be interesting if combined with animation

Demo address: Name Card Hover Expand

The fault effect

Because of the clip-path’s clipping function, you can stack multiple pieces of text on top of each other, cut them proportionally, and use interlaced animation to create cool glitch effects.

Cross Bar Glitch Text

mask

A mask in PHOTOSHOP. The so-called mask, is the original image only shows the mask image non-transparent part

Effect of hollow out

Although clip-path can cut out shapes, it can’t cut out the inside of shapes

Some people (including me) might use fake elements to “simulate” the hollowing out (by setting the same background color), but this would not be the real hollowing out, it would be exposed by changing the background or floating on the image, and we would resort to masks

For example, if you want to make a hollow circle, all you need to do is mask the element with a radial gradient and set the first color-stop to transparent and the rest to other colors, since masks are defined to show only the non-transparent parts of the mask image

Note: In order to eliminate the aliasing, this radial gradient needs to have an extra color-stop in the middle for buffering. Set the length to the original length plus 0.5px

This demo address: Circle Arrow Nav

-webkit-box-reflect

Projection effect, not often used, suitable for strong three-dimensional work

Card Flip Reflection

web animations

While this is not a CSS feature, it is often used to accomplish things that CSS cannot

So when do you use it? When a CSS animation has a property that cannot be retrieved from the CSS, it is naturally used

Track the position of the mouse

CSS does not yet have an API for obtaining mouse position, so consider using JS for this

By looking at the relevant DOM API, I found that in the API that listens for mouse events, the current position of the mouse can be obtained by using E. cadentx and E. cadenty

Since you can get the position of the mouse, tracking the mouse’s position shouldn’t be too hard: Listen for mouseEnter and mouseleave events to get the mouseenter and mouseleave coordinates as the mousemove distance. Listen for mousemove events to get the mouseenter and Mouseleave coordinates as the mousemove distance. Listen for mousemove events to get the mouseenter coordinates as the mouseenter and Mouseleave coordinates as the mousemove distance. A tracking mouse effect is achieved

This demo address: Menu Hover Image

CSS Houdini

CSS Houdini is CSS’s underlying API, which allows us to extend the functionality of CSS through this interface

Let the ebb and flow

Currently, we can’t animate the gradient directly because the browser doesn’t understand what type of value to change

At this point, we can register our custom variable with css.registerProperty () and declare its syntax type to
, so the browser can understand and apply interpolation to the color to animate it

Remember the conic-gradient() above? Since it can be used to make pie charts, can we make pie charts move? The answer is yes. Define three variables: –color1, –color2 and –pos. The syntax type of –pos is

. Change it from 0 to 100%, and the pie chart will rotate clockwise

Using absolute positioning and cascading context, we can overlay multiple small to large pie charts, set them in different colors, and apply interleaving animation to get the stunning effect below

Demo address: Mawaru

eggs

A menu that combines interlaced animation and pseudo-class pseudo-elements to create a careful brave man style

This demo address: Shinchou Menu

The last

Congratulations on finishing this article. Whether it’s a visual treat, learning a lot, or navigating directly from your bookmarks (laughs), CSS is more powerful than you think. As long as you dare to create, you are the god of this world.