winter vacation training

Sixty-one, key frame animation
Sixty-one, 3D
62. Grid layout

Sixty-one, key frame animation

Attributes

animation:动画名称 动画的持续时间 动画的过渡类型 动画延迟的时间 动画的循环次数 动画在循环中是否反向运动
//infinite 无限次
@keyframes identifier{
	from{}
	to{}
	//0%{}
	//100%{}
}

The difference between animation and transition

The same point:
They all change the attribute value of the element over time.
The difference:
transition needs to trigger an event (hover event or click event, etc.) to change its css properties over time; animation can also explicitly change the element css over time without triggering any events property value, so as to achieve an animation effect, the animation of css3 requires a clear animation property value.

single attribute

transform:translateX(-100%);
100% is 100% relative to itself

animation
animation composite property. Retrieves or sets the animation effects applied to the object.
1. animation-name retrieves or sets the name of the animation applied to the object
Description:
Must be used in conjunction with the rule @keyframes, eg:@keyframes mymove{} animation-name:mymove
2.animation-duration retrieves or sets the duration of the object animation
Description:
animation-duration: 3s; the time used for animation completion is 3s
3.animation-timing-function retrieves or sets the transition type of object animation
Description:
linear: linear transition. Equivalent to Bezier curve (0.0, 0.0, 1.0, 1.0)
ease: smooth transition. Equivalent to Bezier curve (0.25, 0.1, 0.25, 1.0)
ease-in: from slow to fast. Equivalent to Bezier curve (0.42, 0, 1.0, 1.0)
ease-out: from fast to slow. Equivalent to Bezier curve (0, 0, 0.58, 1.0)
ease-in-out: from slow to fast and then to slow. Equivalent to the Bezier curve (0.42, 0, 0.58, 1.0)
steps()
end (keep the current frame, the last frame cannot be seen, the animation ends)
start (the next frame is reserved, the first frame cannot be seen, start from the first One frame quickly jumps to the last frame)
4.animation-delay retrieves or sets the delay time of object animation
Description:
animation-delay:0.5s;
the delay time before the animation starts is 0.5s)
5. animation-iteration-count retrieves or sets the number of cycles of object animation
Description:
animation-iteration-count: infinite | number; infinite: infinite loop
number: number of loops
6. animation-direction retrieves or sets whether the object animation moves in reverse in the loop
Description:
normal: normal direction
reverse: run in the reverse direction
alternate: the animation runs normally and then runs in the reverse direction, and continues to run alternately
alternate-reverse: the animation runs in the reverse direction and then runs in the forward direction, and continues to run alternately
7.animation-play-state Retrieve or set the state of object animation
Description:
animation-play-state:running l paused;
running:movement
paused:
paused animation-play-state:paused; when the mouse passes by, the animation stops, and the animation continues when the mouse is removed
animation-fill-mode
none default value
forwards last screen
backwards initial screen

Sixty-one, 3D

What is a 3D scene? In a 2D scene, the x-axis and y-axis of the horizontal and vertical crossing lines on the screen are 3D
scenes. In the method perpendicular to the screen, there is an extra z-axis
Z-axis relative to 3D: the direction close to the screen is positive direction, the direction away from the screen is the reverse

transform-style: preserve-3d;//3d舞台   flat: 2d舞台

The 3D transformation in CSS3 mainly includes the following functions:
3D displacement:
The 3D displacement in CSS3 mainly includes two functional functions, translateZ() and translate3d();
3D rotation:
The 3D rotation in CSS3 mainly includes four functional functions: rotateX(), rotateY(), rotateZ() and rotate3d();
3D scaling:
The 3D scaling in CSS3 mainly includes two functional functions, scaleZ) and scale3d();
the scaling in CSS3 3D deformation mainly includes two functions, scaleZ0 and scale3d(), when scale3d (the X axis and Y axis are both 1, that is, scale3d (1,1,sz), the effect is equivalent to scaleZ(sz). By using the 3D scaling function, the element can be scaled proportionally on the Z axis. The default value is 1. When the value is greater than 1, the element is enlarged, otherwise less than When 1 is greater than 0.01, the element shrinks
scale3d(sx,sy,sz)

sx: horizontal scaling;
sy: vertical scaling;
sz: Z-axis scaling;

scaleZ(s)

s: Specifies the ratio of each point of the element on the Z axis.
Note: The scaleZ() and scale3d() functions have no effect when used alone, and need to be used together with other deformation functions to have an effect

depth of field
3d in life is different from 2d
Near, large, far, small depth of field.
The method implemented in the program is the distance between the perspective element and the line of sight (the smaller the distance between the object and the eye, the more obvious the effect of near, large, and far)

perspective: 1200px; (在父元素中使用)
transform:perspective(1200px) (在子元素中使用)

There will be a conflict if both settings are set. It is recommended to only set the parent element. The usual value is between 900-1200.
If your line of sight is far enough from the object, basically there will be no feeling of being close, large, and far small.
perspective-origin;
Observe the (position) angle of the 3d element perspective-origin: center center (center)
perspective-origin: left top (top left corner)
perspective-origin: 100% 100% (bottom right corner)

62. Grid layout

1. The concept of grid layout and the difference between flex layout

Meaning: It divides the webpage into grids, and different grids can be combined arbitrarily to make various layout
differences: Grid layout and Flex layout have certain similarities, and can specify multiple items inside the container Location. However, they also have major differences. The flex layout is an axis layout, and only the position of the "item" relative to the axis can be specified, which can be regarded as a one-dimensional layout.
The Grid layout divides the container into "rows" and "columns", generates cells, and then specifies the cell where the "item is located", which can be regarded as a two-dimensional layout.

(1) Containers and items

Container: the largest box in a case, which can be understood as a parent element
Item: the content in the largest box in a case, which can be understood as a child element

<section>
    <div>
        <p></p>
    </div>
    <div>
        <p></p>
    </div>
    <div>
        <p></p>
    </div>
</section>
<!-- 以上代码section为容器，div为项目（项目不包括p标签） -->

(2) Rows and columns

Rows and columns: The horizontal areas inside the container are called "rows" and the vertical areas are called "columns".

(3) cells

Cell: The intersection of rows and columns, called a "cell".

(4) Grid lines

Gridlines: The lines that divide the grid are called "gridlines". Horizontal gridlines divide rows and vertical gridlines divide columns.
Note: To form a grid: 5 lines, 2 horizontal lines, and 2 buses are required. Note
: To form a grid with 1 row and 2 columns, 5 lines, 2 horizontal lines, and 3 buses are required
. Note: To form a 2 A grid with 1 row requires 5 lines, 3 horizontal lines, and 2 buses.
Conclusion: If a grid with m rows and n columns requires m+1+n+1 lines, m+1 horizontal lines, n+1 buses

2. Attributes in Grid Layout

Meaning: The attributes in the grid layout are similar to the layout attributes in flex, and are divided into two categories, one is container attributes; the other is item attributes

(1) Container properties

Trigger the grid layout
to add power to the parent element display:grid
display The value of the grid is divided into two, grid (block grid) and inline-grid (inline grid, inline block)
grid=containers are arranged from top to bottom
inline-grid=Containers are arranged from left to right
display:grid;block-level grid
display:inline-grid;inline-block-level grid
Row and column division
Specify row attributes: grid -template -row:
fixed column attributes: grid-template column:
the number of values behind represents how many rows and how many columns
1) Absolute size (determine the number of values according to the number of columns or rows ) Example: 200px 200px 200px

