CSS3学习笔记2

CSS3学习

过渡属性

动画效果

• CSS3出现之前，前端一般使用flash动画或者JavaScript制作动画
• 帧动画：通过一帧一帧的画面按照固定顺序和速度播放，如电影胶片

过渡属性

属性名：transition
作用：在不使用flash动画或JavaScript的情况下，使用transition可实现补间动画（过渡效果），并当元素只要有属性发生变化时即存在两种状态（用A和B代表），那么A和B之间就可实现平滑的过渡的动画效果
语法格式：

transition: 过渡属性 过渡时间 运动曲线 延时时间;

单一属性写法

1、transition-property 过渡属性

• none表示没有属性过渡
• all表示所有变化的属性都过渡
• 属性名 使用具体的属性名，多个属性名中间逗号分隔

2、时间

• 过渡时间：以s秒为单位
• 延时时间：以s秒为单位，0s也必须加单位

3、transition-timing-function 时间曲线

4、贝塞尔曲线


5、浏览器兼容

• IE10、Firefox、Chrome以及Opera支持transition属性
• Safari 需要前缀 -webkit-
• 注意：IE9以及更早的版本不支持transition属性

2D转换

属性名：transform
作用：对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和动画，可以取代大量以前只能靠flash才能实现的效果
属性值：多种转换方法的属性值，可实现不同的转换效果

1、位移 translate()
transform的属性值为translate()时，可实现位移效果

书写语法

2、缩放 scale()
transform的属性值为scale()时，可实现元素缩放效果

书写语法

3、旋转 rotate()
transform 属性值设置为rotate()时，实现元素的旋转

书写语法：
rotate(数字deg)
其中，deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转；2D旋转只有一个属性值
注意：元素旋转后，坐标轴也跟着发生转变，因此，多个属性值同时设置给transform时，书写顺序不同导致的转换效果有差异

4、倾斜 skew()
transform 属性值设置为skew()时，实现元素的倾斜

书写语法：
transform: skew(数字deg, 数字deg);
两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正，也可为负，第二个数值不写默认为0

5、transform-origin 属性
作用：设置调整元素的水平和垂直方向原点的位置
调整元素的基准点
属性值：包含两个，中间使用空格分隔

3D转换

transform属性不止能实现2D转换，也可制作3D立体转换效果，比普通的x、y轴组成的平面效果多了一条z轴

1、透视
电脑显示屏是一个2D平面，图像之所以具有立体感（即3D效果），其实只是一种视觉呈现，通过透视可实现这个目的
透视可将一个2D平面在转换的过程中，呈现3D效果
透视特点：近大远小
注意：不是所有的情况都需要透视效果，根据开发需求进行设置，如果需要展示z轴的变化，就需要设置透视效果

2、透视属性 perspective
属性名：perspective
作用 ：设置在z轴的视线焦点的观察位置，从而实现3D查看效果
属性值：像素值，数值越大，观察点距离z轴原点越远，图形效果越完整且接近原始尺寸
注意：透视属性需要设置给3D变化元素的父级

3、3D 旋转
3D旋转需要分别对三个方向的旋转角度值进行设置
属性值：

注意：属性值的角度区分正负，正数表示沿对应坐标轴顺时针方向旋转，负数表示沿对应坐标轴逆时针方向旋转

4、3D 位移
位移也需要分三个方向移动
属性值：

属性值为像素值或百分比，正负表示位移的方向，正值向对应轴的正方向移动，负值向对应轴的负方向移动

5、transform-style 属性
说明：用于设置被嵌套的子元素在父元素的3D空间中显示，子元素会保留自己的3D转换坐标轴
属性值：
flat：所有子元素在2D平面呈现
preserve-3d：保留3D空间
3D元素构建是指某个图形是由多个元素构成，可给这些元素的父元素设置transform-style: preserve-3d，来使其变成一个真正的3D图形，正常来说，该属性设置给3D变换图形的父级元素

6、浏览器兼容

• IE10、Firefox和Opera支持transform属性
• Chrome和Safari需要前缀-webkit-
• IE9需要前缀-ms-

动画

CSS3中提供了动画制作方法，可在许多网页中取代动画图片、flash动画以及JavaScript
CSS3动画制作分为两步：创建动画、绑定动画

1、@keyframes 规则
@keyframes 规则用于创建动画
在@可以frames 中规定某项CSS样式，就能创建由从一种样式逐渐变化为两一种样式的效果
可改变任意多的样式任意多的次数
需要使用百分比来规定变化发生的时间，或用关键词from和to，等同于0%和100%
0%是动画的开始，100%是动画的完成

2、@keyframes 书写方法
@keyframes 动画名称 {
动画过程，可添加任意百分比处的动画细节
}

3、animation 属性
需要将@keyframes 中创建的动画捆绑到某个选择器，否则不会产生动画效果
animation属性用于对动画进行捆绑

语法：
div {
	animation: 动画名称 过渡时间 速度曲线 动画次数 延时时间;
}
其中必须设置动画名称和过渡时间，其他属性值可根据需求设置

4、单一属性列表

5、浏览器兼容

• IE10、Firefox和Opera支持@keyframes规则和animation属性
• Chrome和Safari需要前缀-webkit-
• IE9以及更早版本不支持@keyframes规则或animation属性