CSS3
- CSS渐变
-
- 线性渐变
-
- 线性渐变语法
-
- 线性渐变例：
- 线性渐变的样式属性例：
- 线性渐变的动态效果例：
- 径向渐变构成
-
- 径向渐变语法
- 重复渐变
-
- 重复线性渐变
- CSS变形
-
- transform属性
-
- transform-origin属性
- perspective属性
-
- perspective-origin属性
- backface-visibility属性
- 2D
-
- 2D位移
- 2D缩放
- 2D旋转
-
- 2D旋转的动态效果
- 2D变形综合效果
- 2D倾斜
- 3D
-
- 3D位移
- 3D旋转
- 3D缩放
-
- 3D效果实现立方体
- CSS过渡
-
- 过渡是什么
- transtion属性
-
- 浏览器兼容性
- 指定过渡属性名称
- 指定过渡所需时间
- 指定过渡函数
- 指定过渡延迟时间
- 多个过渡效果
- 伪类触发过渡
- transitionend事件
-
- 检测过渡动画是否完整
- 2D效果的过渡动画
- 3D效果的过渡动画1
- 3D效果的过渡动画2
- CSS动画
-
- 动画是什么
-
- 简单动画效果
- animation属性
- 检测CSS动画支持情况
-
- @keyframes声明动画
- 调用@keyframes动画
- 动画子属性
-
- 通过名称调用动画
- 设置动画执行时间
- 设置动画执行方式
- 设置动画延迟时间
- 设置动画执行次数
- 设置动画执行方向
- 设置动画执行状态
- 设置动画时间外属性
- 弹性盒子模型是什么
- 弹性盒子模型相关概念
-
- 定义弹性盒子模型
- flex-direction属性
- justify-content属性
- align-items属性
- flex-wrap属性
- align-content属性
- flex-flow属性
- flex属性
- align-self属性
- order属性
- CSS Hack
-
- CSS Hack是什么
- CSS Hack的分类
-
- 属性前缀法
- 选择器前缀法
- IE条件注释法
CSS3新增特性：gradients（渐变）、transitions（过度）、animations（动画）
CSS渐变
CSS渐变在CSS3 image module 中新增加的类型
浏览器支持两种类型的渐变：线性渐变( linear )，通过 linear-gradient 函数定义，以及径向渐变( radial )，通过 radial-gradient 函数定义
CSS3新增的渐变主要为：
- 线性渐变
- 径向渐变
- 重复渐变
线性渐变
线性渐变由一个轴定义的，并且轴上每个点都是具有独立的颜色。linear-gradient()函数构建垂直于基准线的渐变效果，渐变的颜色取决于与垂直相交的基准线上的色点。
线性渐变语法
CSS linear-gradient()函数用于创建一个表示颜色线性渐变的图片。
具体语法如下：
说明：
- 第一个参数用于定义线性渐变的方向，并且定义渐变颜色的终止位置
- angle：通过角度来定义渐变的方向。0度表示渐变方向从下向上，90度表示渐变从左向右。其角度按照顺时针方向增加
- siade-or-corner：通过关键字定义渐变的方向。具有两个关键字，一个表示水平位置( left或 right )，一个表示垂直位置( top或 bottom)。
- 第二个参数、第三个参数用于定义渐变颜色的起始点和终止点
对于较老版本的浏览器，linear-gradient()函数通过添加“-prefix”前缀进行兼容
不同浏览器前缀用法：
/*Webkit引擎的浏览器（Chrome、Safari、Opera）*/
-webkit-linear-gradient(<angle>|<side-or-corner>,<color-stop>,<color-stop>);
/*Gecko引擎的浏览器（Firefox）*/
-moz-linear-gradient(<angle>|<side-or-corner>,<color-stop>,<color-stop>);
/*Trident引擎的浏览器（IE 10+）*/
-ms-linear-gradient(<angle>|<side-or-corner>,<color-stop>,<color-stop>);
/*Presto引擎的浏览器（Opera）*/
-o-linear-gradient(<angle>|<side-or-corner>,<color-stop>,<color-stop>);
使用角度指示渐变方向示例：
<style>
div{background:linear-gradient(180deg,red,blue);
}
</style>
<div style="width:400px,height:300px;"></div>
使用关键字指定渐变方向示例：
<style>
div{background:linear-gradient(to right bottom,rad,blue);
}
</style>
<div style="width:400px;height:300px;"></div>
线性渐变例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>线性渐变</title>
<style>
.con div{width: 400px;
height: 400px;
display: inline-block;
}
.con div:nth-child(1){
/* linear-gradient(angle,color-stop,color-stop,...)
*angle - 表示线性渐变的基准线的角度，单位为deg
*color--stop - 表示线性渐变的颜色以及位置 */
background: linear-gradient(0deg,red,blue); }
.con div:nth-child(2){
/* linear-gradient(angle,color-stop,color-stop,...)
*side-or-corner - 通过关键字方式定义线性渐变的基准线的方向
*一个关键字表示水平方向：left和right
*一个关键字表示垂直方向：top和bottom
*注意：
*两个关键字与顺序无关
*两个关键字都是可选的
*color-stop - 表示线性渐变的颜色以及位置 */
background: -webkit-linear-gradient(left,red,blue);
}
.con div:nth-child(3){
/*linear-gradient(angle,color-stop,color-stop,...)
*side-or-corner - 通过关键字方式定义线性渐变的基准线的方向
*关键字 - 表示这个方向为起点
* to 关键字 - 表示这个方向为终点 */
background: linear-gradient(to left,red,blue); }
.con div:nth-child(4){
/*linear-gradient(angle,color-stop,color-stop,...)
*side-or-corner - 通过关键字方式定义线性渐变的基准线的方向
*/
background: -webkit-linear-gradient(left top,red,blue);
}
.con div:nth-child(5){
/*linear-gradient(angle,color-stop,color-stop,...)
*color-stop - 表示线性渐变的颜色以及位置
*简单的只是设置渐变的颜色的位置
*浏览器解析时，自动分配渐变颜色的位置
*渐变的颜色至少是两种颜色，也可以是多种颜色 */
background: linear-gradient(90deg,red,blue,skyblue); }
.con div:nth-child(6){
/*linear-gradient(angle,color-stop,color-stop,...)
*color-stop - 表示线性渐变的颜色以及位置
*如果同时设置颜色以及位置的话，中间使用空格分隔
*颜色的位置的值范围 - 0% ~ 100% */
background: -webkit-linear-gradient(90deg,red,blue 70%,skyblue);
}
.con div:nth-child(7){
/*linear-gradient(angle,color-stop,color-stop,...)
*color-stop - 表示线性渐变的颜色以及位置
*如果同时设置颜色以及位置的话，中间使用空格分隔
*颜色的位置的值范围
*百分比值 - 0%~100%
*长度值 - 数字值 + 长度单位(px,mm)
*/
background: linear-gradient(90deg,red,blue 210px,skyblue); }
.con div:nth-child(8){
/*linear-gradient(angle,color-stop,color-stop,...)
*color-stop - 表示线性渐变的颜色以及位置
*通过rgba()函数方式添加颜色的透明度
*/
background: linear-gradient(90deg,rgba(255,255,255,0),rgba(255,0,0,.5),rgba(0,0,0,1));
}
</style>
</head>
<body>
<div class="con">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
线性渐变的样式属性例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>线性渐变的样式属性</title>
<style>
.con div{
width: 300px;
height: 300px;
display: inline-block;
}
.con div:nth-child(1){
background-image: linear-gradient(90deg,red,blue 201px,skyblue); }
.con div:nth-child(2){
width: 800px;
line-height: 200px;
font-size: 48px;
font-weight: 900;
color: #000;
/*
-webkit-background-clip属性
*该样式属性只作用于内核为Webkit的浏览器
*text - 背景被裁减为文字的前景色（只有Chrome支持） */
-webkit-background-clip: text;
/*
-webkit-text-fill-color属性
*作用 - 用于设置文本填充的样式
*值
*transparent - 透明色
*/
-webkit-text-fill-color:transparent;
/*线性渐变作用于CSS的background-image属性*/
background-image:linear-gradient(90deg,red,blue 201px,skyblue);
}
</style>
</head>
<body>
<div class="con">
<div></div>
<div>啦啦啦啦啦啦啦啦啦</div>
</div>
</body>
</html>
线性渐变的动态效果例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>线性渐变的动态效果</title>
<style>
.con div{
width: 300px;
height: 300px;
display: inline-block;
}
.con div:nth-child(1){
background: linear-gradient(90deg,rgb(255,0,0),rgb(0,0,255));
}
.con div:nth-child(2){
background: linear-gradient(90deg,rgb(0,0,255),rgb(255,0,0) 50%,rgb(0,0,255));
}
.con div:nth-child(3){
background: linear-gradient(90deg,rgb(0,0,255),rgb(255,0,0)); }
.con div:nth-child(4){
background: linear-gradient(90deg,rgb(0,0,255),rgb(255,0,0) 50%,rgb(0,0,255));
}
.con div:nth-child(5){
background: linear-gradient(90deg,rgb(255,0,0),rgb(0,0,255)); }
</style>
</head>
<body>
<div class="con">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="box"></div>
</div>
<script>
var box = document.getElementById('box');
var num = 0;
var t = setInterval(function(){
if (num>=100) {
num=0;
} else {
box.style.background='linear-gradient(90deg,rgb(0,0,255),rgb(255,0,0)'+ num + '%,rgb(0,0,255))';
num++;}
},10
);
</script>
</body>
</html>
径向渐变构成
径向渐变由其中心点、边缘形状轮廓、位置以及颜色结束点定义的
径向渐变语法
CSS radial-gradient()函数用于创建一个表示由中心点辐射开的径向渐变的图片
具体语法如下：
参数说明：
- position：用于定义径向渐变的中心点位置
- color-stop：用于定义径向渐变的颜色终止点
说明：
- shape：用于定义径向渐变的形状，包括circle和ellipse
- extent-keyword：用于定义径向渐变的边缘形状的位置
- closet-side：渐变的边缘形状于容器距离渐变中心点最近的一边相切或者渐变的边缘形状与距离渐变中心点最近的垂直和水平边相切
- closet-corner：渐变的边缘形状与容器距离渐变中心点最近的一个角相交
- farthest-side：与closet-side相反，边缘形状与容器距离渐变中心点最远的一边相切
- farther-corner：渐变的边缘形状与容器距离渐变中心点最远的一个角相交
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>径向渐变</title>
<style>
.con div{
width: 400px;
height: 300px;
display: inline-block; } .circle{
width: 300px;
height: 300px;
border-radius: 50%; }
.con div:nth-child(1){
/*
radial-gradient(color-stop,color-stop,...)
*color-stop - 表示径向渐变的颜色
*至少具有两种颜色，也可以多种颜色
*/
background: radial-gradient(red,blue); }
.con div:nth-child(2){
/*
radial-gradient(color-stop,color-stop,...)
*color-stop - 表示径向渐变的颜色
*至少具有两种颜色，也可以多种颜色
*不设置颜色的渐变位置时，浏览器自动解析通过位置 */
background: radial-gradient(red,blue,skyblue); }
.con div:nth-child(3){
/*
radial-gradient(color-stop,color-stop,...)
*color-stop - 表示径向渐变的颜色
*至少具有两种颜色，也可以多种颜色
*也可以同时设置颜色以及颜色渐变的位置 - 颜色与位置中间使用空格分隔
*/
background: radial-gradient(red,blue 50%,skyblue 100%);
}
.con div:nth-child(4){
/*
radial-gradient(color-stop,color-stop,...)
*shape - 设置径向渐变的边缘形状
*circle - 表示圆形
*ellipse - 表示椭圆形
*默认情况下，根据当前元素的宽度和高度进行自动设置
*当前元素的宽度和高度相同时，自动设置为圆形
*当前元素的宽度和高度不同时，自动设置为椭圆形 */
background: radial-gradient(ellipse,red,blue 30%,skyblue 100%); }
.con div:nth-child(5){
/*
radial-gradient(shape at position,color-stop,color-stop,...)
*position - 设置径向渐变的中心点位置
*注意 - 点的位置一定是两个值（X,Y）
*第一个值表示X轴的坐标值
*第二个值表示Y轴的坐标值
*/
background: radial-gradient(circle at 100px 150px,red,blue 30%,skyblue 100%); }
.con div:nth-child(6){
background: radial-gradient(closest-side,red,blue); }
.con div:nth-child(7){
background: radial-gradient(closest-corner,red,blue); }
.con div:nth-child(8){
background: radial-gradient(farthest-side,red,blue); }
.con div:nth-child(9){
background: radial-gradient(farthest-corner,red,blue); }
.con div:nth-child(10){
background: radial-gradient(at 50px 50px,red,blue); }
.circle{
background: radial-gradient(red,blue); }
</style>
</head>
<body>
<div class="con">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="circle"></div>
</body>
</html>
重复渐变
CSS3 中的线性渐变和径向渐变不支持自动重复的渐变“模式”，但可以通过repeating-linear-gradient()函数和repeating-radial-gradient()函数来实现重复的渐变效果
重复线性渐变
CSS repeating-linear-gradient()创建一个由重复线性渐变的图片
具体语法如下：
说明：
- 第一个参数用于定义线性渐变的方向，并且定义渐变颜色的终止位置
- angle：通过角度来定义渐变的方向。0度表示渐变方向从下向上，90度表示渐变从左向右。其角度按照顺时针方向增加
- side-or-corner：通过关键字定义渐变的方向。具有两个关键字，一个表示水平位置（left或right），一个表示垂直位置（top或bottom）。关键字的先后顺序无影响，并且都是可选的
- 第二个参数、第三个参数用于定义渐变颜色的起始点和终止点
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>重复渐变</title>
<style>
.con div{
width: 300px;
height: 300px;
display: inline-block;
}
.con div:nth-child(1){
background: repeating-linear-gradient(-45deg,red 0,red 5px,white 5px,white 10px);
}
.con div:nth-child(2){
background: repeating-radial-gradient(circle,rgb(0, 0, 0) 0,rgb(0, 0, 0) 5px,white 5px,white 10px);
}
</style>
</head>
<body>
<div class="con">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
CSS变形
通过修改坐标，CSS transforms属性可以在不影响正常文档流的情况下改变作用内容的位置。CSS transforms包括一系列CSS属性，通过这些属性可以对HTML元素进行变形。可以进行变形。可以进行的变形包括旋转，倾斜，缩放以及位移，同时使用于平面以及三维空间。
在空间中实现CSS变形会稍微复杂一些。首先必须设置一个透视点(perspective)来配置3D空间，然后定义2D元素在空间中的变形。
transform属性
CSS transform属性允许你修改CSS视觉格式模型的坐标空间。使用它，元素可以被转换（translate）、旋转（rotate)、倾斜（scale）
该CSS属性可用于内联元素和块级元素。其默认值为none，表示匹配元素不进行任何变形。
- transform-list：表示作用于元素的一个或多个变形的CSS函数。如果为多个函数的话，使用空格进行分隔。
transform-origin属性
CSS transform-origin属性允许更改一个元素变形的原点。默认情况，变形的原点在元素的中心点，或者是元素X轴和Y轴的50%处。
transform-origin:[<length-percentage>|left|center|right|top|bottom]|[[<length-percenting>|left|center|right]&&[<length-percenting>|top|center|bottom]]<length>?
具体语法如下：
/*设置一个值*/
transform-origin:x-offset
transform-origin:offset-keyword
/*设置二个值*/
transform-origin:x-offset y-offset
transform-origin:x-offset-keyword y-offset-keyword
/*设置三个值*/
transform-origin:x-offset y-offset z-offset
transform-origin:x-offste-keyword y-offset-keyword z-offset
transform-style属性
CSS transform-style属性确定元素的子元素是否位于3D空间中，还是在该元素所在的平面内被扁平化。
如果被扁平化，则子元素不会独立的存在于三维空间
- flat：指定子元素位于此元素所在平面内
- preserve-3d：指定子元素定位在三维空间内
perspective属性
CSS perspective属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。
三维元素在观察者后面的部分不会绘制出来，即z轴坐标值大于perspective属性值的部分。
默认情况下，消失点位于元素的中心，但是可以通过设置perspective-origin属性来改变其位置。
当该属性值不为0和none时，会创建新的层叠上下文。
perspective-origin属性
CSS perepective-origin属性指定了观察者的位置，在属性perspective中被用作消失点。该属性实际上设置X轴和Y轴位置，在该位置观察者好像在观看该元素的子元素。
perspective-origin:x-position;
/*one-value syntax*/
perspective-origin:x-position y-position;
/*two-value syntax*/
- x-position：指定消失点的水平方向坐标
- y-position：指定消失点的垂直方向坐标
backface-visibility属性
CSS backface-visibility属性指定当元素背面朝向观察者时是否可见。元素的背面总是透明的，当其朝向观察者时，显示正面的镜像
在某些情况下，我们不希望元素内容在背面可见
因为2D变换无透视效果，故该属性对2D变换无效
- visible：表示i背面可见，允许显示正面的镜像
- hidden：表示背面不可见
2D
2D位移
translate()函数用于将元素向指定的方向进行移动，类似于position中的relative。使用translate()函数移动元素时，不会影响在X轴或Y轴上其他元素。
tx：表示X轴移动的偏移量。当其值为正值时，元素向X轴右方移动；反之其值为负值时，元素向X轴左方向移动
ty：表示Y轴移动的偏移量。当其值为正值时，元素向Y轴下方移动；反之其值为负值时，元素向Y轴上方向移动
translateX(tx)：用于仅在X轴方向移动
translateY(ty)：用于仅在Y轴方向移动
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D位移</title>
<style>
.con div{
height: 300px;
width: 300px;
position: absolute;
left: 0;
top: 0;
}
.con div:nth-child(1){
background: seagreen;
}
.con div:nth-child(2){
background: skyblue;
/*
translate(tx,ty)函数
*作用 - 将指定元素进行平移
*参数
*tx - 表示水平方向的平移
*ty - 表示垂直方向的平移
*效果 - 类似于position的relative
*/
transform: translate(100px,100px);
}
.con div:nth-child(3){
background-color: rgb(71, 108, 122);
}
</style>
</head>
<body>
<div class="con">
<div></div>
<div></div>
<div id="box"></div>
</div>
<script>
var box = document.getElementById('box');
var x = 0;
var t = setInterval(function(){
if (x >= 800) {
clearInterval(t);
} else {
box.style.transform = 'translate(' + x + 'px)';
x++;
}
},10);
</script>
</body>
</html>
2D缩放
scale()函数用于将元素根据中心点进行缩放，默认值为1.如果该值的范围在0.01至0.99之间的话，表示缩小；如果该值是大于1的值，则表示放大。
- sx：表示X轴的缩放向量
- sy：表示Y轴的缩放向量
上述函数也可以分为如下：
- scaleX(sx)函数：用于仅在X轴方向的缩放
- scaleY(sy)函数：用于仅在Y轴方向的缩放
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D缩放</title>
<style>
.con div{
height: 300px;
width: 300px;
display: inline-block;
}
.con div:nth-child(1){
background-color: rgb(115, 149, 161);
}
.con div:nth-child(2){
background-color: rgb(185, 227, 241);
/*CSS中的scale（）函数围绕元素的中心点进行缩放*/
transform: scale(0.6,0.8);
}
.con div:nth-child(3){
background-color: rgb(70, 87, 94);
transform: scale(1.1,1.4);
}
.con div:nth-child(4){
position: relative;
left: 200px;
background-color: rgb(30, 160, 216);
}
</style>
</head>
<body>
<div class="con">
<div></div>
<div></div>
<div></div>
<div class="box"></div>
</div>
<script>
var box = document.getElementById('box');
var x=0,y=0;
var t = setInterval(function(){
if(x >= 1 || y >= 1) {
clearInterval(t);
} else {
box.style.transform = 'scale('+ x +','+ y + ')';
x += 0.01, y += 0.01;
}
},10);
</script>
</body>
</html>
2D旋转
rotate()函数用于通过指定的角度将元素根据原点进行旋转。该函数主要用于2D空间进行旋转。如果该角度为正值的话，表示顺时针旋转；如果该角度值为负值的话，则表示逆时针旋转。
- angle：表示旋转的角度值，单位为deg
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D旋转</title>
<style>
.con div{
height: 300px;
width: 300px;
display: inline-block;
}
.con div:nth-child(1){
background-color: rgb(115, 149, 161);
}
.con div:nth-child(2){
background-color: skyblue;
/*
rotate(angle)函数
*作用 - 实现指定元素旋转
*效果 - 围绕元素的中心点进行旋转
*参数
*angle - 表示旋转的角度
*注意
*如果角度为0度 - 不发生任何旋转
*如果角度为正数 - 表示顺时针旋转
*如果角度为负数 - 表示逆时针旋转
*/
transform: rotate(30deg);
}
.con div:nth-child(3){
background-color: slateblue;
/*
注意：rotate()函数与translate()和scale()函数不同
*rotateX()和rotateY()函数不能单独使用
*rotateX()、rotateY()和rotateZ()函数同时使用的
*与rotate3d()函数等价
*/
transform: rotateY(30deg);
}
</style>
</head>
<body>
<div class="con">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
2D旋转的动态效果
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D旋转的动态效果</title>
<style>
.con div{
height: 300px;
width: 300px;
position: absolute;
left: 500px;
top: 300px;
}
.con div:nth-child(1){
background-color: rgb(115, 149, 161);
transform-origin: top left;
}
</style>
</head>
<body>
<div class="con">
<div id="box"></div>
</div>
<script>
var box=document.getElementById('box');
var angle=0;
var t=setInterval(function(){
if(angle>=360){
clearInterval(t)
}else{
box.style.transform='rotate('+angle+'deg)';
angle++;
}
},10);
</script>
</body>
</html>
2D变形综合效果
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D变形综合效果</title>
<style>
#box{
width: 200px;
height: 200px;
border-radius: 50%;
background-color: slateblue;
font-size: 28px;
text-align: center;
line-height: 200px;
font-weight: bolder;
color: rgb(139, 181, 236);
position: relative;
left: 0;
top: 250px;
}
</style>
</head>
<body>
<div id="box">吼吼吼哈哈哈</div>
<script>
var box = document.getElementById('box');
var angle = 0,x = 0;
box.addEventListener('click', transform);
function transform(){
box.style.transformOrigin = (100 + x) + 'px';
box.style.transform = 'rotate(' + angle + 'deg)translateX('+ x +'px)';
angle++;
x++;
setTimeout(transform, 10);
}
</script>
</body>
</html>
2D倾斜
skew()函数用于将元素以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。
- ax：表示X轴倾斜的角度
- ay：表示Y轴倾斜的角度
上述函数也可以分为如下：
- skewX(ax)函数：用于仅在X轴方向倾斜
- skewY(ay)函数：用于仅在Y轴方向倾斜
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D倾斜</title>
<style>
.con div{
height: 300px;
width: 300px;
display: inline-block;
}
.con div:nth-child(1){
background-color: rgb(115, 149, 161);
}
.con div:nth-child(2){
background-color: skyblue;
transform: skew(0,20deg);
}
.con div:nth-child(3){
background-color: rgb(89, 151, 175);
transform: skew(20deg,0deg);
}
.con div:nth-child(4){
background-color: rgb(118, 132, 138);
transform: skew(30deg,20deg);
}
</style>
</head>
<body>
<div class="con">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
3D
3D位移
transformZ()函数用于将元素在3D空间沿Z轴进行位移。
- t：表示Z轴移动的偏移量。当其值为正值时，元素向Z轴移动越近，导致元素变得越大；反之其值为负值时，元素向Z轴移动越远，导致元素变得越小。
CSS3中还提供了translate3d()函数用于将元素在3D空间进行位移
- tx：表示X轴移动的偏移量
- ty：表示Y轴移动的偏移量
- tz：表示Z轴移动的偏移量
例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D平移</title>
<style>
.con {
width: 100px;
height: 100px;
/*
transform-style属性
*作用 - 设定当前元素的所有子元素是2D效果还是3D效果
*值
*preserve-3d - 表示所有子元素是3D效果
*flat - 表示所有子元素是2D效果
*/
transform-style: preserve-3d;
/*
设置效果为3D效果的话 -> 整体进行旋转
*/
transform:rotateX(-15deg) rotateY(15deg);
margin-left: 100px;
}
.face{
position: absolute;
top: 100px;
left: 300px;
width: 100px;
height: 100px;
line-height: 100px;
font-size: 100px;
text-align: center;
}
.top{
background-color: slateblue;
transform: rotateX(90deg) translate3d(0,0,50px);
}
.left{
background-color: rgb(203, 196, 248);
transform: rotateY(-90deg) translate3d(0,0,50px);
}
.font{
background-color: rgb(24, 0, 179);
/*
transform3d()函数的确是简写函数
*translateX(x)
*translateY(y)
*transformZ(z)
*/
/*transform:translate3d(0,0,50px);*/
transform: translateZ(50px);
}
</style>
</head>
<body>
<!-- 容器元素 - 表示3D立体效果-->
<div class="con">
<!-- 每个<div>元素表示3D效果的每一面-->
<div class="face font">A</div>
<div class="face top">B</div>
<div class="face left">C</div>
</div>
</body>
</html>
例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D平移</title>
<style>
.con{transform-style: preserve-3d;
transform: rotateX(-15deg) rotateY(15deg);
}
.con div{
width: 300px;
height: 200px;
}
.con div:nth-child(1){
background-color: slateblue;
/*
HTML结构 - 父级与子级的关系
*作为父级容器的元素
*设置其所有子元素是3D效果
transform-style:preserve-3d;
*将当前元素进行旋转
*作为子级元素
*实现Z轴的平移效果
*/
transform: translateZ(100px);
}
</style>
</head>
<body>
<div class="con">
<div></div>
</div>
</body>
</html>
补充：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D平移</title>
<style>
.con{
width: 350px;
height: 400px;
background-image: url("2.jpg");
background-repeat: no-repeat;
position: relative;
display: inline-block;
}
.con img{
width: 150px;
display: block;
position: absolute;
left: 50%;
top: 50%;
margin-left: -75px;
margin-top: -75px;
}
.box{
/*开启3D空间的透视效果*/
perspective: 1000px;
}
.box img#w{
/*
translateZ()函数
*作业 - 设置当前元素在Z轴上的平移
*值
*如果值为正数的话，元素显示的越大
*如果值为负数的话，元素显示的越小
*/
transform: translateZ(200px);
}
.box img#e{
transform: translateZ(-200px);
}
</style>
</head>
<body>
<div class="con">
<img src="1.jpg">
</div>
<div class="con box">
<img id="w" src="1.jpg">
</div>
<div class="con box">
<img id="e" src="1.jpg">
</div>
</body>
</html>
3D旋转
rotateZ()函数用于将元素在3D空间Z轴进行旋转。
- a：表示Z轴进行旋转。
CSS3中还提供了rotate3d()函数用于将元素在3D空间进行旋转。
- x：表示X轴旋转的矢量值。
- y：表示Y轴旋转的矢量值。
- z：表示Z轴旋转的矢量值。
- a：表示旋转的角度值
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D旋转</title>
<style>
.con div{
width: 300px;
height: 200px;
}
.con div:nth-child(1){
background-color: skyblue;
/* 3D旋转至少使用两个轴的旋转*/
transform: rotateX(30deg) rotateZ(30deg);
}
</style>
</head>
<body>
<div class="con">
<div></div>
</div>
</body>
</html>
补充：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D旋转</title>
<style>
.con{
width: 350px;
height: 400px;
background-image: url("2.jpg");
background-repeat: no-repeat;
position: relative;
display: inline-block;
}
.con img{
width: 150px;
display: block;
position: absolute;
left: 50%;
top: 50%;
margin-left: -75px;
margin-top: -75px;
}
.box{
/*开启3D空间的透视效果*/
perspective: 1000px;
}
.box img#w{
transform: rotateX(50deg);
}
.box img#e{
transform: rotateY(50deg);
}
.box img#r{
transform: rotateZ(50deg);
}
.box img#r{
transform: rotateX(50deg) rotateY(50deg);
}
</style>
</head>
<body>
<div class="con">
<img src="1.jpg">
</div>
<div class="con box">
<img id="w" src="1.jpg">
</div>
<div class="con box">
<img id="e" src="1.jpg">
</div>
<div class="con box">
<img id="r" src="1.jpg">
</div>
<div class="con box">
<img id="t" src="1.jpg">
</div>
</body>
3D缩放
scaleZ()函数用于将元素在3D空间沿Z轴进行缩放。
- s：表示Z轴的缩放向量
CSS3中还提供了scale3d()函数用于将元素在3D空间进行缩放
- sx：表示X轴的缩放向量
- sy：表示Y轴的缩放向量
- sz：表示Z轴的缩放向量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D缩放</title>
<style>
.con{
width: 350px;
height: 400px;
background-image: url("2.jpg");
background-repeat: no-repeat;
position: relative;
display: inline-block;
}
.con img{
width: 150px;
display: block;
position: absolute;
left: 50%;
top: 50%;
margin-left: -75px;
margin-top: -75px;
}
.box{
/*开启3D空间的透视效果*/
perspective: 1000px;
}
.box img#w1{
transform: scaleX(1.5);
}
.box img#w2{
transform: scaleY(1.5);
}
</style>
</head>
<body>
<div class="con">
<img src="1.jpg">
</div>
<div class="con box">
<img id="w1" src="1.jpg">
</div>
<div class="con box">
<img id="w2" src="1.jpg">
</div>
</body>
3D效果实现立方体
例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D效果实现立方体</title>
<style>
.con{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
position: relative;
perspective: 300px;
}
.face{
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
.font{
background-color: cornflowerblue;
transform: translateZ(100px);
}
.hou{
background-color: rgb(217, 223, 233);
transform: translateZ(-100px);
}
.left{
background-color: rgb(173, 192, 228);
transform: rotateY(90deg) translateZ(-100px);
}
.right{
background-color: rgb(35, 98, 214);
transform: rotateY(90deg) translateZ(100px);
}
.up{
background-color: rgb(81, 104, 148);
transform: rotateX(90deg) translateZ(100px);
}
.down{
background-color: rgb(31, 40, 56);
transform: rotateX(90deg) translateZ(-100px);
}
</style>
</head>
<body>
<div class="con">
<div class="face font"></div>
<div class="face hou"></div>
<div class="face left"></div>
<div class="face right"></div>
<div class="face up"></div>
<div class="face down"></div>
</div>
</body>
</html>
例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D效果实现立方体</title>
<style>
.con{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
position: relative;
perspective: 300px;
}
.face{
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
border: 1px solid rgb(82, 105, 114);
margin-left: -100px;
margin-top: -100px;
}
.font{
transform: translateZ(100px);
}
.hou{
transform: translateZ(-100px);
}
.left{
transform: rotateY(90deg) translateZ(-100px);
}
.right{
transform: rotateY(90deg) translateZ(100px);
}
.up{
transform: rotateX(90deg) translateZ(100px);
}
.down{
transform: rotateX(90deg) translateZ(-100px);
}
</style>
</head>
<body>
<div class="con">
<div class="face font"></div>
<div class="face hou"></div>
<div class="face left"></div>
<div class="face right"></div>
<div class="face up"></div>
<div class="face down"></div>
</div>
</body>
</html>
CSS过渡
过渡是什么
CSS3 transition提供了修改CSS的样式属性值时控制值变化时间的方式。简单来说，控制某一个或者多个CSS的样式属性值由一个值到另一个值，并不是立即生效，而是持续指定时间的过程。例如通过transition属性控制指定元素的背景颜色经历2秒的时长从白色变为黑色，而不是立即改变。
CSS transition属性可以设定指定元素的哪些CSS样式属性发生过滤效果、何时开始、持续多久以及如何执行动画效果等
transtion属性
CSS transition属性是一个简写属性，该属性可以为指定元素在不同状态之间定义不同的过渡效果。
该属性可以分为以下子属性：
- transition-property属性：用于定义过渡效果中的样式属性名称
- transition-duration属性：用于定义过渡效果执行动画的时长
- transition-timing-function属性：用于定义过渡效果计算的函数
- transition-delay属性：用于定义过渡效果开始的延迟时间
浏览器兼容性
transition属性虽然已加入CSS3的标准规范中，但是有些浏览器仍然需要添加前缀才能正常使用
/*Webkit引擎的浏览器(Chrome,Safari,Opera)*/
-webkit-transition:<single-transition>;
/*Gecko引擎的浏览器(Firefox)*/
-moz-transition:<single-transition>;
/*Trident引擎的浏览器(IE 10+)*/
-ms-transition:<single-transition>;
/*Presto引擎的浏览器(Opera)*/
-o-transition:<single-transition>;
指定过渡属性名称
transition-property属性用于指定元素执行过渡动画的CSS样式属性名称。该属性的语法结构如下：
transition-property:none|all|<single-transition-property>
- none：表示没有任何用于执行过渡动画的CSS样式属性
- all：默认值，表示指定元素所有支持过渡动画的CSS样式属性
- single-transition-property：表示过渡动画的样式属性
注意：不是所有的CSS样式属性都支持过渡动画
指定过渡所需时间
transition-duration属性用于设定过渡动画执行所需的时长，单位为秒或毫秒。默认值为0秒，表示不出现过渡动画。
该属性允许设置多个时长，每个时长会被应用到transition-porperty属性设置的CSS样式属性上
- 如果指定的时长的个数小于属性的个数，则时长列表会被重复，以与属性的个数匹配
- 如果指定的时长的个数大于属性的个数，则时长列表会被裁剪
注意：上述两种情况下，通过transition-property属性设置的CSS样式属性列表始终保持不变
指定过渡函数
transition-timing-function属性用于设置过渡动画执行过程的中间值是如何计算是。该属性可以设定浏览器的过渡速度以及过渡过程中的操作进展情况，通过该属性会建立一条加速度曲线，该加速度曲线会被作用到每个过渡的CSS样式属性。
transition-timing-function:<single-transition-timing-function>
- single-transition-timing-function：用于过渡的计算函数
- ease：默认值，元素样式从初始状态过渡到终止状态时速度由快到慢
- linear：元素样式从初始状态过渡到终止状态时速度是匀速
- ease-in：元素样式从初始状态过渡到终止状态时速度由慢到快
- ease-out：元素样式从初始状态过渡到终止状态时速度由快到慢
- ease-in-out：元素样式从初始状态过渡到终止状态时，先加速再减速
- step：将整个过渡过程划分成相同大小的间隔，每个间隔是相等的
指定过渡延迟时间
transition-delay属性用于设置指定元素开始过渡动画之前需要等待的时长，单位为秒或毫秒。
- 如果值为正数时，则表示延迟多长时间开始过渡动画
- 如果值为负数时，则导致立即开始执行过渡动画
多个过渡效果
很多时候，需要通过改变两个或多个CSS样式属性实现过渡动画效果
- 可以通过过渡子属性进行设置：
transition-porperty:background,border-radius;
transition-duration:2s,3s;
transition-timing-function:linear,ease-in;
transition-delay:2s,4s;
- 可以通过过渡简写属性进行设置
伪类触发过渡
过渡动画效果可以通过CSS的伪类进行触发，例如鼠标悬停(hover)、获取焦点(:focus)等。
.transition{
background:blue;
width:100px;
height:100px;
border-radius:.5em;
-webkit-trasition:background 2s linear 2s,border-radius 3s ease-in 4s;
-moz-transition:background 2s linear 2s,border-radius 3s ease-in 4s;
-o-transition:background 2s linear 2s,border-radius 3s ease-in 4s;
-ms-transition:background 2s linear 2s,border-radius 3s ease-in 4s;
transition:background 2s linear 2s,border-radius 3s ease-in 4s;
}
.transition:hover{
background:pink;
border-radius:50%;
}
例1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>过渡效果</title>
<style>
#box{
width: 300px;
height: 300px;
background-color: cornflowerblue;
/*
设置过渡动画效果
*transition-property - 设置执行过渡动画的样式属性
*transition-duration - 设置执行过渡动画的时长
*transition-delay - 设置开始执行过渡动画需要等待的时间
*/
/*transition-property: background-color;
transition-duration: 2s;
transition-delay: 1s;*/
transition:background-color 2s 1s;
}
#box:hover{
background-color: cyan;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
例2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript触发过渡动画</title>
<style>
#box{
width: 300px;
height: 300px;
background-color: cornflowerblue;
transition:background-color 2s 1s;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box');
box.addEventListener('mouseover',function(){
box.style.backgroundColor ='cyan';
});
</script>
</body>
</html>
transitionend事件
transitionend事件在CSS transition属性实现过渡动画执行完毕时被触发
- WebKit引擎的浏览器提供了webkitTransitionEnd事件。
- Presto引擎的浏览器提供了oTransitionEnd事件。
transitionend事件提供了以下两个属性：
- propertyName属性：字符串类型，表示已完成过渡动画的CSS样式属性
- elapsedTime属性：浮点类型，表示当transitionend事件被触发时过渡动画已执行的时间（单位为秒）。该属性值不会受到transition-delay的影响。
/*
*在指定的元素上监听transitionend事件，例如#slidingMenu
*然后指定一个函数，例如showMessage()
*/
function showMessage(){
consle.log('Transition 已完成');
}
var element = document.getElementById('slidingMenu');
element.addEventListener('transitionend',showMessage);
检测过渡动画是否完整
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>检测过渡动画是否完整</title>
<style>
#box{
width: 300px;
height: 300px;
background-color: cornflowerblue;
transition:background-color 2s 1s;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box');
box.addEventListener('mouseover',function(){
box.style.backgroundColor ='cyan';
});
//当指定元素的过渡动画执行完毕时被触发
box.addEventListener('transitionend',function(event){
console.log(event.propertyName);
console.log(event.elapsedTime);//过渡动画已执行的时长 = 动画时长 - 延迟时长
});
</script>
</body>
</html>
2D效果的过渡动画
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2D效果的过渡动画</title>
<style>
.con div{
width: 200px;
height: 200px;
display: inline-block;
}
.con div:nth-child(1){
position: relative;
left: 200px;
background-color: cyan;
transition: scale(1,1);
transition-property:transform;
transition-duration: 2s;
}
.con div:nth-child(1):hover{
transform: scale(0,0);
}
</style>
</head>
<body>
<div class="con">
<div id="box"></div>
</div>
</body>
</html>
3D效果的过渡动画1
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D效果的过渡动画1</title>
<style>
.con{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
position: relative;
perspective: 300px;
}
.face{
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
transition-property: transform, z-index;
transition-duration: 2s;
}
.front{
background-color: rgb(255, 174, 128);
transform: rotateY(0deg) translateZ(100px);
z-index: 2;
}
.back{
transform: translateZ(-100px);
}
.left{
background-color: yellowgreen;
transform: rotateY(90deg) translateZ(-100px);
z-index: 1;
}
.right{
transform: rotateY(90deg) translateZ(100px);
}
.top{
transform: rotateX(90deg) translateZ(100px);
}
.bottom{
transform: rotateX(90deg) translateZ(-100px);
}
.to-right{
transform: rotateY(90deg) translateZ(100px);
z-index: 1;
}
.to-front{
transform: rotateY(0deg) translateZ(100px);
z-index: 2;
}
</style>
</head>
<body>
<div id="box" class="con">
<div id="front" class="face front"></div>
<div class="face back"></div>
<div id="left" class="face left"></div>
<div class="face right"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
<script>
var box = document.getElementById('box');
var front = document.getElementById('front');
var left = document.getElementById('left');
box.addEventListener('mouseover',function(){
var className1 = front.className;
front.className = className1 + ' to-right';
var className2 = left.className;
left.className = className2 + ' to-front';
});
</script>
</body>
</html>
3D效果的过渡动画2
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D效果的过渡动画2</title>
<style>
.con{
width: 300px;
height: 300px;
border: 1px solid black;
margin: 100px auto;
position: relative;
perspective: 300px;
}
.face{
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
.front{
background-color: rgb(255, 174, 128);
transform: rotateY(90deg) translateZ(100px);
z-index: 1;
}
.back{
transform: translateZ(-100px);
}
.left{
background-color: yellowgreen;
transform: rotateY(0deg) translateZ(100px);
z-index: 2;
}
.right{
transform: rotateY(90deg) translateZ(100px);
}
.top{
transform: rotateX(90deg) translateZ(100px);
}
.bottom{
transform: rotateX(90deg) translateZ(-100px);
}
</style>
</head>
<body>
<div id="box" class="con">
<div class="face front"></div>
<div class="face back"></div>
<div class="face left"></div>
<div class="face right"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
</body>
</html>
CSS动画
动画是什么
CSS3新增animation属性使得仅通过CSS的样式属性实现动画效果成为可能。实现动画包括以下两个部分：
- 用于定义动画的样式规则
- 用于设置动画开始、结束以及中间点样式的关键帧
相对于传统使用JavaScript实现的动画方式，CSS3新增的anination属性具有以下三个优点：
- 能够非常容易的创建简单动画，甚至不需要掌握JavaScript.
- 动画运行效果良好，可以再低性能的系统运行。性能以及流畅程度都优于JavaScript实现的动画效果。
- 允许浏览器优化动画的性能和效果，让浏览器控制动画序列。
简单动画效果
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单动画效果</title>
<style>
/*
通过CSS的样式规则定义动画
@keyframes lll {
执行动画过程中的关键帧
}
*/
@keyframes lll {
from{
width: 200px;
}
to{
width: 500px;
}
}
/*
在对应的样式块中，通过animation属性进行调用
*animation-name - 表示设置当前使用的动画名称
*animation-duration - 表示设置当前动画执行的时长
*animation-delay - 表示开始执行动画之前等待的时间
*animation-iteration-count - 表示设置当前动画执行的次数（infinite无限次）
*/
.box{
width: 200px;
height: 200px;
background-color: indianred;
animation-name: lll;
animation-duration: 2s;
animation-delay: 2s;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
animation属性
CSS animation属性是一个简写属性，用于创建复杂的动画序列，并控制CSS的样式属性实现动画效果。
该属性可以分为以下几个样式属性：
- animation-name:用于设置关键帧动画的名称，该属性值必须与@keyframes规则相对应。
- animation-duration:用于设置动画执行所需的时长。
- animation-timing-funtion:用于设置动画的执行方式，与transition-timing-funtion属性类似
- animation-delay:用于设置开始执行动画之前需要等待的时长。
- animation-iteration-count:用于设置动画执行的循环次数。
- animation-direction:用于设置动画执行的方向。
- animation-play-state:用于设置动画执行的状态。
- animation-fill-mode:用于设置动画的时间外属性。
检测CSS动画支持情况
想要通过CSS3新增的animation属性实现动画效果，首先需要确认当前浏览器是否支持该样式属性
@keyframes声明动画
通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。
@keyframes<keyframes-name>{
<keyframe-block-list> }
- keyframes-name:用于设置当前动画的名称，以便通过animation-name属性调用。
- keyframe-block-list:用于设置动画执行过程中的关键帧。
调用@keyframes动画
通过使用@keyframes建立建立动画序列后，需要通过animation属性或者animation-name属性调用。
@keyframes'slideLeft'{
0%{left:-500px;}
100%{left:0;}
}
.slideLeft:target{
z-indent:100;
animation-name:slideLeft;
animation-duration:1s;
animation-iteration-count:1;
}
动画子属性
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画子属性</title>
<style>
/*
通过CSS的样式规则定义动画
@keyframes lll {
执行动画过程中的关键帧
}
*/
@keyframes lll {
from{
width: 200px;
}
to{
width: 500px;
}
}
/*
在对应的样式块中，通过animation属性进行调用
*animation-name - 表示设置当前使用的动画名称
*animation-duration - 表示设置当前动画执行的时长
*animation-delay - 表示开始执行动画之前等待的时间
*animation-iteration-count - 表示设置当前动画执行的次数（infinite无限次）
*/
.box{
width: 200px;
height: 200px;
background-color: indianred;
animation-name: lll;
animation-duration: 2s;
animation-delay: 2s;
animation-iteration-count: 1;
/*animation-direction: reverse;*/
animation-fill-mode: forwards;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
通过名称调用动画
animation-name属性用于应用指定的一系列动画，每个动画名称都是由@keyframes规则定义的。
/*Single animation*/
animation-name:none;
animation-name:text_05;
/*Multiple animations*/
animation-name:text1,animation4;
设置动画执行时间
animation-duration属性用于设置动画执行的时长。默认值为0秒，表示无动画效果。
animation-duration:6s;
animation-duration:120ms;
animation-duration:1s,15s;
设置动画执行方式
animation-timing-function属性用于设置动画执行的方式。
/*Keyword values*/
animation-timing-function:ease;
animation-timing-function:ease-in;
animation-timing-function:ease-out;
animation-timing-function:ease-in-out;
animation-timing-function:linear;
animation-timing-function:step-start;
animation-timing-function:step-end;
/*Function values*/
animation-timing-function:cubic-bezier(0.1,0.7,1.0,0.1);
animation-timing-function:step(4,end);
设置动画延迟时间
animation-delay属性用于设置动画开始执行之前需要等待的时间。默认值为0秒，表示动画立即执行。
设置动画执行次数
animation-iteration-count属性用于设置动画执行的次数。默认值为1，表示动画只执行一次。
animation-iteratoin-count:infinite;
animation-iteration-count:3;
animation-iteration-count:2.3;
设置动画执行方向
animation-direction属性用于设置是否反向执行。
animation-direction:normal;
animation-direction:reverse;
animation-direction:alternate;
animation-direction:alternate-reverse;
设置动画执行状态
animation-play-state属性用于设置动画是运行还是暂停。通过该样式属性可以确定动画是否正在执行。
animation-play-state:running;
animation-play-state:paused;
设置动画时间外属性
animation-fill-mode属性用于设置动画执行之前和执行之后如何为动画的目标元素应用样式。
animation-fill-mode:none;
animation-fill-mode:forwards;
animation-fill-mode:backward;
animation-fill-mode:both;
弹性盒子模型是什么
CSS3新增了弹性盒子模型（Flexible Box或FlexBox），是一种新的用于在HTML页面实现布局的方式。使得当HTML页面适应不同尺寸的屏幕和不同的设备时，元素是可预测的运行。
- 弹性盒子模型实现HTML页面布局是与方向无关的。不类似于块级布局侧重垂直方向，内联布局侧重水平方向。
- 弹性盒子模型主要适用于HTML页面的组件以及小规模的布局，而不适用于大规模的布局，否则会影响HTML页面性能。
弹性盒子模型相关概念
CSS3新增的弹性盒子模型是一个完整的模块，涉及的样式属性较多。首先，对弹性盒子模型的相关概念完全基本的了解。
- 伸缩容器(flex container)：包裹伸缩项目的父元素。
- 伸缩项目(flex item)：伸缩容器的每个子元素。
- 轴(axis)：每个弹性盒子模型拥有两个轴。
- 主轴(main axis)：伸缩项目沿其一次排列的轴被称为主轴。
- 侧轴(cross axis)：垂直于主轴的轴被称为侧轴。
- 方向(direction)：伸缩容器的主轴由主轴起点和主轴终点，侧轴由侧轴起点和侧轴终点描述伸缩项目排列的方向。
- 尺寸(dimension)：根据伸缩容器的主轴和侧轴，伸缩项目的宽度和高度。
- 对应主轴的称为主轴尺寸。
- 对应侧轴的称为侧轴尺寸。
定义弹性盒子模型
CSS3中想要设置为弹性盒子模型的话，需要通过display样式属性设置为flex或inline-flex即可。
display:flex;
display:inline-flex;
按照上述示例代码设置指定元素为弹性盒子模型，该元素成为伸缩容器，其子元素则成为伸缩项目。
- flex：设置指定元素为块级元素的弹性盒子模型。
- inline-flex：设置指定元素为行内块级元素的弹性盒子模型。
弹性盒子模型依旧存在浏览器兼容问题：
display:-webkit-flex;
display:-ms-flex;
display:-moz-flex;
display:-o-flex;
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定义弹性盒子模型</title>
<style>
/*为父级容器元素设置display为flex值
*表示当前元素及其所有子元素就是弹性盒子模型
*默认情况下，所有子元素作为伸缩项目（沿主轴进行排列）
*/
.con{
display: flex;
}
.con div{
width: 300px;
height: 200px;
}
.con div:nth-child(1){
background-color: grey;
}
.con div:nth-child(2){
background-color: rgb(212, 250, 212);
}
.con div:nth-child(3){
background-color: indianred;
}
</style>
</head>
<body>
<!--实现弹性盒子模型的HTML结构-> 父级与子级的结构 -->
<div class="con">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
flex-direction属性
CSS flex-direction属性适用于伸缩容器元素，用于创建主轴的方向。
- row：设置主轴是水平方向。
- row-reverse：与row的排列方向相反。
- column：设置主轴是垂直方向。
- column-reverse：与column的排列方向相反。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex-direction属性</title>
<style>
/*为父级容器元素设置display为flex值
*表示当前元素及其所有子元素就是弹性盒子模型
*默认情况下，所有子元素作为伸缩项目（沿主轴进行排列）
*/
.con{
border: 1px solid black;
margin-top: 10px;
display: flex;
}
.c1{
/*
flex-direction属性
*作用 - 设置弹性盒子模型的主轴方向（水平或垂直）
*用法 - 应用于伸缩容器元素
*值
*row - 默认值，设置主轴为水平方向
*column - 设置主轴为垂直方向
*/
flex-direction: row;
}
.c2{
flex-direction: row-reverse;
}
.con div{
width: 200px;
height: 100px;
}
.con div:nth-child(1){
background-color: grey;
}
.con div:nth-child(2){
background-color: rgb(212, 250, 212);
}
.con div:nth-child(3){
background-color: indianred;
}
</style>
</head>
<body>
<div class="con c1">
<div></div>
<div></div>
<div></div>
</div>
<div class="con c2">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
justify-content属性
CSS justify-content属性适用于伸缩容器元素，用于设置伸缩项目沿着主轴线的对齐方式。
- center：伸缩项目向第一行的中间位置对齐
- flex-start：伸缩项目向第一行的开始位置对齐
- flex-end：伸缩项目向第一行的结束位置对齐
- space-between：伸缩项目会平均分布在一行中
- space-around：伸缩项目会平均分布在一行中，两端保留一半的空间
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>justify-content属性</title>
<style>
.con{
border: 1px solid black;
margin-top: 10px;
display: flex;
}
/*
justify-content属性
* 作用 - 设置伸缩项目在主轴上的对齐方式
* 用法 - 应用于伸缩容器元素
* 注意 - 实现的是伸缩项目相对于伸缩容器的对齐方式
*/
.c1{
/*flex-start - 表示伸缩容器沿着主轴的起点*/
justify-content: flex-start;
}
.c2{
/*center - 表示伸缩容器沿着主轴的中间位置*/
justify-content: center;
}
.c3{
/*flex-end - 表示伸缩容器沿着主轴的终点*/
justify-content: flex-end;
}
.c4{
/*space-between - 表示伸缩项目平均分配在伸缩容器*/
justify-content: space-between;
}
.c5{
/*space-around - 表示伸缩项目平均分配在伸缩容器，起点和终点位置留白*/
justify-content: space-around;
}
.con div{
width: 200px;
height: 100px;
}
.con div:nth-child(1){
background-color: grey;
}
.con div:nth-child(2){
background-color: rgb(212, 250, 212);
}
.con div:nth-child(3){
background-color: indianred;
}
.con div:nth-child(4){
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="con c1">
<div></div>
<div></div>
<div></div>
</div>
<div class="con c2">
<div></div>
<div></div>
<div></div>
</div>
<div class="con c3">
<div></div>
<div></div>
<div></div>
</div>
<div class="con c4">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="con c5">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
align-items属性
CSS align-items属性适用于伸缩容器元素，用于设置伸缩项目所在行沿着侧轴线的对齐方式。
- center：伸缩项目向侧轴的中间位置对齐
- flex-start：伸缩项目向侧轴的起点位置对齐
- flex-end：伸缩项目向侧轴的终点位置对齐
- baseline：伸缩项目根据伸缩项目的基线对齐
- stretch：默认值，伸缩项目拉伸填充整个伸缩容器
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-items属性</title>
<style>
.con{
height: 200px;
border: 1px solid black;
margin-top: 10px;
display: flex;
}
/*
align-items属性
* 作用 - 设置伸缩项目沿着侧轴的对齐方式
* 用法 - 应用于伸缩容器元素
*/
.c1{
align-items: flex-start;
}
.c2{
align-items: center;
}
.c3{
align-items: flex-end;
}
.c4{
align-items: baseline;
}
.c5{
align-items: stretch;
}
.con div{
width: 200px;
height: 100px;
}
.con div:nth-child(1){
background-color: grey;
}
.con div:nth-child(2){
background-color: rgb(212, 250, 212);
}
.con div:nth-child(3){
background-color: indianred;
}
.con div:nth-child(4){
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="con c1">
<div></div>
<div></div>
<div></div>
</div>
<div class="con c2">
<div></div>
<div></div>
<div></div>
</div>
<div class="con c3">
<div></div>
<div></div>
<div></div>
</div>
<div class="con c4">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="con c5">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
flex-wrap属性
CSS flex-wrap属性适用于伸缩容器元素，用于设置伸缩容器的子元素是单行显示还是多行显示。
- nowrap：设置伸缩项目单行显示。这种方式可能导致溢出伸缩容器
- wrap：设置伸缩项目多行显示
- wrap-reverse：与wrap相反
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex-wrap属性</title>
<style>
.con{
height: 200px;
border: 1px solid black;
margin-top: 10px;
display: flex;
}
/*
如果设置伸缩容器的宽度小于所有子元素宽度之和的话
*结果
*子元素并没有自动换行 -> 不等同于浮动效果（自动换行）
*子元素并没有溢出
*效果 - 根据伸缩容器的宽度自动调整所有子元素的宽度
*/
.c1{
width: 500px;
}
/*
flex-wrap属性
*作用 - 设置伸缩项目是单行显示还是多行显示
*用法 - 应用于伸缩容器元素
*值
*nowrap - 设置为单行显示
*根据伸缩容器的宽度自动调整所有子元素的宽度
*wrap - 设置为多行显示
*如果伸缩容器的宽度大于所有子元素的宽度之和 -> 单行显示
*如果伸缩容器的宽度小于所有子元素的宽度之和 -> 多行显示（类似于浮动效果）
*/
.c2{
width: 500px;
flex-wrap: nowrap;
}
.c3{
width: 500px;
flex-wrap: wrap;
}
.con div{
width: 200px;
height: 100px;
}
.con div:nth-child(1){
background-color: grey;
}
.con div:nth-child(2){
background-color: rgb(212, 250, 212);
}
.con div:nth-child(3){
background-color: indianred;
}
.con div:nth-child(4){
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="con c1">
<div></div>
<div></div>
<div></div>
</div>
<div class="con c2">
<div></div>
<div></div>
<div></div>
</div>
<div class="con c3">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
align-content属性
CSS align-content属性适用于伸缩容器元素，用于设置伸缩行的对齐方式。该属性会更改flex-wrap属性的效果。
- center：各行向伸缩容器的中间位置对齐
- flex-start：各行向伸缩容器的起点位置对齐
- flex-end：各行向伸缩容器的终点位置对齐
- space-between：各行会平均分布在一行中
- space-around：各行会平均分布在一行中，两端保留一半的空间
- stretch：默认值，各行将会伸展以占用额外的空间
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-content属性</title>
<style>
.con{
width: 500px;
height: 300px;
border: 1px solid black;
margin-top: 10px;
display: flex;
flex-wrap: wrap;
}
/*
align-content属性
* 作用 - 设置多行显示伸缩项目，沿着侧轴的对齐方式
* 注意 - 该属性对单行显示伸缩项目是无效的
1.将伸缩项目设置为多行显示 - flex-wrap: wrap;
2.利用align-content属性进行设置对齐方式
*/
.c1{
align-content: flex-start;
}
/*
*/
.c2{
align-content: center;
}
.c3{
align-content: flex-end;
}
.con div{
width: 200px;
height: 100px;
}
.con div:nth-child(1){
background-color: grey;
}
.con div:nth-child(2){
background-color: rgb(212, 250, 212);
}
.con div:nth-child(3){
background-color: indianred;
}
.con div:nth-child(4){
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="con c1">
<div></div>
<div></div>
<div></div>
</div>
<div class="con c2">
<div></div>
<div></div>
<div></div>
</div>
<div class="con c3">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
flex-flow属性
CSS flex-flow属性适用于伸缩容器元素，该属性是flex-direction和flex-wrap的简写。
flex-flow:<'flex-direction'>||<'flex-wrap'>
flex属性
CSS flex属性是一个简写属性，用于设置伸缩项目如何伸长或缩短以适应伸缩容器中的可用空间。
flex:auto | none | [<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]
- auto：伸缩项目会根据自身的宽度和高度确定尺寸，相对于将该属性设置为“flex: 1 1 auto”.
- none：伸缩项目会根据自身的宽度和高度确定尺寸，相对于将该属性设置为“flex: 0 0 auto”.
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex属性</title>
<style>
.con{
height: 300px;
border: 1px solid black;
margin-top: 10px;
display: flex;
width: 500px;
}
/*
*/
.c1{
flex: none;
}
/*
*/
.c2{
flex: auto;
}
.c3{
flex: content;
}
.con div{
width: 200px;
height: 100px;
}
.con div:nth-child(1){
background-color: grey;
/*不做任何处理*/
flex: none;
}
.con div:nth-child(2){
background-color: rgb(212, 250, 212);
/*自动填充父级容器元素中所有空白空间*/
/*flex: auto;*/
}
.con div:nth-child(3){
background-color: indianred;
/*
flex-grow属性 - 伸缩项目的拉伸因子
* <1 - 所占区域小于等分
* =1 - 与其他伸缩项目进行等分
* >1 - 所占区域大于等分
*/
/*flex-grow: 1;*/
}
.con div:nth-child(4){
background-color: blueviolet;
/*flex-grow: 1;*/
/*
该属性必须在所有子元素宽度之和大于容器的宽度时才有效
flex-shrink属性 - 伸缩项目的收缩规则
* <1 - 所占区域大于等分
* =1 - 与其他伸缩项目进行等分
* >1 - 所占区域小于等分
*/
flex-shrink: 2;
}
</style>
</head>
<body>
<div class="con ">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
align-self属性
CSS align-self属性适用于伸缩容器元素，用于设置伸缩项目自身元素在侧轴的对齐方式。
- center：伸缩项目向侧轴的中间位置对齐
- flex-start：伸缩项目向侧轴的起点位置对齐
- felx-end：伸缩项目向侧轴的终点位置对齐
- baseline：伸缩项目根据伸缩项目的基线对齐
- stretch：默认值，伸缩项目拉伸填充整个伸缩容器
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-self属性</title>
<style>
.con{
height: 200px;
border: 1px solid black;
margin-top: 10px;
display: flex;
}
/*
align-
*/
.c1{
align-items: center;
}
.c2{
width: 500px;
height: 300px;
flex-wrap: wrap;
align-content: center;
}
.c3{
align-self: center;
}
.con div{
width: 200px;
height: 100px;
}
.con div:nth-child(1){
background-color: grey;
}
.con div:nth-child(2){
background-color: rgb(212, 250, 212);
}
.con div:nth-child(3){
background-color: indianred;
}
.con div:nth-child(4){
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="con c1">
<div></div>
<div></div>
<div></div>
</div>
<div class="con c2">
<div></div>
<div ></div>
<div></div>
</div>
<div class="con c3">
<div></div>
<!--
align-self属性
*作用 - 设置当前伸缩容器中具体某个伸缩项目元素在侧轴的当前对齐方式
*用法 - 应用于伸缩项目的元素
-->
<div style="align-self: center;" ></div>
<div></div>
</div>
</body>
</html>
order属性
CSS order属性适用于伸缩项目，用于设置伸缩项目在布局时的顺序。
- integer：表示当前伸缩项目所在的次序
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>order属性</title>
<style>
.con{
height: 200px;
border: 1px solid black;
margin-top: 10px;
display: flex;
}
/*
align-
*/
.c1{
}
.c2{
}
.c3{
}
.con div{
width: 200px;
height: 100px;
}
.con div:nth-child(1){
background-color: grey;
}
.con div:nth-child(2){
background-color: rgb(212, 250, 212);
}
.con div:nth-child(3){
background-color: indianred;
}
.con div:nth-child(4){
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="con c1">
<div></div>
<div></div>
<div></div>
</div>
<div class="con c2">
<!-- order属性 - 设置伸缩项目的排列顺序-->
<div style="order: 2;"></div>
<div style="order: 1;" ></div>
<div style="order: 3;"></div>
</div>
</body>
</html>
CSS Hack
CSS Hack是什么
CSS hack由于不同厂商的浏览器，比如Internet Explorer、Safari、Mozilla Firefox、Chrome等，或者是同一厂商的浏览器的不同版本，如E6和E7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到所需要的页面效果。这个时候就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到想要的页面效果。
简单的说，CSS hack的目的就是使CSS代码兼容不同的浏览器。当然，也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
CSS Hack的分类
CSS Hack大致有三种表现形式：
- CSS属性前缀法
- 选择器前缀法
- IE条件注释法
CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
属性前缀法
属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的Hack前缀，以达到预期的页面展现效果。
选择器前缀法
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行Hack。
- *html： *前缀只对IE6生效
- *+html： *+前缀只对IE7生效
- @media screen\9{…}：只对IE6/7生效
- @media \0screen {body {background:red;}}：只对IE8有效
- @media \0screen,screen\9{body {background:blue;}}：只对IE6/7/8有效
- @media screen\0 {body {background:green;}}：只对IE8/9/10有效
- @media screen and (min-width:0\0) {body {background:gray;}}：只对IE9/10有效
- @media screen and (-ms-high-contrast:active),(-ms-high-contrast:none) {body {background orange;}}只对IE10有效
IE条件注释法
这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的Hack方式。
- 只在IE生效
- 只在IE6生效
- 只在IE6以上版本生效
- 只在IE8上不生效
- 非IE浏览器生效
![用 Canvas 编织璀璨星空图[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)