grid-template-columns:200px 200px 200px
grid-template-columns:33.33% 33.33% 33.33%

2) Percentage (determine the number of values according to the number of columns or rows) Example: 33.33% 33.33% 33.33%

grid-template-rows :200px 200px 200px
grid-template-rows:33.33% 33.33% 33.33%

	/* 1 固定值 */
    /* grid-template-rows: 200px 200px 200px;
    grid-template-columns: 200px 200px 200px; */
    /* 2 百分比 */
    /* grid-template-rows: 33.3% 33.3% 33.3%;
    grid-template-columns: 33.3% 33.3% 33.3%; */
    /* 3 repeat */
    /* grid-template-rows: repeat(3,33.3%);
    grid-template-columns: repeat(3,33.3%); */
    /* 4 repeat autofill */
    /* grid-template-rows: repeat(auto-fill,200px);
    grid-template-columns: repeat(auto-fill,20%); */
    /* 5 fr 片段 */
    /* grid-template-rows: 1fr 2fr 1fr;
    grid-template-columns: 1fr 2fr 1fr; */
    /* 6 minmax */
    /* grid-template-rows: minmax(100px,200px) 200px 100px;
    grid-template-columns: 200px 200px 200px; */
    /* 7 auto */
    grid-template-rows: 100px 200px auto;
    grid-template-columns: 100px 200px auto;

Column Spacing (Focus: Composite Attributes)

grid-row-gap:20px /* 行间距 */
grid-column-gap:20px /* 列间距 */
grid-gap:30px 30px /* 复合式写法*/
/* 注:新版本已经省略grid-前缀		row-gap \ column-gap \ gap */

specific area

display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas:'a b c'
					'd e f’
					'g h i';
/*
	将整个网格容器分为9个区域，每个区域对应一个单元格
	通过grid-area指定项目名称。
*/

display:grid;
grid-template-columns :repeat(3, 100px);
grid-template-rows:repeat(3, 100px);
grid-template-areas:'a a a'
					'. . b'
					'. c c';

When merging, use grid-area: grid name; to merge

Item Sort Order

grid-auto-flow: column | row;
/* 
row dense和column dense。
这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。
 */

The cell content aligns with it (emphasis: compound attribute)

justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items: <justify-items> <align-items> /* 复合式写法 */
/* 
	start:对齐单元格的起始边缘。
	end:对齐单元格的结束边缘。
	center:单元格内部居中。
	stretch:拉伸，占满单元格的整个宽度（默认值）。
*/

Cell item alignment (emphasis: composite property)

justify-content:start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
place-content: <justify-content> <align-content> /* 复合式写法*/
/* 
	start-对齐容器的起始边框。
	end-对齐容器的结束边框。
	center-容器内部居中。
	stretch-项目大小没有指定时，拉伸占据整个网格容器。
	space-around-每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
	space-between-项目与项目的间隔相等，项目与容器边框之间没有间隔。
	pace-evenly-项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。

(2) Project properties

Gridline Merging (Single Attribute)

grid-column-start
grid-column-end
grid-row-start
grid-row-end
/*
	grid-column-start属性:左边框所在的垂直网格线
	grid-column-end属性:右边框所在的垂直网格线
	grid-row-start属性:上边框所在的水平网格线
	grid-row-end属性:下边框所在的水平网格线
 */

grid-column-start:1;
grid-column-end:3;
grid-row-start: 2;
grid-row-end:4;

Winter vacation training - five