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

This article shows you what are the praiseworthy new features of CSS3, which are concise and easy to understand. I hope you can gain something through the detailed introduction of this article.

What new features does CSS3 bring to us? What are the new features of CSS3 that deserve our praise? To put it simply, CSS3 takes only a few lines of code to achieve many effects that previously required the use of pictures and scripts.

First of all, let's take a look at some effect pictures. I believe when you see these effect pictures, you will definitely say, how can these effects be achieved only with CSS?

1. 3D square and animation (if you have used webpack, you must have seen the animated logo of webpack. I heard my wife say that logo, which is now popular in animation, is no longer those that are motionless. )

2. 3D square border movement

3. CSS extrusion effect

The features worth mentioning in the above effects are:

1. CSS sets the background of gradient, and adds linear-gradient linear gradient to background.

Background: linear-gradient (yellow 0%, # 000 80%); / * gradient from 0% yellow to 80% black * /

2 、 CSS 3D

Perspective: view the position of the view, such as the position of the lens when taking a picture.

Preserve-3d in transform-style, when this property is set, wraps the child elements in a 3D view.

3 、 CSS animation

When it comes to animation, we have to say jQuery's animation. But with CSS3, you don't have to animate with JS anymore.

Keyframes defines frame animation, which can be set either by percentage or by from and to.

Use animation to reference the defined keyframes frame animation. Animation:rotate 20s infinite linear; / * set referenced animation, animation time, animation timing-function, animation mode * /

CSS Code copies content to the clipboard

Keyframes rotate {0% {transform: rotateX (0deg) rotateY (0deg);} 100% {transform: rotateX (360deg) rotateY (360deg);}}

4 、 CSS filter

Fileter is not a filter for IE, but a newly added attribute in CSS3.

Include: grayscale grayscale, sepia brown, saturate saturation, hue-rotate hue rotation, invert inverse color, opacity transparency, brightness brightness, contrast contrast, blur blur, drop-shadow shadow.

The extrusion effect is a mixture of blur and saturate in filter.

These are the praiseworthy new features of CSS3. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are 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.