CSS3 the third day

Vi. background
Background in the CSS3 also get a great degree of enhancement, such as background image size, background cutting area, background positioning reference points, multiple backgrounds.
1, Background-size set the size of the background image
Cover automatically adjusts the zoom scale to ensure that the picture is always filled with the background area, and if there is an overflow, it will be hidden.
contain automatically adjusts the zoom scale to ensure that the picture is always fully displayed in the background area.
You can also use length units or percentages
2. Background-origin Set the origin of background positioning
Border-box the border as the origin point;
Padding-box the inner margin as the origin point;
Content-box the content area as the origin point;
3, Background-clip set the cutting area of the background picture
Border-box cut border within the background area;
Padding-box cutting inner margin is the background area;
Content-box cut content area as background area;
Background-break looping when setting a background picture for tiling
Bounding-box tile throughout the element
Each-box tiles in each row
Continuous the image in the next row continues tiling the image in the previous row
Seven, gradient
Linear gradient
Linear-gradient linear gradient refers to a gradient in one direction along a line.
Value: direction, start and end color, gradient range

2. Radial gradient
Radial-gradient radial gradient is a gradient effect that starts along the perimeter from a central point
Value: Circle radius, Circle Center, start and end color, gradient range
Viii. transition
Transitions allow for smooth transitions between different states of elements (motion tweens), which are often used for animating effects.
Frame animation: A frame-by-frame screen is played in a fixed order and speed. Like film film

Motion Tween: Automatically completes the transition from the start state to the terminating state.
Features: The current element can smoothly transition as long as there are "attributes" that change. E
Transition properties in a, B state can be, if you have to slowly change on a, hover or JS add Class
Shorthand: The first time is the execution time, the second is the delay time, the others are not ordered, but it is best to write in the following order
Transition-property Setting Transition Properties
Value: None no element
All elements
The CSS property specified by index
Transition-duration Set the transition time, from the old property to the event spent on the new property
Transition-delay Setting the Transition animation delay time
Transition-timing-function Set the transition speed (several values are difficult to see the difference between the naked eye)
Value: Ease mitigation effect, equivalent to Cubic-bezier (0.25, 0.1, 0.25, 1.0) function, i.e. cubic Bezier
Linear linear effect, equivalent to Cubic-bezier (0.0, 0.0, 0.1, 1.0) functions
Ease-in fade effect, equivalent to Cubic-bezier (0.42, 0, 1.0, 1.0) functions
Ease-out fade effect, equivalent to Cubic-bezier (0, 0, 0.58, 1.0) functions
Ease-in-out fade fade effect, equivalent to Cubic-bezier (0.42, 0, 0.58, 1.0) functions
Cubic-bezier Special cubic Bezier curves

CSS3 the third day