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

This article mainly introduces the relevant knowledge of "CSS3 Application case Analysis". The editor shows you the operation process through the actual case. The operation method is simple, fast and practical. I hope this "CSS3 Application case Analysis" article can help you solve the problem.

Advanced applications of 1.box-shadow

Taking advantage of css3's new features can help us achieve a variety of unexpected special effects. In the next few cases, let's use css3's box-shdow to achieve it. Let's get started!

Realize the animation of water waves

Knowledge point: box-shadow

Think about how we can animate the diffusion of water waves if we don't use css3. You must have to write a lot of js to achieve the following results:

Css3 implements the core code

Here we mainly use box-shadow 's multi-level shadow to achieve, the animation part of our use of @ keyframes, does it feel okay?

Realize loading animation

Knowledge point: box-shadow multi-shadow

Loading animation must be familiar to everyone, although you can load animation in many ways, such as using pseudo elements, using gif, and using js, but for a more elegant implementation, I think you should go directly to css:

The core code is as follows:

We are also using box-shadow multi-background to achieve, which is also a direction that I was thinking about at that time. As for other css programs, you are welcome to communicate with me.

Realize the irregular projection of dialog box and dialog box

Knowledge points: filter and pseudo elements

The knowledge of css filter is involved here, but it is also very simple. You can understand it by looking at the official website of css3. Let's look at the effect directly:

We will use filter's drop-shadow to achieve irregular shadows, and then use pseudo elements and border to achieve head triangles:

Blur effect

Knowledge point: filter

This is relatively simple, here I go directly to the image and code:

two。 Make an adaptive ellipse

The emergence of border-radius makes it very convenient for us to achieve the fillet effect, and we can also achieve a variety of graphic effects through further research on the characteristics of Border-radius, and then let's take a look at its power!

Knowledge points: border-radius: a / b; / / aforme b is the horizontal and vertical radius of the fillet, respectively. If the unit is%, it means to analyze relative to the width and height.

CSS3 actual combat summary, let you show your own on the front-end road (with source code)

Core code:

Here we mainly use the background gradient to achieve the flashy background, using border-radius to achieve various specifications of elliptical patterns.

3. Pure css3 realizes Pie Chart Progress Animation

Knowledge points: border-radius: a b c d / e f g h; animation multiple animation attributes

The effect is as follows:

Core code:

The realization of this piece mainly uses the gradient background, which is also the key to realizing the fan-shaped progress, including how to cover the semicircle in the code, how to animate the semicircle, how to change the position of the rotation origin, etc., although these are very skillful, but we can also achieve it with a little drawing.

4.css3 pseudo-element implementation custom check box

We all know that native check box control styles are extremely difficult to customize, which makes it much more difficult for engineers to implement a design draft. The emergence of css3, added: checked selector, so we can use: checked and label to implement a variety of form selection controls, let's see how to implement it!

Let's take a look at how to implement the above custom check box:

Here, in order to hide the native checkbox console, we use clip: rect for interception, and then use checkbox's pseudo-class: checked to interact.

This is the end of the introduction to "CSS3 Application case Analysis". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.