CSS3基础知识

  CSS3相对于CSS2增加了很多动态的样式，最主要的是transform（变形） transition（过渡） animation（动画）

1、transform（变形）

transform:rotate(度数);   //旋转的度数 单位deg

transform:translate(位移)； //包括translateX translateY translateZ  移动的位移 单位px

transform:scale(与原图比例)； //也可以按照X轴 Y轴分别缩放

transform:skew(度数);  //倾斜的度数

transform:opacity(0-1之间数)；   //透明度

transform-origin:bottom/top;   // 改变操作基准点

若想出现3D效果 可定义

perspective:像素值;       //两像素之间会产生像素差 出现3D感觉

perspective-origin:像素值; //看图的角度

2、transition(过渡)  从一种样式变换到另一种样式

语法：property(明确需要过渡的是哪一个属性)  duration(规定过渡完成的时间)  timing-function(规定过渡效果的速度曲线)  delay(延迟几秒之后执行)

速度曲线包括：linear（匀速） ease(慢快慢)  ease-in(慢进)  ease-out(慢出)

再定义点击事件、焦点事件、鼠标hover，等改变其变换的属性值 就会平滑成动画

3、自定义动画

（1）先在CSS样式中定义动画

@keyframes  动画名称{

            form{

                     开始状态定义；

                     }

             to{

                   结束状态定义；

                 }

}

常用百分比来定义动画：

@keyframes  动画名称{

            0%{

                     开始状态定义；

                     }

             30%{

                   状态定义；

                 }

                 60%{

                     状态定义；

                     }

             100%{

                   结束状态定义；

                 }

}

其次在需要产生动画的选择器里使用：

animation:name(自定义的动画名)  duration(过渡时间)  timing-function(速度效果的速度曲线)   delay(延迟多久播放)  iteration-count(动画播放次数)  direction（是否轮流播放）

alternate（动画轮流反向播放） nomal(不轮流播放)  infinite(无数次播放)

4、选择器

（1）属性选择器  //区配属性是否等于一些值

input[type="text"]{   }   //给input元素 type属性为text的选择器设置样式

input[type^="p"]{   }   //给input元素 type属性以p开头的选择器设置样式

input[type$="t"]{   }   //给input元素 type属性以ｔ结束的选择器设置样式

input[type＊="t"]{   }   //给input元素 type属性中包含ｔ的选择器设置样式

（２）兄弟选择器　／／拥有相同的父级

ｐ～ｓｐａｎ｛｝　／／给自己是span标签，只要上面有ｐ标签　就给满足条件的ｓｐａｎ标签设置样式

ｐ＋ｓｐａｎ｛｝　／／给自己是span标签，相邻的上面必须是ｐ标签　给满足条件的span标签设置样式

（３）伪类选择器　

属于类选择器　但不占用文档流

ｆｏｃｕｓ　ｈｏｖｅｒ　ａｃｔｉｖｅ　ｌｉｎｋ　ｒｅｓｑｕｓｔｉｏｎ

结构性伪类选择器

：ｎｏｔ（．ｃｌａｓｓ）排除指定的元素

：ｎｔｈ－ｃｈｉｌｄ（）　／／指定第几个元素

：ｎｔｈ－ｏｆ－ｔｙｐｅ（）　／／指定第几个元素

ｃｈｉｌｄ系列和ｔｙｐｅ系列的不同

ｐ：ｎｔｈ－ｃｈｉｌｄ（８）　／／第８个元素且是ｐ标签　满足此条件才设置样式　限制性大

ｐ：ｎｔｈ－ｏｆ－ｔｙｐｅ（８）　　／／给第８个ｐ标签设置样式　限制小

５、文字相关

（１）文字换行（只适用于英文）

ｗｏｒｄ－ｗｒａｐ：ｎｏｒｍａｌ（默认　在半角空格或连字符的地方换行）／ｂｒｅａｋ－ｗｏｒｄ（任何地方截断匹配分配的空间并防止溢出）

（２）使用服务器端文字

将所需文字下载并添加的文件中　在ＣＳＳ样式中自定义其字体

＠ｆｏｎｔ－ｆａｃｅ｛

　　　　　　　　　　　ｆｏｎｔ－ｆａｍｉｌｙ：字体名称；

　　　　　　　　　　　ｓｒｃ：ｕｒｌ（＂＂）；　／／字体来源路径

　　　　　　　　　　］

在所需此字体的样式中引用即可

（３）图标字体的使用

在ｆｏｎｔ　ａｗｅｓｏｍｅ网站下载相关字体

将ＣＳＳ文件和ｆｏｎｔｓ中的字体文件复制至相关的项目文件

将复制好的ＣＳＳ文件引入

使用所需图标

语法：＜ｄｉｖ　ｃｌａｓｓ＝＂ｆａ　ｆａ－图标名称＂＞＜／ｄｉｖ＞

６、边框（圆角边框）

ｂｏｒｄｅｒ－ｒａｄｉｕｓ：定义角的弧度（上　右　下　左）

７、边框阴影

ｂｏｘ－ｓｈａｄｏｗ：ｘ－ｏｆｆｓｅｔ（ｘ轴偏移）　ｙ－ｏｆｆｓｅｔ（ｙ轴偏移）　ｂｌｕｒ－ｒａｄｉｕｓ（模糊程度）　ｓｐｒｅａｄ－ｒａｄｉｕｓｃｏｌｏｒ（扩散程度）　ｃｏｌｏｒ（阴影颜色）　ｉｎｓｅｔ（内阴影）