css3笔记
2016-05-21 18:52
405 查看
1、转换
1、转换简介
1、什么是转换
转换是使元素改变形状、位置、尺寸的一种效果
2、转换分类
主要分为 2d 转换 和 3d转换
2d转换主要是在 x,y轴进行的变换
3d转换主要是在 x,y,z轴进行的变换
3、转换属性
属性:transform
取值:一个/一组 转换函数
transform : none / transform-function;
注意:transform-function 为 转换函数,如果是多个的话,中间用 空格 分开
4、转换的原点
在待转换的元素上定义一个点,所有的操作都将围绕着这个点来做
默认情况下,转换的原点就在 元素的 正中间处。
修改转换原点
属性:transform-origin
取值:
数量:
两个值 :分别表示 x 轴的位置 和 y轴的位置
三个值 :分别表示 x 轴的位置 和 y轴的位置 和 z轴的位置
值得形式:
1、百分比 : 按照元素的宽和高的占比来设置原点的位置
0% 0% , 左上
100% 100% , 右下
50% 50% , 中心
2、具体是指 : 在元素的指定位置处设置原点
0 0 :左上
宽最大值 高最大值 :右下
3、关键字
top,bottom,left,right,center
2、2d转换
使元素在x轴 和 y轴上产生的变换 称为2d转换
1、位移
让元素在x轴 或y轴所进行的位置的改变就称之为位移
属性:transform
函数:translate(x),translate(x,y)
x : 表示横向位移距离,数值为正,向右移动,数值为负,向左移动
y : 纵向移动距离,数值为正,向下移,数值为负,向上移
取值:可以是具体的数值,也可以是 百分比
单向位移:translatex(x),translatey(y)
2、缩放
改变元素的尺寸
属性:transform
函数:scale(x)或scale(x,y)
注意:如果 scale() 只给一个参数的话 ,那么x轴,和y轴的缩放比例是一样的
scale(2) --> scale(2,2)
取值:缩放比例 或 缩放倍数
默认值 1 : 则为正常大小
> 1 : 放大
0 ~ 1 : 缩小
单向缩放函数: scaleX(x),scaleY(y)
3、旋转
使元素,围绕着[中心点]所产生的旋转操作
属性:transform
函数:rotate(ndeg)
注意:
1、deg 为关键字, 不能省略,表示 角度
2、n 具体的旋转角度数值
n为正 , 则为顺时针旋转
n为负 , 则为逆时针旋转
3、旋转操作,会将元素的坐标轴一同发生旋转
4、倾斜
使元素按照一定的[角度]产生倾斜
属性:transform
函数:skew(x),skew(x,y)
单向倾斜函数 :skewX(x),skewY(y)
x 轴倾斜,让元素向着横向方向(左或右)倾斜(倒)
3、3d转换
x,y,z
1、perspective
假定 人眼 到 投射物体的距离
perspective 属性不能放置在3d变换元素本身上,要放在其父元素上。
该元素放在父元素上,其子元素能够产生3d变换的效果
兼容性问题
Chrome,Safari : -webkit-
Firefox : -moz-
Opera : -o-
IE : -ms
2、转换属性 : transform
3、转换函数(效果)
1、位移
改变元素在z轴的位置
translatez()
translate3d(x,y,z)
2、旋转
让元素在 x轴 , y轴 , z轴的位置上分别产生一定的旋转操作
x轴旋转 : 以x轴为中心轴所产生的旋转效果
y :
z :与2d 中转换效果是一致的
rotatex(xdeg)
rotatey(ydeg)
rotatez(zdeg)
rotate3d(x,y,z,deg)
x,y,z 取值 :0 或 大于0的数字
0 : 说明该轴不参与旋转操作
大于0 : 该轴参与旋转操作
rotate3d(1,0,0,45deg) --> x轴旋转45deg
|
|
等同
rotatex(45deg)
rotate3d(1,1,0,45deg) --> x轴旋转45deg,y轴旋转45deg
3、3d缩放
scalez(z)
scale3d(x,y,z)
4、transform-style
作用:使被转换的子元素保留其3d转换位置
取值:
flat : 子元素将不保留其3d位置(默认值),子元素按2d方式展示
preserve-3d : 子元素将保留其3d位置,子元素可以按3d位置摆放
************************************************************
1、过渡
1、什么是过渡
是CSS属性值,在[一段时间]内[平缓]的过渡
2、与过渡相关的要素
1、过渡属性
在哪个CSS属性值发生变化的时候要使用过渡效果
2、过渡所需要的时间
过渡会在指定的时间内产生变化效果
以上两个属性,为过渡操作中,不可缺少的元素
3、过渡时间速度曲线函数
过渡动画的速率
4、过渡的延迟时间
激发操作后,需要等待多长时间,再执行过渡的效果
3、触发过渡效果
1、通过 :hover 选择器进行触发
2、通过Javascript 也可以完成过渡的触发
4、过渡相关子属性
1、过渡属性
属性:transition-property
取值:CSS的属性名称;
transition-property:background;
transition-property:margin;
none : 不适用过渡
all : 所有属性值发生变化的时候,都使用过渡
可以设置过渡的属性:
1、颜色相关属性:color,background-color,border-color
2、取值为数值的相关属性:尺寸,margin,padding ...
3、转换属性 : transform
4、渐变属性 : background-image:linear-gradient(),radial-gradient()
5、visibility 属性
6、阴影属性 : box-shadow,text-shadow
2、过渡时间
属性:transition-duration
取值:以 ms | s 作为单位
1000ms = 1s
500ms = 0.5s
注意:该属性不能省略,如果省略,默认为 0 ,则没有过渡效果
3、过渡速度时间曲线函数
属性:transition-timing-function
取值:
ease :默认值,快速变快,慢速结束
linear : 匀速
ease-in : 慢速开始,加速效果
ease-out : 快速开始,减速效果
ease-in-out : 慢速开始和结束,中间先加速再减速
4、过渡延迟
属性:transition-delay
取值:以 ms | s 为单位
5、过渡的简写属性
transition:property duration timing-function delay;
5、多个过渡效果
在各个属性取值时,用 , 隔开多个数据
transition-property : background,width,height;
transition-duration:3s,2s,1s;
transition-timing-function:linear,linear,linear;
transition-delay:1s,2s,3s;
transition:backgrond 1s,
width 3s linear 1s;
2、动画
1、什么是动画
可以在多个 状态 之间进行平缓过渡的效果
实际就是多组属性间的平缓过渡
2、动画的使用步骤
1、声明动画
声明关键帧:
关键帧:当前元素的几个关键状态。当设置好关键帧后,动画可以将几个 关键帧 连接起来,并使用过渡的效果显示出来
关键帧2要素:
1、执行到当前关键帧的 时间点 0% , 100% ,50%
2、当前关键帧的状态(css属性值)
语法:@keyframes 声明关键帧
@keyframes 动画名称{
/*声明关键帧*/
from | 0%{
/*CSS 样式;*/
background:red;
width:100px;
height:100px;
}
50%{
/*CSS 样式;*/
background:green;
width:200px;
height:200px;
}
to | 100%{
/*CSS 样式*/
background:blue;
width:300px;
height:300px;
}
}
2、调用动画
1、调用的动画名称
属性:animation-name
取值:已经声明好的 @keyframes 的动画名称
2、完成动画所需要的时间
属性:animation-duration
取值:ms | s
3、动画执行的时间速度曲线函数
属性:animation-timing-function
取值:ease linear ease-in ease-out ease-in-out
4、动画延迟
属性:animation-delay
取值:ms | s
5、动画播放次数
属性:animation-iteration-count
取值:具体数值 或 infinite(无限次)
6、动画播放方向
属性:animation-direction
取值:
normal : 正常播放 0% ~ 100%
reverse : 逆向播放 100% ~ 0%
alternate : 轮流播放 ,奇数次数时,正常播放,偶数次数时则为逆向播放
7、动画的简写属性
属性:animation
取值:name duration timing-function delay iteration-count direction;
8、动画填充模式
动画在播放前后的填充模式
属性:animation-fill-mode
取值:none,forwards,backwards,both
9、动画播放状态
属性:animation-play-state
取值:
running :播放
paused : 暂停
1、转换简介
1、什么是转换
转换是使元素改变形状、位置、尺寸的一种效果
2、转换分类
主要分为 2d 转换 和 3d转换
2d转换主要是在 x,y轴进行的变换
3d转换主要是在 x,y,z轴进行的变换
3、转换属性
属性:transform
取值:一个/一组 转换函数
transform : none / transform-function;
注意:transform-function 为 转换函数,如果是多个的话,中间用 空格 分开
4、转换的原点
在待转换的元素上定义一个点,所有的操作都将围绕着这个点来做
默认情况下,转换的原点就在 元素的 正中间处。
修改转换原点
属性:transform-origin
取值:
数量:
两个值 :分别表示 x 轴的位置 和 y轴的位置
三个值 :分别表示 x 轴的位置 和 y轴的位置 和 z轴的位置
值得形式:
1、百分比 : 按照元素的宽和高的占比来设置原点的位置
0% 0% , 左上
100% 100% , 右下
50% 50% , 中心
2、具体是指 : 在元素的指定位置处设置原点
0 0 :左上
宽最大值 高最大值 :右下
3、关键字
top,bottom,left,right,center
2、2d转换
使元素在x轴 和 y轴上产生的变换 称为2d转换
1、位移
让元素在x轴 或y轴所进行的位置的改变就称之为位移
属性:transform
函数:translate(x),translate(x,y)
x : 表示横向位移距离,数值为正,向右移动,数值为负,向左移动
y : 纵向移动距离,数值为正,向下移,数值为负,向上移
取值:可以是具体的数值,也可以是 百分比
单向位移:translatex(x),translatey(y)
2、缩放
改变元素的尺寸
属性:transform
函数:scale(x)或scale(x,y)
注意:如果 scale() 只给一个参数的话 ,那么x轴,和y轴的缩放比例是一样的
scale(2) --> scale(2,2)
取值:缩放比例 或 缩放倍数
默认值 1 : 则为正常大小
> 1 : 放大
0 ~ 1 : 缩小
单向缩放函数: scaleX(x),scaleY(y)
3、旋转
使元素,围绕着[中心点]所产生的旋转操作
属性:transform
函数:rotate(ndeg)
注意:
1、deg 为关键字, 不能省略,表示 角度
2、n 具体的旋转角度数值
n为正 , 则为顺时针旋转
n为负 , 则为逆时针旋转
3、旋转操作,会将元素的坐标轴一同发生旋转
4、倾斜
使元素按照一定的[角度]产生倾斜
属性:transform
函数:skew(x),skew(x,y)
单向倾斜函数 :skewX(x),skewY(y)
x 轴倾斜,让元素向着横向方向(左或右)倾斜(倒)
3、3d转换
x,y,z
1、perspective
假定 人眼 到 投射物体的距离
perspective 属性不能放置在3d变换元素本身上,要放在其父元素上。
该元素放在父元素上,其子元素能够产生3d变换的效果
兼容性问题
Chrome,Safari : -webkit-
Firefox : -moz-
Opera : -o-
IE : -ms
2、转换属性 : transform
3、转换函数(效果)
1、位移
改变元素在z轴的位置
translatez()
translate3d(x,y,z)
2、旋转
让元素在 x轴 , y轴 , z轴的位置上分别产生一定的旋转操作
x轴旋转 : 以x轴为中心轴所产生的旋转效果
y :
z :与2d 中转换效果是一致的
rotatex(xdeg)
rotatey(ydeg)
rotatez(zdeg)
rotate3d(x,y,z,deg)
x,y,z 取值 :0 或 大于0的数字
0 : 说明该轴不参与旋转操作
大于0 : 该轴参与旋转操作
rotate3d(1,0,0,45deg) --> x轴旋转45deg
|
|
等同
rotatex(45deg)
rotate3d(1,1,0,45deg) --> x轴旋转45deg,y轴旋转45deg
3、3d缩放
scalez(z)
scale3d(x,y,z)
4、transform-style
作用:使被转换的子元素保留其3d转换位置
取值:
flat : 子元素将不保留其3d位置(默认值),子元素按2d方式展示
preserve-3d : 子元素将保留其3d位置,子元素可以按3d位置摆放
************************************************************
1、过渡
1、什么是过渡
是CSS属性值,在[一段时间]内[平缓]的过渡
2、与过渡相关的要素
1、过渡属性
在哪个CSS属性值发生变化的时候要使用过渡效果
2、过渡所需要的时间
过渡会在指定的时间内产生变化效果
以上两个属性,为过渡操作中,不可缺少的元素
3、过渡时间速度曲线函数
过渡动画的速率
4、过渡的延迟时间
激发操作后,需要等待多长时间,再执行过渡的效果
3、触发过渡效果
1、通过 :hover 选择器进行触发
2、通过Javascript 也可以完成过渡的触发
4、过渡相关子属性
1、过渡属性
属性:transition-property
取值:CSS的属性名称;
transition-property:background;
transition-property:margin;
none : 不适用过渡
all : 所有属性值发生变化的时候,都使用过渡
可以设置过渡的属性:
1、颜色相关属性:color,background-color,border-color
2、取值为数值的相关属性:尺寸,margin,padding ...
3、转换属性 : transform
4、渐变属性 : background-image:linear-gradient(),radial-gradient()
5、visibility 属性
6、阴影属性 : box-shadow,text-shadow
2、过渡时间
属性:transition-duration
取值:以 ms | s 作为单位
1000ms = 1s
500ms = 0.5s
注意:该属性不能省略,如果省略,默认为 0 ,则没有过渡效果
3、过渡速度时间曲线函数
属性:transition-timing-function
取值:
ease :默认值,快速变快,慢速结束
linear : 匀速
ease-in : 慢速开始,加速效果
ease-out : 快速开始,减速效果
ease-in-out : 慢速开始和结束,中间先加速再减速
4、过渡延迟
属性:transition-delay
取值:以 ms | s 为单位
5、过渡的简写属性
transition:property duration timing-function delay;
5、多个过渡效果
在各个属性取值时,用 , 隔开多个数据
transition-property : background,width,height;
transition-duration:3s,2s,1s;
transition-timing-function:linear,linear,linear;
transition-delay:1s,2s,3s;
transition:backgrond 1s,
width 3s linear 1s;
2、动画
1、什么是动画
可以在多个 状态 之间进行平缓过渡的效果
实际就是多组属性间的平缓过渡
2、动画的使用步骤
1、声明动画
声明关键帧:
关键帧:当前元素的几个关键状态。当设置好关键帧后,动画可以将几个 关键帧 连接起来,并使用过渡的效果显示出来
关键帧2要素:
1、执行到当前关键帧的 时间点 0% , 100% ,50%
2、当前关键帧的状态(css属性值)
语法:@keyframes 声明关键帧
@keyframes 动画名称{
/*声明关键帧*/
from | 0%{
/*CSS 样式;*/
background:red;
width:100px;
height:100px;
}
50%{
/*CSS 样式;*/
background:green;
width:200px;
height:200px;
}
to | 100%{
/*CSS 样式*/
background:blue;
width:300px;
height:300px;
}
}
2、调用动画
1、调用的动画名称
属性:animation-name
取值:已经声明好的 @keyframes 的动画名称
2、完成动画所需要的时间
属性:animation-duration
取值:ms | s
3、动画执行的时间速度曲线函数
属性:animation-timing-function
取值:ease linear ease-in ease-out ease-in-out
4、动画延迟
属性:animation-delay
取值:ms | s
5、动画播放次数
属性:animation-iteration-count
取值:具体数值 或 infinite(无限次)
6、动画播放方向
属性:animation-direction
取值:
normal : 正常播放 0% ~ 100%
reverse : 逆向播放 100% ~ 0%
alternate : 轮流播放 ,奇数次数时,正常播放,偶数次数时则为逆向播放
7、动画的简写属性
属性:animation
取值:name duration timing-function delay iteration-count direction;
8、动画填充模式
动画在播放前后的填充模式
属性:animation-fill-mode
取值:none,forwards,backwards,both
9、动画播放状态
属性:animation-play-state
取值:
running :播放
paused : 暂停