CSS Application 2: css Application

CSS Application 2: css Application

For example, padding, margin, border, and so on are all assigned clockwise values, as well as top, bottom, and left.

Padding: 1px 2px 3px 4px; (top: 1px; right: 2px; bottom: 3px; left: 4px ;)

Border-radius: 3px; indicates that the four corners are rounded corners of 3 pixels.

Border-radius: 3px 4px 5px 6px; the rounded corners of the four corners are different in degrees; the top left is 3px; the top right is 4px; the bottom right is 5px; and the bottom left is 6px;

We often see this method in styles:

Margin: 0 3px. It can be abbreviated as this when the value of top is the same as that of bottom, and the value of left and right is the same.

Margin: 1px 3px 2px; in this way, the top value is 1px, the bottom value is 2px, and the left and right values are only 3px;

Use of fixed

Position attribute value. Generates absolute positioning elements, which are located relative to the browser window. Positions are controlled through left, right, bottom, and left. Once the location is set, it will be fixed in the corresponding location of the browser and will not scroll along with the browser content. Multiple applications are displayed in the pop-up window, prompt box, and other conditions. For example, position: fixed; Left20px; top: 30px;

Animation is short for setting six Animation attributes:

 

Animation-name specifies the keyframe name to be bound to the selector.

Animation-duration specifies the time taken to complete an animation, in seconds or milliseconds.

Animation-timing-function specifies the animation speed curve.

Animation-delay specifies the latency before the animation starts.

Animation-iteration-count specifies the number of times the animation should be played.

Animation-direction specifies whether an animation should be played in turn in reverse playback.

 

The attribute is defined as follows: animation: name duration timing-function delay iteration-count direction;

For example: animation: myfirst 5S; defines an animation named myfirst at 5 s.

@ Keyframes myfirst

{

From {background: red ;}

To {background: yellow ;}

} Defines the animation. The background is red and yellow.

Animation-timing-function specifies the animation speed curve.

Curves include (

Linear: the animation speed is the same from start to end.

Default: the default value. The animation starts at low speed, then accelerates, and slows down before the end.

Animated-in: the animation starts at low speed.

Animation-out: the animation ends at low speed.

Starting-in-out: the animation starts and ends at low speed.

Cubic-besuppliers (n, n): the values of these functions. The possible value is a value from 0 to 1 .;)