HTML&&CSS复习（六）

CSS伪类和伪元素

其中伪类和伪元素的根本区别在于：它们是否创造了新的元素。

伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。

所有 CSS 伪元素

选择器	例子	例子描述
::after	p::after	在每个 <p> 元素之后插入内容。
::before	p::before	在每个 <p> 元素之前插入内容。
::first-letter	p::first-letter	选择每个 <p> 元素的首字母。
::first-line	p::first-line	选择每个 <p> 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

伪类：存在DOM文档中，逻辑上存在但在文档树中却无须标识的“幽灵”分类。

所有 CSS 伪类

选择器	例子	例子描述
:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的 <input> 元素。
:disabled	input:disabled	选择每个被禁用的 <input> 元素。
:empty	p:empty	选择没有子元素的每个 <p> 元素。
:enabled	input:enabled	选择每个已启用的 <input> 元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个 <p> 元素。
:first-of-type	p:first-of-type	选择作为其父的首个 <p> 元素的每个 <p> 元素。
:focus	input:focus	选择获得焦点的 <input> 元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的 <input> 元素。
:invalid	input:invalid	选择所有具有无效值的 <input> 元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 "it" 开头的 <p> 元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个 <p> 元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个 <p> 元素的每个 <p> 元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not(p)	选择每个非 <p> 元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个 <p> 元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个<p>元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个<p>元素的每个<p>元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个 <p> 元素的每个 <p> 元素。
:only-of-type	p:only-of-type	选择作为其父的唯一 <p> 元素的每个 <p> 元素。
:only-child	p:only-child	选择作为其父的唯一子元素的 <p> 元素。
:optional	input:optional	选择不带 "required" 属性的 <input> 元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的 <input> 元素。
:read-only	input:read-only	选择指定了 "readonly" 属性的 <input> 元素。
:read-write	input:read-write	选择不带 "readonly" 属性的 <input> 元素。
:required	input:required	选择指定了 "required" 属性的 <input> 元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的 <input> 元素。
:visited	a:visited	选择所有已访问的链接。

z-index定位

z-index只能在定位元素上奏效(设了position才能生效)，该属性设置一个定位元素沿z轴的位置，如果为正数，离用户越近；为负数，离用户越远。默认值为auto，即堆叠顺序和父元素相等。其他属性值有number、inherit。

visibility=hidden, opacity=0, display:none

opacity=0：元素透明度为0，该元素被隐藏起来，但不会改变页面布局，如果该元素已经绑定一些事件，仍能触发

visibility=hidden：元素不可见但仍然存在，不会改变页面布局，但不会触发该元素已经绑定的事件

display:none：元素不显示并且会改变页面布局，可理解为该元素从页面中被删除

CSS动画如何实现？transition和animation的区别

1. 使用animation创建动画序列，该属性允许配置动画时间、时长以及其他动画细节，但不能配置动画的实际表现，动画的实际表现由@keyframes规则实现。
2. 使用transition实现，transition强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而当第二个途径发生某种改变时才会产生过渡动画

区别：

1. transition需要触发一个事件才能改变属性；animation不需要触发任何事件就会随时间改变属性
2. transition为2帧（from…to…）；animation可以一帧一帧的

来自：https://barryyeee.github.io/InterviewGuide/Chapter5/

transition属性

1. transition-property：指定过渡的属性值
2. transition-delay：指定延迟过渡时间
3. transition-duration：指定过渡持续时间
4. transition-timing-function：指定过渡动画缓动类型（ease-out/快-慢、ease-in/慢-快、ease-in-out/慢-快-慢、liner线性过渡、cubic-bezier贝塞尔曲线等）

1.(transition过度）all:所有的全部

       transition:all ； 给所有过度效果（单位s）                                                                                     

       transition：all ease；（默认效果慢快慢）

       transition：all linear;（匀速变换）                                                

       transition：all ease-in;（低速开始）                                                                              

       transition：all ease-out:（低速结束）  

       transition:background-color 1s ,width 5s,height 5s ; （同时背景宽高效果过度时间和格式）                                

       transition:过度属性 过度时间 时间曲线 延迟时间(鼠标点上去2s后开始变换）;（复合写法）             

2.(transform)位移属性   

none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

       transform: translate(100px,100px);(两个值一起写往右下角移 写的时候用，隔开)

3.scale(n)放大缩小  

       transform: scale(2); （(n=2)放大两倍）

       一个值:宽高同时放大缩小

       两个值:第一个值缩放宽度,第二个值缩放高度

       正整数(放大),负整数(翻转),小数(缩小)

4.rotate( ndeg):旋转,单位deg；

       transform:rotate(45deg) ;(n=45deg)向顺时针旋转45度）

       正数:顺时针旋转;

       负数:逆时针旋转；

5.skew:斜切(倾斜),单位是度数deg

  transform:skew(-72deg)((n=-72)向逆时针斜切72度)

  (不会影响其他元素的位置,对行内标签没有效果)

资料来自https://blog.csdn.net/Autismpt 表格来自为w3cschool

animation 属性

{animation:XXX 5s infinite;}

@keyframes XXX

{

0-100%

from {}to {}

}

与@keyframes {0-100%  from（与 0% 相同）to（与 100% 相同）} 配合使用

animition-iteration-count：运动的次数。（默认状态下为1次）
属性1：infinite 让动画一直执行
属性2：n设置播放次数
animation-play-state：
属性1：paused（暂停）
属性2：running（运动）

animation-fill-mode属性值：

none: 默认值，播放完动画后，画面停在起始位置

forwards: 播放完动画，停在animation定义的最后一帧

backwards: 如果设置了animation-delay，在开始到delay这段时间，画面停在第一帧。如果没有设置delay，画面是元素设置的初始值。

both：设置动画结束时的状态，以结束时动画的状态优先。

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

animation-direction

值	描述
normal	默认值。动画按正常播放。
reverse	动画反向播放。
alternate	先正常运行再反向运行，持续交替
alternate-reverse	先反向运行再正常运行，持续交替
initial	设置该属性为它的默认值。
inherit	从父元素继承该属性。

animation-timing-function

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

来自w3c以及网上资料