【HTML5响应式网页设计-T4】

HTML5响应式网页设计-T4

一、过渡

从某个状态在一定时间内变为另一个状态。

1.1基本语法

transition: 变化的属性 持续时间 过渡类型 延迟时间;

• 持续时间和延迟时间的单位为秒（s）
• 过渡类型包括：
• case：慢速开始，接着加速，然后慢速结束（默认值）
• linear：相同速度过渡
• 过渡属性设置位置：谁过渡给谁加

过渡属性

属性	说明
transition-delay	指定过渡开始之前的延迟时间
transition-duration	指定过渡的持续时间
transition-property	指定应用过渡的属性
transition-timing-function	指定过渡期间计算中间值的方式。ease指定慢速开始，接着加速，慢速结束（默认值）。linear匀速、ease-in慢速开始，ease-in-out慢速开始，慢速结束
transition	简写属性 运用哪些（all） 维持时间 速度 延迟时间

1.2多属性操作

如果需要实现多属性的过渡效果，可以使用如下两种方式：

• 给涉及到的属性单独设置效果：

transition: width 2s, background-color 3s; 

• 如果所有属性效果一致，可以做如下设置：（使用all代表所有需要设置过渡的属性）

transition: width 3s, background-color 3s; 
transition: width 3s, background-color 3s; 

二、动画

@keyframes 关键帧名{

        from{

                起始样式属性值        

        }

        to{

                结束样式属性值        

        }

}

或

@keyframes 关键帧名{

        0%{

                样式属性值        

        }

        ...

        50%{

                样式属性值        

        }

        ...

        100%{

                样式属性值        

        }

}

animation:关键帧组名 持续时间 动画速度 延迟时间 播放次数

属性	说明
animation-delay	指定动画开始之前的延迟时间
animation-direction	指定动画循环播放的时间和是否反向播放过渡的持续时间，取值normal或alternate
animation-duration	指定动画播放的持续时间
animation-iteration-count	指定动画的播放次数，取值infinite或数值
animation-name	指定动画名称
animation-play-state	允许动画暂停和重新播放，取值running或paused
animation-timing-function	指定动画期间计算中间值的方式。确定动画播放速度的变化
animation	动画属性简写

2.1变换

属性:transform

说明

指定应用的变换功能

translate(<长度值或百分数值>)指定在水平和垂直两个方向上平移元素

translateX(<长度值或百分数值>)指定在水平方向上平移元素

translateY(<长度值或百分数值>)指定在垂直方向上平移元素

scale(<数值>)指定在水平和垂直两个方向上缩放元素

1.0原始数值 1.5以1.5的比例放大 0.8缩小

scaleX(<数值>)指定在水平方向上缩放元素

scaleY(<数值>)指定在垂直方向上缩放元素

rotate(<角度>)旋转元素

skew(<角度>)指在水平和垂直两个方向上倾斜元素

skewX(<角度>)指在水平方向上倾斜元素

skewY(<角度>)指在垂直方向上倾斜元素

matrix(4~6个数值，逗号隔开)指定自定义变换

属性:transform-origin

说明:

指定变换的起点

<%>指定元素X轴或者Y轴的起点

<长度值>指定距离

指定X轴上的位置{left、center、right}

指定Y轴上的位置{top、center、bottom}

CSS变换（ transform ）能够对元素进行如下操作：

• 移动（ translate ）
• 缩放（ scale ）
• 旋转（ rotate ）
• 扭曲（ skew ）

2.1.1移动

transform: translate(水平平移量,垂直平移量);

单独设置水平平移量和垂直平移量：

transform: translateX(水平平移量);
transform: translateY(垂直平移量);

平移量是用 px 为单位 平移不会影响其他元素

2.1.2缩放

transform: scale(水平缩放倍数,垂直缩放倍数);

单独设置水平平移量和垂直平移量：

transform: scaleX(水平缩放倍数);
transform: scaleY(垂直缩放倍数);

说明：

缩放量使用 倍数 为单位
平移不会影响其他元素

2.1.3旋转

transform: rotate(旋转角度);

说明：

角度单位为： deg 
顺时针为正数，逆时针为负数

属性	说明
deg	角度（degrees）
grad	梯度（gradians）
rad	弧度（radians）
turn	转、圈（turns）

2.1.4扭曲

transform: skew(水平方向角度,垂直方向角度);

单独设置水平平移量和垂直平移量：

transform: skewX(水平方向角度);
transform: skewY(垂直方向角度);

说明

角度单位为： deg 
顺时针为正数，逆时针为负数