共计 6238 个字符，预计需要花费 16 分钟才能阅读完成。
flex 布局换行之后，上面一行的布局会异样
.homeItemBox{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.homeItem{
display: flex;
width: calc((100% - 20rpx) / 4);
flex-direction: column; align-items: center;
flex-shrink: 0;
margin-top:30rpx;
}
.homeItem:nth-of-type(4n+0){margin-right: 0;} // 每一行的第四个 margin right 是 0 nth-of-type(4n+0)
- 4n+0 就是每隔四个
-
odd even 关键词示意奇偶数这个是算术表达式
p:nth-of-type(3n+0)应用公式 (an + b)。
* 形容：示意周期的长度，n 是计数器（从 0 开始），b 是偏移值。在这里，
咱们指定了下标是 3 的倍数的所有 p 元素的背景色 *
flex-shrink: 0;
假使给父元素设置了 flex 布局后，若要其子元素的 width 有成果，必须给子元素设置 flex-shrink 为 0
来固定元素不被挤压
filter
*filter:brightness 亮度 / 曝光度
filter:brightness(0.2)
filter: opacity(%) —- 透明度
filter: drop-shadow(offset-x offset-y blur color) —- 暗影
filter:drop-shadow(10px 15px 20px #000)
filter: grayscale(%) —- 灰度图像
filter: sepia(%) —- 深褐色
filter: hue-rotate(deg) —- 色相旋转
filter: invert(%) —- 反转图像 应用 invert 滤镜能够把对象的可视化属性全副翻转，包含色调、饱和度和亮度值
filter: saturate(%) —- 饱和度
filter: contrast(%) —- 对比度 值 0%代表全灰色图像，而 100%代表原始图像
filter: blur(px) —- 高斯含糊 *
全站置灰
html {filter: grayscale(.95);
-webkit-filter: grayscale(.95);
}filter VS backdrop-filter
- filter：该属性将含糊或色彩偏移等图形成果利用于元素。
- backdrop-filter：该属性能够让你为一个元素前面区域增加图形成果（如含糊或色彩偏移）。它实用于元素背地的所有元素，为了看到成果，必须使元素或其背景至多局部通明。
- 两者之间的差别，filter 是作用于元素自身，而 backdrop-filter 是作用于元素背地的区域所笼罩的所有元素。而它们所反对的滤镜品种是截然不同的。
- backdrop-filter 最为常见的应用形式是用其实现毛玻璃成果。
filter 和 backdrop-filter 应用上最显著的差别在于：
*filter 作用于以后元素，并且它的后辈元素也会继承这个属性
backdrop-filter 作用于元素背地的所有元素
认真辨别了解，一个是以后元素和它的后辈元素，一个是元素背地的所有元素。*
inset
*inset 属性只作用于定位元素
inset 属性用作定位元素的 top、right、bottom、left 这些属性的简写。相似于 margin 和 padding 属性，按照“上右下左”的程序。*
置灰网站的首屏
兼容更好的混合模式
html{
position:relative;
width: 100%;
height: 100%;
overflow: scroll;
background-color: #fff;
}
html::before{
content:"";
position:absolute;
inset:0;
background: rgba(0,0,0,1);
/* mix-blend-mode: color; 色彩 */
/* mix-blend-mode: hue; 色相 */
mix-blend-mode: saturation; // 饱和度
以上三种模式都可
pointer-events: none; /* 点击穿透 */
z-index:10;
}
.box{background: url('./one.png'),url('./two.png');
background-size: cover;
width: 400px;
height: 400px;
background-blend-mode:lighten;
}
backdrop-filter 实现一种遮罩滤镜成果
html {
width: 100%;
height: 100%;
position: relative;
overflow: scroll;
}
html::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
inset: 0;
backdrop-filter: grayscale(0.9);
pointer-events: none;
}table 应用
子元素均分父元素的长度
*display:table-row; //padding 和 margin 会生效
父元素设置 display: table 时; 留神 padding 会生效
子元素设置 display: table-cell; //margin 会生效 *
h3{display: table-cell;}
nav{
display: table;
width:100%;
position: sticky;
top:0;
background-color: red;
}
<nav>
<h3> 导航 1 </h3>
<h3> 导航 2 </h3>
<h3> 导航 3 </h3>
</nav>利用 table 居中
.parentBox{
display: table;
width: 100vw;
height: 600rpx;
border:1px solid #AAA;
}
.sonItem{
display: table-cell;
vertical-align: middle;
text-align: center;
}吸顶
留神如果父元素设置了 overflow-hidden 则吸顶会生效
width:100%;
position: sticky;
top:0;滚动视差 background-attachment
视差滚动（Parallax Scrolling）是指让多层背景以不同的速度挪动，造成平面的静止成果，带来十分杰出的视觉体验
<div class="gImg gImg1"></div>
<div class="gImg gImg2"></div>
<div class="gImg gImg3"></div>
.gImg{
height: 100vh;
width: 100%;
background-attachment:fixed;
background-size: cover;
background-position: center center;
}
.gImg1{background-image: url('./one.png');
}
.gImg2{background-image: url('./two.png');
}
.gImg3{background-image: url('./three.png');
}成果大略就是
CSS3 transform 中的 matrix
2D 的转换是由一个 3*3 的矩阵示意的，前两行代表转换的值，别离是 a b c d e f，要留神是竖着排的，第一行代表 x 轴产生的变动，第二行代表 y 轴产生的变动，第三行代表 z 轴产生的变动，因为这里是 2D 不波及 z 轴，所以这里是 0 0 1。
- 缩放 scale 对应的是矩阵中的 a 和 d，x 轴的缩放比例对应 a，y 轴的缩放比例对应 d，
- 平移 translate 对应的是矩阵中的 e 和 f，平移的 x 和 y 别离对应 e 和 f。
- 偏移 skew 对应矩阵中的 c 和 b x 对应 c，y 对应 b，这个对应并不是相等，须要对 skew 的 x 值 和 y 值进行 tan 运算。transform: matrix(a, tan(30deg), tan(20deg), d, e, f)
-
旋转 rotate 影响的是 a /b/c/ d 四个值 a=cosθ b=sinθ c=-sinθ d=cosθ
将 30° 转换为弧度，传递给三角函数计算// 弧度和角度的转换公式：弧度 =π/180×角度 const radian = Math.PI / 180 * 30 // 算出弧度 const sin = Math.sin(radian) // 计算 sinθ const cos = Math.cos(radian) // 计算 cosθ
所以这个: transform: scale(1,5, 1.5) translate(0, 190.5)
对应: transform: matrix(1.5, 0, 0, 1.5, 0, 190.5);如果旋转 + 缩放 + 偏移 + 位移一起的话
依照 transform 外面 rotate/scale/skew/translate 所写的程序相乘。
具体
利用 js 管制 css 之 setProperty
通过 js 批改 body 的 css 变量
body{
width:100vw;
height:100vh;
overflow: hidden;
background-color: #111;
perspective: 1000px;
--c-eyeSocket:rgb(41,104,217);
--c-eyeSocket-outer:#02ffff;
--c-eyeSocket-outer-shadow:transparent;
--c-eyeSocket-inner:rgb(35,22,140);
}
// 通过 js 批改 body 的 css 变量
document.body.style.setProperty('--c-eyeSocket','rgba(255,187,255)');
//css 应用 css 变量
.eyeSocket::before {width: calc(100% + 20px);
height: calc(100% + 20px);
border: 6px solid var(--c-eyeSocket);
}js 管制设置以后的元素下面的类名来管制动画
this.$refs.bigEye.className = 'eyeSocket eyeSocketSleeping'
.eyeSocket {
position: absolute;
left: calc(50%-75px);
top: calc(50%-75px);
width: 150px;
aspect-ratio: 1;
border-radius: 50%;
z-index: 1;
border: 4px solid var(--c-eyeSocket);
box-shadow: 0px 0px 50px var(--c-eyeSocket-outer-shadow);
/* 当怄气时增加红色外发光，常态则放弃通明 */
transition: border 0.5s ease-in-out,box-shadow 0.5s ease-in-out;
/* 增加过渡成果 */
}
.eyeSocket::before,
.eyeSocket::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
box-sizing: border-box;
transition: all 0.5s ease-in-out;
}
.eyeSocket::before {width: calc(100% + 20px);
height: calc(100% + 20px);
border: 6px solid var(--c-eyeSocket-outer);
}
.eyeSocket::after {
width: 100%;
height: 100%;
border: 4px solid var(--c-eyeSocket-inner);
box-shadow: inset 0px 0px 30px var(--c-eyeSocket-inner);
}
.eyeSocketSleeping{animation:sleeping 6s infinite;}
@keyframes sleeping {
0%{transform: scale(1);
}
50%{transform: scale(1.2);
}
100%{transform: scale(1);
}
}any-hover any-pointer
- any-hover 通过 css 判断设施是否反对鼠标通过行为
- 而 pointer 则是与点击事件相干
any-hover - none: 没有什么输出安装能够实现 hover 悬停，即没有鼠标输出设施
-
hover: 一个或多个输出安装能够触发元素的 hover 悬停交互，即反对鼠标设施
button:active {background-color: #f0f0f0;} /* 兼容 PC 端：*/ @media (any-hover: hover) { button:hover {background-color: #f5f5f5;} }
pointer 语法
同样也是反对上面 3 个关键字值：
- none 主输出安装点击不可用。
- coarse 主输出安装点击不准确。
- fine 主输出安装点击很 OK。
例如点击不准确的时候让复选框尺寸变大：
@media (pointer: coarse) {input[type="checkbox"] {
width: 30px;
height: 30px;
}
}通过 getComputedStyle 款式做响应式
判断是出于挪动端还是 pc 端
@media (any-hover: none) {
body::before {
content: 'hoverNone';
display: none;
}
}
var strContent = getComputedStyle(document.body, '::before').content;
- strContent 后果是 ’none’ 则示意反对 hover，是 PC 端，
- strContent 后果是 '”hoverNone”‘ 则示意不反对 hover 通过，须要换成 click 事件，是 Mobile 端
JS 判断以后是处于光明模式，还是浅色主题
prefers-color-scheme 媒体个性。它可能帮忙检测设施的深色模式开启状况
:root {--mode: 'unknown';}
@media (prefers-color-scheme: dark) {
/* 光明模式 */
:root {
--mode: 'dark';
--colorLink: #bfdbff;
--colorMark: #cc0000;
--colorText: #ffffff;
--colorLight: #777777;
}
}
@media (prefers-color-scheme: light) {
/* 浅色主题 */
:root {
--mode: 'light';
--colorLink: #34538b;
--colorMark: #cc0000;
--colorText: #000000;
--colorLight: #cccccc;
}
}
var mode = getComputedStyle(document.documentElement).getPropertyValue('--mode').trim();
// mode 后果是 '"dark"' 则示意黑夜主题，深色模式，光明格调，护眼模式。