css3笔记
2016-05-21 18:54
615 查看
1、选择器
帮助我们定位网页上的元素，并且施加样式
（1）兄弟选择器
具备相同父元素的元素，就是兄弟元素
分类：
<1>相邻兄弟选择器：紧挨着的后面的选择器
语法：选择器+相邻兄弟选择器
<2>通用兄弟选择器:匹配某元素后面的所有兄弟元素（没有位置关系限制）
语法：选择器~兄弟选择器
<3>属性选择器
将元素所附带的属性用于选择器中，帮助我们匹配制定的元素
语法：[]
1、div[class]：匹配具备class属性的div元素
div[class][id]：既有id属性和class属性的div元素
2、[type=button]：匹配type属性值为button的元素
3、[class ~="important"]
class属性值，是一个用空格隔开的值列表，important当前列表中的一个单词
4、p[class^="b"]
class属性值以"b"开头的所有p元素
5、p[class$="b"]
class属性值以"b"结尾的所有p元素
6、p[class*="b"]
class属性值中包含"b"的所有p元素
3、伪类选择器
作用：匹配元素的不同的状态
1、链接伪类
:link
:visited
2、动态伪类
:hover
:active
:focus
3、目标伪类
:target
作用：突出显示 活动的 html 锚元素
4、元素状态伪类
作用：匹配元素 启用 禁用 被选中的状态的。
input 具备禁用启用
input : radio , checkbox 具备被选中状态
:enabled : 匹配每个已启用的元素
:disabled : 匹配每个已禁用的元素
:checked : 匹配每个已被选中的input元素(只用于 checkbox 和 radio)
注意：元素状态伪类，只有在表单元素中
5、结构伪类
:first-child : 匹配属于其父元素中的首个子元素
table td:first-child
:last-child : 匹配属于其父元素中的最后一个子元素
:nth-child(number) : 匹配是其父元素中的第 number 个子元素
:empty : 匹配没有子元素(包含文本)的元素
<div> 有子元素
<p></p>
</div>
<div> 有子元素
我是子元素吗？
</div>
<div> 有子元素
</div>
<div></div> 没有子元素
:only-child : 匹配是其父元素中的唯一子元素
6、否定伪类
:not(selector)
匹配非指定元素/选择器的每个元素
或
将 selector 匹配的元素 排除在外
table td:not(:first-child){} : 匹配table中，每行里面除第一列以外的其他列
4、伪元素选择器
匹配 元素中 内容 的某一部分
1、:first-letter 或 ::first-letter
选取指定元素的首字符
2、:first-line 或 ::first-line
选取指定元素的首行
3、::selection
匹配被用户选取的部分
: 与 ::的区别
1、: 全部都是伪类选择器
:: 全部都是伪元素选择器
2、在CSS2规范中，伪元素 和 伪类 全部都通过 : 显示
3、在CSS3规范中，要求 伪元素 必须用 :: ，伪类，只能用 :
4、但是，网页为了向前兼容 CSS2 ，所以，有的时候，可以使用 : 来表示 伪元素
*****************************************************
1、内容生成
通过CSS的方式，在指定的元素[前面] 或者 [后面] 增加一部分内容
伪元素选择器：
:before : 能够匹配到某个元素的内容区域之前
<div> [:before] This is a div</div>
:after : 能够匹配到某个元素的内容区域之后
<div>This is a div [:after] </div>
属性：
content 属性 一般会配合着 :before 以及 :after,来插入生成的内容
常用取值：
1、字符串，普通的文本
2、url() : 图片
3、计数器
通过内容生成解决的问题：
1、父子元素中，设置子元素的上外边距时的问题
解决方案：
1、加边框，不合适
2、父元素中增加上内边距 ， 不合适
3、内容生成
2、浮动 引发父元素高度的问题
解决方案:
1、overflow:hidden
不合适
2、显示设置 父元素高度
不适合做高度自适应的元素
3、父元素末端追加 空 div 并且 clear:both
4、内容生成
计数器：
可以在指定元素内容区域之前或之后，通过计数器得到一个自动生成的数字作为填充内容
1、counter-reset 属性
作用：声明/复位 一个计数器
语法：counter-reset:名称 初始值;
注意：
1、声明计数器的位置
计数器必须放在父元素中去声明，子元素可以无条件使用
如果页面中所有的元素统一使用一个计数器的话，那么该计数器可以声明在 body 中
2、省略初始值
声明计数器时，后面的初始值可以省略，如果省略则为 0。
counter-reset:c1;
等同于
counter-reset:c1 0;
3、声明多个计数器
1、通过1个counter-reset 声明
counter-reset:c1 c2;
counter-reset:c1 10 c2 20;
2、counter-increment 属性
作用：设置 计数器每次使用时的增量。默认增量值为1
counter-increment:名称 增量值;
counter-increment:c1 1;
等同于
counter-increment:c1;
注意：
1、不设置计数器增量
那么每次使用计数器的时候，值都是不变的。
2、声明位置
哪个元素要使用计数器，哪个元素中声明 计数器的增量
3、counter() 函数
作用：通过计数器的名称，引用/使用计数器,多数配合着 content属性一起来使用
content:counter(名称);
练习：
1、HTML<h1>
1.1 基本标记<h2>
1.2 块级元素
1.3 行内元素
2、CSS<h1>
2.1 背景属性<h2>
2.2 文本属性
2.3 选择器
2、多列
将一段文本， 显示的分割成 几列去显示
属性：
1、column-count
规定元素被拆分成几列
2、column-gap
规定列与列之间的间隔距离
3、column-rule
规定列间隔的边框的 宽度 样式 颜色
注意：
该组属性，有浏览器兼容性问题，需要根据不同的浏览器增加前缀
-o- : Opera
-webkit- : Chrom Safari
-moz- : Firefox
-ms-:IE
3、CSS Hack
1、CSSHack 三种形式
1、类内部Hack
在 选择器内部针对属性前后，增加浏览器的识别内容
* : ie7
- : ie6
\0 : ie8
\9\0 : ie9 ie10
2、选择器Hack
在浏览器前加 浏览器 识别内容
3、HTML头部引用Hack
通过条件注释的方式来实现样式的识别
<!-- HTML 注释 -->
<!--[if 关键字 IE 版本号]>
待解析内容
<![endif]-->
版本号 ： IE的版本，6,7,8,9，
可以省略，如果省略的话，判断是否为IE浏览器
关键字 ：
省略：判断是否为指定版本的 IE 浏览器
<!--[if IE 6]>
这段内容，只有在IE6浏览器中，才能执行
<![endif]-->
gt : 大于指定的版本(不包含)
<!--[if gt IE 6]>
待解析内容
<![endif]-->
gte : 大于等于指定的版本(包含)
lt : 小于指定的版本（不包含）
lte: 小于等于指定的版本(包含)
!:不等于指定的版本
<!--[if !IE]>
待解析内容
<![endif]-->
-----------------------------------------------------------------------
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>通用兄弟选择器:匹配某元素后面的所有兄弟元素（没有位置关系限制）
语法：选择器~兄弟选择器
<3>属性选择器
将元素所附带的属性用于选择器中，帮助我们匹配制定的元素
语法：[]
1、div[class]：匹配具备class属性的div元素
div[class][id]：既有id属性和class属性的div元素
2、[type=button]：匹配type属性值为button的元素
3、[class ~="important"]
class属性值，是一个用空格隔开的值列表，important当前列表中的一个单词
4、p[class^="b"]
class属性值以"b"开头的所有p元素
5、p[class$="b"]
class属性值以"b"结尾的所有p元素
6、p[class*="b"]
class属性值中包含"b"的所有p元素
3、伪类选择器
作用：匹配元素的不同的状态
1、链接伪类
:link
:visited
2、动态伪类
:hover
:active
:focus
3、目标伪类
:target
作用：突出显示 活动的 html 锚元素
4、元素状态伪类
作用：匹配元素 启用 禁用 被选中的状态的。
input 具备禁用启用
input : radio , checkbox 具备被选中状态
:enabled : 匹配每个已启用的元素
:disabled : 匹配每个已禁用的元素
:checked : 匹配每个已被选中的input元素(只用于 checkbox 和 radio)
注意：元素状态伪类，只有在表单元素中
5、结构伪类
:first-child : 匹配属于其父元素中的首个子元素
table td:first-child
:last-child : 匹配属于其父元素中的最后一个子元素
:nth-child(number) : 匹配是其父元素中的第 number 个子元素
:empty : 匹配没有子元素(包含文本)的元素
<div> 有子元素
<p></p>
</div>
<div> 有子元素
我是子元素吗？
</div>
<div> 有子元素
</div>
<div></div> 没有子元素
:only-child : 匹配是其父元素中的唯一子元素
6、否定伪类
:not(selector)
匹配非指定元素/选择器的每个元素
或
将 selector 匹配的元素 排除在外
table td:not(:first-child){} : 匹配table中，每行里面除第一列以外的其他列
4、伪元素选择器
匹配 元素中 内容 的某一部分
1、:first-letter 或 ::first-letter
选取指定元素的首字符
2、:first-line 或 ::first-line
选取指定元素的首行
3、::selection
匹配被用户选取的部分
: 与 ::的区别
1、: 全部都是伪类选择器
:: 全部都是伪元素选择器
2、在CSS2规范中，伪元素 和 伪类 全部都通过 : 显示
3、在CSS3规范中，要求 伪元素 必须用 :: ，伪类，只能用 :
4、但是，网页为了向前兼容 CSS2 ，所以，有的时候，可以使用 : 来表示 伪元素
*****************************************************
1、内容生成
通过CSS的方式，在指定的元素[前面] 或者 [后面] 增加一部分内容
伪元素选择器：
:before : 能够匹配到某个元素的内容区域之前
<div> [:before] This is a div</div>
:after : 能够匹配到某个元素的内容区域之后
<div>This is a div [:after] </div>
属性：
content 属性 一般会配合着 :before 以及 :after,来插入生成的内容
常用取值：
1、字符串，普通的文本
2、url() : 图片
3、计数器
通过内容生成解决的问题：
1、父子元素中，设置子元素的上外边距时的问题
解决方案：
1、加边框，不合适
2、父元素中增加上内边距 ， 不合适
3、内容生成
2、浮动 引发父元素高度的问题
解决方案:
1、overflow:hidden
不合适
2、显示设置 父元素高度
不适合做高度自适应的元素
3、父元素末端追加 空 div 并且 clear:both
4、内容生成
计数器：
可以在指定元素内容区域之前或之后，通过计数器得到一个自动生成的数字作为填充内容
1、counter-reset 属性
作用：声明/复位 一个计数器
语法：counter-reset:名称 初始值;
注意：
1、声明计数器的位置
计数器必须放在父元素中去声明，子元素可以无条件使用
如果页面中所有的元素统一使用一个计数器的话，那么该计数器可以声明在 body 中
2、省略初始值
声明计数器时，后面的初始值可以省略，如果省略则为 0。
counter-reset:c1;
等同于
counter-reset:c1 0;
3、声明多个计数器
1、通过1个counter-reset 声明
counter-reset:c1 c2;
counter-reset:c1 10 c2 20;
2、counter-increment 属性
作用：设置 计数器每次使用时的增量。默认增量值为1
counter-increment:名称 增量值;
counter-increment:c1 1;
等同于
counter-increment:c1;
注意：
1、不设置计数器增量
那么每次使用计数器的时候，值都是不变的。
2、声明位置
哪个元素要使用计数器，哪个元素中声明 计数器的增量
3、counter() 函数
作用：通过计数器的名称，引用/使用计数器,多数配合着 content属性一起来使用
content:counter(名称);
练习：
1、HTML<h1>
1.1 基本标记<h2>
1.2 块级元素
1.3 行内元素
2、CSS<h1>
2.1 背景属性<h2>
2.2 文本属性
2.3 选择器
2、多列
将一段文本， 显示的分割成 几列去显示
属性：
1、column-count
规定元素被拆分成几列
2、column-gap
规定列与列之间的间隔距离
3、column-rule
规定列间隔的边框的 宽度 样式 颜色
注意：
该组属性，有浏览器兼容性问题，需要根据不同的浏览器增加前缀
-o- : Opera
-webkit- : Chrom Safari
-moz- : Firefox
-ms-:IE
3、CSS Hack
1、CSSHack 三种形式
1、类内部Hack
在 选择器内部针对属性前后，增加浏览器的识别内容
* : ie7
- : ie6
\0 : ie8
\9\0 : ie9 ie10
2、选择器Hack
在浏览器前加 浏览器 识别内容
3、HTML头部引用Hack
通过条件注释的方式来实现样式的识别
<!-- HTML 注释 -->
<!--[if 关键字 IE 版本号]>
待解析内容
<![endif]-->
版本号 ： IE的版本，6,7,8,9，
可以省略，如果省略的话，判断是否为IE浏览器
关键字 ：
省略：判断是否为指定版本的 IE 浏览器
<!--[if IE 6]>
这段内容，只有在IE6浏览器中，才能执行
<![endif]-->
gt : 大于指定的版本(不包含)
<!--[if gt IE 6]>
待解析内容
<![endif]-->
gte : 大于等于指定的版本(包含)
lt : 小于指定的版本（不包含）
lte: 小于等于指定的版本(包含)
!:不等于指定的版本
<!--[if !IE]>
待解析内容
<![endif]-->
-----------------------------------------------------------------------
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 : 暂停
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 