CSS伪类和伪元素
其中伪类和伪元素的根本区别在于:它们是否创造了新的元素。
伪元素/伪对象:不存在在DOM文档中,是虚拟的元素,是创建新元素。代表某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。
所有 CSS 伪元素
选择器 | 例子 | 例子描述 |
p::after | 在每个 <p> 元素之后插入内容。 | |
p::before | 在每个 <p> 元素之前插入内容。 | |
p::first-letter | 选择每个 <p> 元素的首字母。 | |
p::first-line | 选择每个 <p> 元素的首行。 | |
p::selection | 选择用户选择的元素部分。 |
伪类:存在DOM文档中,逻辑上存在但在文档树中却无须标识的“幽灵”分类。
所有 CSS 伪类
选择器 | 例子 | 例子描述 |
a:active | 选择活动的链接。 | |
input:checked | 选择每个被选中的 <input> 元素。 | |
input:disabled | 选择每个被禁用的 <input> 元素。 | |
p:empty | 选择没有子元素的每个 <p> 元素。 | |
input:enabled | 选择每个已启用的 <input> 元素。 | |
p:first-child | 选择作为其父的首个子元素的每个 <p> 元素。 | |
p:first-of-type | 选择作为其父的首个 <p> 元素的每个 <p> 元素。 | |
input:focus | 选择获得焦点的 <input> 元素。 | |
a:hover | 选择鼠标悬停其上的链接。 | |
input:in-range | 选择具有指定范围内的值的 <input> 元素。 | |
input:invalid | 选择所有具有无效值的 <input> 元素。 | |
p:lang(it) | 选择每个 lang 属性值以 "it" 开头的 <p> 元素。 | |
p:last-child | 选择作为其父的最后一个子元素的每个 <p> 元素。 | |
p:last-of-type | 选择作为其父的最后一个 <p> 元素的每个 <p> 元素。 | |
a:link | 选择所有未被访问的链接。 | |
:not(p) | 选择每个非 <p> 元素的元素。 | |
p:nth-child(2) | 选择作为其父的第二个子元素的每个 <p> 元素。 | |
p:nth-last-child(2) | 选择作为父的第二个子元素的每个<p>元素,从最后一个子元素计数。 | |
p:nth-last-of-type(2) | 选择作为父的第二个<p>元素的每个<p>元素,从最后一个子元素计数 | |
p:nth-of-type(2) | 选择作为其父的第二个 <p> 元素的每个 <p> 元素。 | |
p:only-of-type | 选择作为其父的唯一 <p> 元素的每个 <p> 元素。 | |
p:only-child | 选择作为其父的唯一子元素的 <p> 元素。 | |
input:optional | 选择不带 "required" 属性的 <input> 元素。 | |
input:out-of-range | 选择值在指定范围之外的 <input> 元素。 | |
input:read-only | 选择指定了 "readonly" 属性的 <input> 元素。 | |
input:read-write | 选择不带 "readonly" 属性的 <input> 元素。 | |
input:required | 选择指定了 "required" 属性的 <input> 元素。 | |
root | 选择元素的根元素。 | |
#news:target | 选择当前活动的 #news 元素(单击包含该锚名称的 URL)。 | |
input:valid | 选择所有具有有效值的 <input> 元素。 | |
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的区别
- 使用animation创建动画序列,该属性允许配置动画时间、时长以及其他动画细节,但不能配置动画的实际表现,动画的实际表现由@keyframes规则实现。
- 使用transition实现,transition强调过渡,是元素的一个或多个属性发生变化时产生的过渡效果,同一个元素通过两个不同的途径获取样式,而当第二个途径发生某种改变时才会产生过渡动画
区别:
- transition需要触发一个事件才能改变属性;animation不需要触发任何事件就会随时间改变属性
- transition为2帧(from…to…);animation可以一帧一帧的
来自:https://barryyeee.github.io/InterviewGuide/Chapter5/
transition属性
- transition-property:指定过渡的属性值
- transition-delay:指定延迟过渡时间
- transition-duration:指定过渡持续时间
- 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:设置动画结束时的状态,以结束时动画的状态优先。
值 | 描述 |
规定需要绑定到选择器的 keyframe 名称。。 | |
规定完成动画所花费的时间,以秒或毫秒计。 | |
规定动画的速度曲线。 | |
规定在动画开始之前的延迟。 | |
规定动画应该播放的次数。 | |
规定是否应该轮流反向播放动画。 |
值 | 描述 |
normal | 默认值。动画按正常播放。 |
reverse | 动画反向播放。 |
alternate | 先正常运行再反向运行,持续交替 |
alternate-reverse | 先反向运行再正常运行,持续交替 |
initial | 设置该属性为它的默认值。 |
inherit | 从父元素继承该属性。 |
值 | 描述 |
linear | 动画从头到尾的速度是相同的。 |
ease | 默认。动画以低速开始,然后加快,在结束前变慢。 |
ease-in | 动画以低速开始。 |
ease-out | 动画以低速结束。 |
ease-in-out | 动画以低速开始和结束。 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
来自w3c以及网上资料