[II. Mobile web page development] 2D & 3D conversion and animation, mobile terminal layout, responsive layout

2D&3D Conversion and animation

1. The fonts icon

2022 year 6 month 29 Japan 21:48:05

brief introduction

download

Select the chart you want to add to the shopping cart =》 Add to project =》 Download to local .

Use font icons

svg Upload

2.2D transformation - Displacement

The concept of plane transformation

Displacement transform：translate

Center the positioning box

【 Use translate Quickly realize the element centering effect of absolute positioning 】
The way I wrote it before ：

Use the displacement writing method of plane transformation ：

Case study - Double door

3.2D transformation - rotate + The zoom

rotate transform：rotate

Change the origin transform-origin

Multiple conversion

Multiple conversion techniques ：transform：translate（） rotate（）;

The zoom transform：scale

Case study - The zoom

【 Be careful - Layering 】

4. The gradient linear-gradient

2022 year 6 month 30 Japan 15:19:54

Case study - The gradient

Comprehensive case

.txt It can also be compared with a Positioning .

5.3D transformation - Displacement and perspective

Introduction to space transformation

Spatial displacement translate3d

Perspective properties perspective,800-1200

6.3D transformation - rotate + Stereoscopic presentation

Space rotation transform：rotateX

transform：rotateX/rotateY/rotateZ

The law of the left hand

Stereoscopic presentation transform-style

Make child elements in real 3d Space .

7.3D Navigation case

Home page and index English overlaps ：

The orange box rotates 90 degree ：

The orange box is facing Z Axis movement （ Direction of sight ）：


The green box moves forward ：


The cube rotates ：（ Use the left-hand rule to determine the positive and negative number of the rotation angle ：x Axis , Thumb direction is right ,4 The direction is a positive number ）

Comment out the auxiliary code ：

8. Space conversion - The zoom

This effect is not used much .

9.CSS3 Animation

brief introduction

from-to

percentage

Animation compound attribute - time expand 、 Repeat the number

Animation direction 、 Status at the end of execution

Animation split writing

Frame by frame animation

Multi group animation

Comprehensive case - Riding lantern

Mobile terminal layout

1. Basic knowledge of mobile terminal

The resolution of the

【 No matter pc Both the terminal and the mobile terminal refer to the logical resolution to write code .】

viewport

【 viewport 】： It can make the width of the web page equal to the size of the logical resolution （ The width of the device ）.

No viewport labels , The width of the web page is 980px.

Double

750px The width of figure . The majority of web pages are written in double figures .
The designer gives a 750px Graph , When writing code, you should still refer to 375px To write . With 375px To measure the size .

Percentage layout （ Fluid layout ）

2.Flex Telescoping layout

brief introduction

It won't lose its bid .

Flex The layout model consists of

【 Added display：flex Of Parent name ： Elastic container . The children inside are called elastic boxes .】

Spindle alignment ：justify-content

【 stay Flex In the layout model , Adjust the alignment of the main axis or side axis to set the spacing between boxes .】

• space-between
  
• space-evenly

• space-around

Side axis alignment ：align-items

• Vertically centered effect
  
  
  
• Change to default .
  
• Comment out the height of the child box ：
  
  
  Stretch It's stretch , As the default value .（ If the child box has a height , It won't work . When testing, you need to remove the height of the child box .）
  Verify that it is the default , Comment out , It is found that the sub level box will still be covered along the side axis .

Independently control the alignment of the side axis of a box ：align-self

Elastic box size characteristics

• The sub level box is not high , Stretch by default ：

Because the second child box adds the side axis centering effect , Its height is The height of the content .
If There is no width , It will be supported by the content .

Elastic expansion ratio

【 Use flex Property to modify the expansion ratio of the elastic box .】

Change the spindle direction ：flex-direction

Spindle direction and alignment

【1. First determine the spindle direction ;2、 Then select the corresponding attribute to realize the alignment of the main axis or side axis 】

Flex box wrap ：flex-wrap

Adjust row alignment ：align-content

No, space-evenly. Others and justify-content Basically the same （center、space-around、space-between）.

3.rem Mobile adaptation

2022 year 7 month 1 Japan 19:27:27

Basic use

【 First of all, make sure HTML The label has a font size 】

Media query

【 The meaning expressed in parentheses is ： The width of the testing equipment .】

When testing the above media query effect, set the resolution of the computer to 100%

Mobile adaptation

Layout process

flexible Mobile adaptation

4.Less

brief introduction

notes

Single line comments can only exist in Less file , You can only render multiline comments to css In file .

Calculation

nesting

【 Quickly generate descendants 】

Variable

Import

export - The plug-in configuration

export - Separate path

Prohibit export

5.vw / vh

vw- Mobile adaptation

【 The goal is ： Implemented in devices of different widths , Page element size scaling effect .】

vh- Mobile adaptation

Responsive layout

1. Media query

max-min-width

Writing order

Complete writing ( understand )

key word ：and、only、not

Link How to write it

hide

Give Way .left and .main Arrange horizontally .
This is because ： The box is elastic
solve ：

Express Remove the left side .left, The remaining width of the parent is .main The width of the box . Guarantee .left The width of the box is 300px.

2.Bootstrap