Animation mentioned today and animation mentioned today

Animation mentioned today and animation mentioned today

I didn't talk about anything today. I just supplemented the HTML5 details. For example, the HTML structure can be omitted to the maximum point.

<! DOCTYPE html>
<Meta charset = "UTF-8"> <title> animation </title> here is the content

Without the basic structure tag, the browser will automatically generate it for us.

Double quotation marks of tag attributes can also be omitted;

<input type=text>

HTML5 allows me to experience its simplified tag while maximizing the amount of code.

There is also the use of debugging tools, debugging tools allow us to more quickly and accurately find all aspects of information,

This greatly improves the efficiency of code writing. For example, you can quickly find the error in the console.

It also simulates the screen size of various configurations and responds to tests to facilitate responsive code writing.

There is also a network to view the information of various requests and optimize page information, such

File size.

 

Today's content is here, next is an animation of a responsive website today, and the following is its implementation.

Today, we see a transition animation from the logo to the pop-up button, and its implementation is completely HTML5 + css3 code.

The main knowledge used is the animation attribute of css3, and there is also a div css sprites genie, which is simply called: Image genie;

What is image genie?

In fact, it is to combine multiple images into one image, and then layout the webpage background using CSS background locating techniques.

The benefits of doing so are also obvious, because if there are too many images, http requests will be added, which will undoubtedly lead to a reduction in website performance,

Especially for websites with a large number of images, if css sprites can be used to reduce the number of images, it will increase the speed.

 

Then start to implement:

First, go to the target website to pull images.

The following is an image:

 

Next, use the ps to measure the total length and the distance between each part. This can be used by the slicing tool. When you cut an image, double-click the image to obtain the information of the image. The position of the image is x, y: w and h of the image.

In this way, you can quickly measure the position of the image, and then use the current position x minus the position x of the previous image to measure the spacing.

Release first:

Code:

<! DOCTYPE html> 
 
Chrome and Safari are only compatible here;
The prefix of Chrome and Safari-webkit -.
If you need to be compatible with others.