前端—初级阶段2(5-8)

摘要：我们可以设置多个关键帧通过百分比将动画序列分割成多个节点在各节点中分别定义各属性通过将动画应用于相应元素样式属性动画名称持续时长默认是。播放方向测试播放完的状态最后一个关键帧第一个关键帧测试播放状态默认是。

CSS选择器(基本、层级、属性、伪类、伪状态)
CSS常用样式属性
CSS3 过渡、变换、动画
CSS3 3D场景搭建与应用

CSS选择器一共有五种:基本、层级、属性、伪类、伪元素 CSS选择器参考手册

通配符/全局选择器 *

ID选择器 #Id

class选择器 .classname

元素选择器 element

群组选择器 element,element

后代选择器 selecter selecter

子元素选择器 selcter>selecter 所有子元素 测试

相邻兄弟选择器 selecter+selecter 就下面的一个 测试

通配兄弟选择器 selecter1~selecter2 selecter1之后出现的所有selecter2 测试

selecter[attr] 包含attr属性的元素 测试

selecter[attr=val] arrt属性值是val的元素 测试

seldcter[attr^=val] attr属性值是以val开头的元素 测试

selecter[attr$=val] attr属性值是以val结束的元素 测试

selecter[attr~=val] attr属性值val 或 包含val（两个值以空格隔开，其中一个是val) 测试

selecter[attr*=val] attr属性值中包含val的元素,只要有这个字母就可以 测试

selecter[attr|=val] attr属性值中带有以val开头的元素,val值必须是整个单词 测试

1) 动态伪类选择器

:link 未访问的链接 测试

:visited 已访问的链接

:hover 鼠标移动到链接上

:active 选定的链接

:focus 焦点 测试

提示:在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
a:active 必须被置于 a:hover 之后，才是有效的。

2) 目标伪类选择器

:target 选取当前活动的目标元素测试
URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)

3) 语言伪类选择器

:lang 用于选取带有以指定值开头的 lang 属性的元素 测试

4) UI元素伪类选择器 （大多用在表单元素上）

:enabled 匹配已启用的元素测试

:diabled 匹配被禁用的元素

:checked 匹配已被选中的input元素（只用于单选按钮和复选框）测试

5) 结构伪类选择器

:first-child 父元素中第一个子元素 测试

:last-child 父元素中最后一个子元素 测试

:first-of-type　父元素中第一个类型(等于:nth-of-type(1)) 测试

:last-of-type　 父元素中最后一个类型(等于:nth-last-of-type(1) 测试

:only-child　父元素中有唯一子元素 测试

:only-of-type 父元素中有唯一子类型测试

:nth-child(n) 父元素中第n个子元素 测试

:nth-last-child(n) 父元素中第n个子元素(从最后一个子元素开始计数) 测试

:nth-of-type(n)　父元素中第n个子类型　测试　　　　　　　　

:nth-last-of-type(n) 父元素中第n个子类型(从最后一个子类型开始计数)测试　　　　　　　

:empty 匹配空的元素(父元素中没有有子元素和内容)测试

:root 匹配文档根元素(在HTML中根元素始终是html元素)测试

6) 否定伪类选择器

:not(selecter) 匹配非指定元素/选择器的每个元素测试

::first-letter 选择首字母 测试

::first-line 选择首行 测试

::before 在元素之前添加内容，默认行内元素

::after 在元素之后添加内容，默认行内元素

::selection 匹配被用户选取的内容(应用CSS 属性：color,background,cursor,outline) 测试

::-webkit-input-placeholder 改变表单的默认样式

伪类与伪元素的特性及其区别：

伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；

伪元素本质上是创建了一个有内容的虚拟容器；

CSS3中伪类和伪元素的语法不同；

可以同时使用多个伪类，而只能同时使用一个伪元素，并且只能出现在最后；（a:first-child:hover ；p:hover::first-letter ）

内联样式(1000)>id选择器(100)>类选择器，属性选择器，伪类选择器(10)>标签选择器、伪元素选择器(1)

提高优先级的方法：使用!important关键字

css属性参考手册

宽度 width: 长度 | 百分比 | auto;

高度 height: 长度 | 百分比 | auto;

边界 margin: 上 右 下 左 ;

填充 padding: 上 右 下 左 ;

定位 position: absolute | relative | static;

是否可见 visibility: inherit | visible | hidden;(会占据页面上的空间)

类型 display: block| inline| inline-block|flex|none; flex图片

溢出 overflow: visible | hidden | scroll auto;

浮动 float: left | right | none;清除浮动

阴影 box-shadow: h-shadow(水平阴影位置) v-shadow(垂直阴影位置) blur(模糊距离) spread(阴影尺寸) color(阴影颜色) inset|outset;阴影测试

颜色 color: 数值;

大小 font-size: 数值;

字体 font-family: 宋体,sans-serif;

样式 font-style: italic;(斜体) normal;(正常)

粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)

变体 font-variant: small-caps;(小型大写字母) normal;(正常)

行高 line-height :数值;

字间距 letter-spacing : 数值;

大小写 text-transform: capitalize(首字大写) | uppercase(英文大写) | lowercase(英文小写) | none;

修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线)

