Css3-animation, formatting of form forms

Animation

1, like transition, animation before IE9 support, not only that, but also require a large number of vendor prefixes

2. Define keyframes: A large number of prefixes are required in the @ content

@keyframes FadeIn (Animationname)

from{

}

50%{

}

to{

}

/*from start keyframes, to end keyframes, or start and end with 0%,100% respectively */

The value of oparity is 0 for invisible and 1 for full visibility

3, in the element application:

. b{

Animation-name:fadein;

Animation-duration:1s---------Set the time it takes to animate from start to finish

}

Similarly, you need to add a prefix to the style

4, like transition, there are also animation-timing-function,animation-delay

5, transition is only to run the animation, and animation can be any number of times

Animation-iteration-count:10-----means multiple times, infinite means unlimited use

6, Animation-direction:alternate; the animation fades out for the first time (from opacity equals 1 to 0), and the second fades into view (from opacity equals 0 to 1)

7, Animation-fill-mode:foeward; tells the browser that the format of the element is to be maintained at the end of the animation, the default is to return the initial state before the animation is run

8, pause animation, use animation-play-state:running and paused, but only in pseudo-class can use it, eg:.fade{animation-play-state:paused}

Formatting a table

1. Caption label is used to define the title of the table.

<colgroup> tags are used to group columns in a table so that they can be formatted, such as setting a wide height on a table cell column

2, we can set the title of the table and the table cell label padding, but cannot set the <table> tag padding

3, Table,tr,td{text-align:center}

4, Vertical-align and text-align different, it will not be inherited, can only apply it directly to <th>,<td>, Top,middle,bottom

5, if the table cell set border, will be in the table cell directly leave a visible fine seam,

The Border-spacing property can be used to control the fine seam, remove the space displayed between cells, and set the value to 0, which is:

table{border-spacing:0}

Even if the gap between the border is eliminated, there will be a bilateral box phenomenon, border-collapse:separate (table default, there will be cell spacing and bilateral boxes), collapse (elimination of cell spacing and bilateral boxes)

If border-collapse:collapse, then border-spacing will not work

6. Border-radius property to add rounded corners to table cell boxes

If you set the Border-collapse property to collapse, the browser ignores the Border-radius

7, in the table, interlaced style design, tr:nth-of-type (odd) {}; Tr:nth-of-type (even) {}

However, IE8 and previous versions are not supported: Nth-of-type Selector

8, <colgroup>,<col> represents a set of columns and individual columns, the background image of the column is displayed below the table cell, if the TD and th tag set background color or background image, then the column background will not see

<colgroup>

<col id= "Brand" ></col>

<col id= "Price" ></col>

<col id= "Power" ></col>

</colgroup>

<tr>

<th scope= "Col" >Brand</th>

<th scope= "Col" >Price</th>

<th scope= "Col" >Power</th>

</tr>

9. Hide blank Cells

Table{empty-cells:hide;}

However, if you set the property value of Border-collapse to collapse, the browser ignores the Empty-cells property and still shows the border of the blank cell and the background

Formatting of forms

1, fieldset label, in this display background, IE will let the background overflow fieldset the top edge, while padding will be in the fieldset edge with the content inside the space between, but IE will ignore the top padding, but we can use the top Margin instead

2, legend tag is immediately after the FieldSet label, will be vertically centered on the top border of fieldset

3. Pseudo-Class: Focus creates a selector that changes the effect of the form field when a visitor clicks or jumps into a form

Pseudo-Class: checked mainly for radio buttons and check buttons

Pseudo-Class: Enabled and: Disabled

Css3-animation, formatting of form forms