css3.0 new attribute learning_html/css_WEB-ITnose

​​​​> Conversion --- Keywords: Transform; Attributes are:

1, displacement:

translate (0px (0px> (0px

,0px

) Attribute value: (0px,0px)

There are two values ​​in the brackets, separated by commas, to displace the element along the x-axis and y-axis coordinates. The second value does not need to be given. If not, it will default to 0.

2, Scale: scale (.5, .5) Attribute value: (.5, .5) followed by two decimals (percentage) in brackets, Separate with commas, the center point of the element is used as the scaling base point,

makes the element scale proportionally along the x-axis and y-axis coordinates. The second value does not need to be given. If not, it defaults to 0.

.

3, Rotation:

rotate

(5deg

)

or

rotate (1rad) where Rad: radians, deg: degrees. Take the upper left corner of the element as the base point, press the value and rotate clockwise. Reset origin: transform-origin:0 0;

Origin

followed by two

number ,

makes the element reset the rotation origin along the x-axis and y-axis.

4, Bevel (distortion): skew (1rad, 1rad)

Attribute value: (1rad,1rad)

The two radian values ​​​​in brackets

rad determine the degree of distortion. The values ​​correspond to the x and y axes respectively, and the second The value may not be provided. If not provided, it will default to 0. Excessive (

must be defined in style)

Excessive --- keyword : transition followed by 4 values ​​such as:

Transition:[transition-property]||[transition-duration]|| [transition-timing-function]||[transition-delay];

That is: transition: all 4s linear 2s;

its value The meanings are:

1, property: Retrieve or set the properties of the object that can be overridden. The value range is:

All (default value): All css properties that can be overridden. .

None: Do not specify excessive css attributes.

2, duration: Retrieve or set the duration of the object's transition. The value range is:

time: Specify the duration of the object's transition.

3. Timing-function: Retrieve or set the transition animation type in the object. Its value range is (listed 5):

linear: linear transition.

Ease: smooth over.

Ease-in: from slow to fast.

Ease-out: from fast to slow.

Ease-in-out: from slow to fast to slow again.

4, delay: Retrieve or set the object delay delay time, its value range is:

time: Specify the object delay time.

Here is an example of over-implemented code:

 

 

     

 

线性过渡

 

平滑过渡

 

由慢到快

 

由快到慢

 

由慢到快再到慢

     

 

 

动画

关键字：animation  属性值有：

1，  name：检索或设置对象所应用的动画名称，取值范围有：

none：不引用任何动画名称。

Identifier：定义一个或多个动画名称。

其必须与@keyframes配合使用，因为动画名由@keyframes提供

2，  duration：检索或设置动画的持续时间。

Time：时间。

                            3，-timing-function：检索或设置动画的过度类型。

                                     取值同过度同。

4,delay：检索或设置动画延迟的时间。

Time：时间。

5  count：检索或设置对象动画的循环次数。

                   Infinite：无限循环。

                   Number：指定动画的具体循环次数。

         6 ，direction：检索或设置对象动画在循环中的是否反向运动。

                   Normal：正常方向。

                   Alternate：正常与反向交替。