排列 text-align: justify | left | right | center;

缩进 text-indent: 数值 | inherit;

阴影 text-shadow:数值;

颜色 background-color: 数值;

图片 background-image: url() | none;

重复 background-repeat: no-repeat | repeat | repeat-x | repeat-y;

滚动 background-attachment: fixed | scroll;

尺寸 background-size:length|percentage|cover|contain;

位置 background-position:数值 | top | bottom | left | right | center;

简写 background:背景颜色 | 背景图象 | 背景重复 | 背景附件 | 背景位置 ;

多值 background:url(a.jpg") no-repeat fixed center , url("a.jpg") no-repeat fixed top;
background-size:300px 300px,100px 100px;

样式 border-style: solid;dotted;(点线) dashed;(虚线) double;(双线) ;

宽度 border-width: 数值;

颜色 border-color: top值 right值 bottom值 left值;

简写 border: width style color;

类型 list-style-type: disc(实心圆形) | circle(空心圆形) | square(实心方形) | decimal(数字) |none;

位置 list-style-position: outside | inside;

图像 list-style-image: URL;

简写 list-style:样式类型 | 样式位置 | url;

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

1) 移动translate:将元素从原来的位置移动到指定位置 测试

translate(x,y) 2D 转换。

translate3d(x,y,z) 3D 转换。

translateX(x) 用X轴的值转换。

translateY(y) 用Y轴的值转换。

translateZ(z) 3D转换只是用Z轴的值。

2) 缩放scale:将元素根据中心原点进行缩放，测试

scale(x,y) 2D缩放转换。

scale3d(x,y,z) 3D 缩放转换。

scaleX(x) 设置X轴的值来缩放转换。测试

scaleY(y) 设置Y轴的值来缩放转换。测试

scaleZ(z) 设置Z轴的值来3D缩放转换。

3) 旋转rotate：指定需要进行旋转的坐标轴, angle 表示旋转角度

rotate(angle) 2D 旋转 测试

rotate3d(x,y,z,angle) 3D 旋转。

rotateX(angle) 沿着X轴的 3D 旋转。测试

rotateY(angle) 沿着Y轴的 3D 旋转。测试

rotateZ(angle) 沿着Z轴的 3D 旋转。

4) 倾斜skew(x-angle,y-angle) 能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。skew图片说明

skew(x-angle,y-angle) 沿着X和Y轴的2D倾斜转换。测试

skewX(angle) 沿着X轴的2D倾斜转换。 测试

skewY(angle) 沿着Y轴的2D倾斜转换。测试

参与属性 transition-property ：none|all| property(多个属性名以逗号分隔)

持续时间 transition-duration：time(秒或毫秒)，默认是0

转速曲线 transition-timing-function 测试
linear以相同速度开始至结束的过渡效果。
ease 慢速开始，然后变快，然后慢速结束的过渡效果
ease-in 以慢速开始的过渡效果
ease-out 以慢速结束的过渡效果
ease-in-out以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n)定义自己的值。可能的值是 0 至 1 之间的数值。

延迟时间 transition-delay：time(秒或毫秒)，默认是0

简写 transition: property duration timing-function delay;测试

可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果.测试

1)必要元素

通过@keyframes指定动画序列；自动补间动画，确定两个点，系统会自动计算中间过程。这两个点就称为关键帧。我们可以设置多个关键帧

通过百分比将动画序列分割成多个节点；

在各节点中分别定义各属性

通过animation将动画应用于相应元素；

2)animation样式属性

动画名称 animation-name：move

持续时长 animation-duration : 1s ;默认是 0。

播放速度 animation-timing-function: linear;默认是 "ease" 测试

延时时间 animation-delay: 1s; 默认是 0。注意：animation: move 3s linear 0 2 ;(不执行) =>animation: move 3s linear 0s 2 ;

播放次数 animation-iteration-count: n|infinite; 默认是 1。

播放方向 animation-direction: normal|reverse|alternate|alternate-reverse;测试

播放完的状态 animation-fill-mode: none | forwards(最后一个关键帧) | backwards(第一个关键帧) | both;测试

播放状态 animation-play-state: paused|running;默认是 "running"。测试

animation所有动画属性的简写属性，除了 animation-play-state 属性。
简写animation: name duration timing-function delay iteration-count direction fill-mode; （默认值none 0 ease 0 1 normal none）

perspective: number|none; 3D元素距视图的距离，以像素计
perspective-origin:50% 50% 3D元素所基于的X轴和Y轴。用来改变 3D 元素的底部位置。
当为元素定义 perspective,perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身

transform-style:preserve-3d; 设置3D,调整元素是在一个3维空间下
transform-origin:x(left/center/right/length/%) y(top/center/bottom/length/%) z(length); 调整旋转中心 默认值为(50% 50% 0) 测试 用例-边框设置0.5px
backface-visibility:visible|hidden; 当元素不面向屏幕时是否可见。测试

坐标系原点在左上角,x轴的正方向是向右,y轴正方向是向下,z轴正方向是从屏幕到人的眼睛(垂直)

CSS3实现3D开门动画效果
图片的旋转木马效果
CSS3 3D transform变换
张鑫旭博客