欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css3.0新增属性学习_html/css_WEB-ITnose

程序员文章站 2024-02-15 11:00:04
...
            2D 转换(须在style里面定义):位移,缩放,旋转,斜切(扭曲)

转换---关键字:transform;

属性有:

1, 位移:translate(0px,0px

属性值:0px,0px括号里跟两个值,用逗号分割,使元素沿x轴,y轴坐标位移,第二个值可以不给,如果不给则默认为0。

2, 缩放:scale(.5, .5)

属性值:(.5 , .5)括号里跟两个小数(百分数),用逗号分割,元素中心点做为缩放基点,

使元素沿x轴,y轴坐标按比例缩放,第二个值可以不给,如果不给则默认为0。

3, 旋转:rotate(5degrotate(1rad其中Rad弧度,deg度数。

以元素左上角为基点,按值并且顺时针旋转。

重置原点:transform-origin:0 0;

Origin后面跟两个number使元素按x轴,y轴重置旋转原点。

4, 斜切(扭曲):skew(1rad,1rad

属性值:1rad,1rad括号里跟两个弧度值rad确定扭曲程度,其值分别对应x,y轴,其第二个值可以不提供,如不提供则默认为0。

过度须在style里面定义)

过度---关键字:transition 后面紧跟4个值 如:

Transition:[transition-property]||[transition-duration]||

[transition-timing-function]||[transition-delay];

即:transition: all 4s linear 2s;

其值含义分别为:

1, property:检索或设置对象中的参与过度的属性,其取值范围有:

All(默认值):所有可以进行过度的css属性。

None:不指定过度的css属性。

2, duration:检索或设置对象过度的持续时间,其取值范围有:

time:指定对象过度的持续时间。

3, timing-function:检索或设置对象中过度的动画类型,其取值范围有(列举5个):

linear:线性过度。

Ease:平滑过度。

Ease-in:由慢到快。

Ease-out:由快到慢。

Ease-in-out:由慢到快再到慢。

4, delay:检索或设置对象延迟延迟过度的时间,其取值范围有:

time:指定对象过度的时间。

下面是一个代码实现过度的实例:

*{

margin: 0;

padding: 0;

}

.out {

width: 800px;

padding: 1px;

background-color: #999999;

}

.out div {

width: 100px;

height: 100px;

margin: 25px;

background-color: #21bbca;

font-size: 12px;

text-align: center;

line-height: 100px;

}

.inner1 {

-webkit-transition: all 4s linear;

}

.inner2 {

-webkit-transition: all 4s ease;

}

.inner3 {

-webkit-transition: all 4s ease-in;

}

.inner4 {

-webkit-transition: all 4s ease-out;

}

.inner5 {

-webkit-transition: all 4s ease-in-out;

}

.out:hover div {

margin-left: 75%;

-webkit-transform: rotate(360deg);

border-radius: 50%;

}

线性过渡

平滑过渡

由慢到快

由快到慢

由慢到快再到慢

动画

关键字:animation 属性值有:

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

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

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

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

2, duration:检索或设置动画的持续时间。

Time:时间。

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

取值同过度同。

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

Time:时间。

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

Infinite:无限循环。

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

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

Normal:正常方向。

Alternate:正常与反向交替。