font-family
字型總共分為五大類，如下：
- serif ：向量字型，線條有粗細，可等比例縮放。
- sans-serif ：這應該是我們用的最多的字型家族了，它和 serif 的區別就是，H 和 I 上下沒有小橫線。
- monospace ：等寬字型。
- cursive ：手寫字型。
- fantasy ：其他各種無法歸類的字型，比較個性的字型了都屬於這一類了。
text-transform 以css控制字母的大小寫
- text-transform:capitalize 文字中的每個單詞以大寫字母開頭
- text-transform:lowercase 定義無大寫字母，僅有小寫字母
- text-transform:uppercase 定義無小寫字母，僅有大寫字母
place-content: center; 水平垂直居中
可用於
display:grid;
place-content: center;相當於
display:flex;
justify-content:center;
align-items:center;letter-spacing 字元間距
letter-spacing: 0.2em;
禁止使用者選中文字
user-select:none;
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是0nth-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"'則表示黑夜主題，深色模式，黑暗風格，護眼模式。
object-fit object-position 用於圖片的顯示方式
object-fit 有五個值
- fill 替換內容填充拉伸填滿整個盒子，不保證原有的比例
- contain 替換內容保持原有尺寸比例，保證內容一定在容器內，但是容器內可能留下空白
- cover 覆蓋保持原有比例，保證替換內容尺寸一定大於容器的尺寸，寬度和高度至少有一個和容器一致
- none 保持原有尺寸比例
- scale-down: 呈現尺寸較小
object-fit，我們還有object-position屬性，它負責將影像定位在其容器中
滾動
scroll-padding scroll-margin 在自動滾動定位時預留指定的間距
- scroll-padding作用物件是滾動元素
scroll-margin作用物件是目標元素
h2{ scroll-margin: 6rem; } html{ scroll-padding: 6rem }scrollIntoView 將指定元素滾動到視線範圍內
el.scrollIntoView(); // 等同於el.scrollIntoView(true) el.scrollIntoView(false);- 如果為true，表示元素的頂部與當前區域的可見部分的頂部對齊（前提是當前區域可滾動）；相當於 {behavior: 'auto', block: 'start', inline: 'nearest'}
- 如果為false，表示元素的底部與當前區域的可見部分的尾部對齊（前提是當前區域可滾動）。{behavior: 'auto', block: 'end', inline: 'nearest'}
- 當未傳入引數時，預設值為：{behavior: 'auto', block: 'start', inline: 'nearest'}
scrollIntoViewOptions，一個包含下列屬性的物件。
- behavior定義過渡動畫，預設值為auto。
auto，表示沒有平滑的滾動動畫效果。
smooth，表示有平滑的滾動動畫效果。 - block定義垂直方向的對齊，預設值為start。
start，表示頂端對齊。
center，表示中間對齊
end，表示底端對齊。
nearest：
如果元素完全在視口內，則垂直方向不發生滾動。
如果元素未能完全在視口內，則根據最短滾動距離原則，垂直方向滾動父級容器，使元素完全在視口內。 - inline定義水平方向的對齊，預設值為nearest。
start，表示左端對齊。
center，表示中間對齊。
end，表示右端對齊。
nearest：
如果元素完全在視口內，則水平方向不發生滾動。
如果元素未能完全在視口內，則根據最短滾動距離原則，水平方向滾動父級容器，使元素完全在視口內
//這個title-part元素將以平滑的滾動方式滾動到與視口底部齊平地方（有相容性問題）
document.querySelector("#title-part").scrollIntoView({
block: 'end',
behavior: 'smooth'
})
//這個titleMU-part元素將木訥的瞬間滾動到與視口底部齊平地方（無滾動動畫效果）
document.querySelector("#titleMU-part").scrollIntoView(false)預設也是緊貼滾動元素的，如果設定了scroll-padding 或者scroll-margin,
就可以在滾動定位時預留一定間距
focus 聚焦時自動將元素滾動到視線範圍內
如果有fixed定位元素遮住了，可使用scroll-padding,scroll-margin
:target CSS 偽類 代表一個唯一的頁面元素 (目標元素)，其id 與當前 URL 片段匹配。
白話就是:target可用於當前活動target元素的樣式,透過a標籤繫結id元素,實現點選a標籤修改a標籤連結元素的屬性
:target{
border: 1px solid #ccc;
}可用於tab欄
.box{
display:flex;
}
div{
width:200px;
height:200px;
background-color:skyblue;
display:block;
margin-left:20px;
transtion:flex 1s;
}
div:target{
flex:1;
background-color:red;
}
<div>
<p>
<a href="#a">1</a>
<a href="#b">2</a>
<a href="#c">3</a>
</p>
<div class="box">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>
</div>
overscroll-behavior:contain
阻止滾動連結，滾動不會傳播給祖先元素
- overscroll-behavior是overscroll-behavior-x和overscroll-behavior-y屬性的合併寫法，
- 有三個值： auto,contain,none，inherit
auto:預設會傳播給祖先元素
contain:阻止滾動傳播給祖先元素
none:none與contain的效果一樣
inherit:從父元素繼承滾動行為
.son{
height:300px;
width:300px;
overflow-x:scroll,
overscroll-behavior-x:contain;
}
scroll snap
- scroll snap目前僅支援 scroll-snap-align和scroll-snap-type
scroll-snap-align用於子元素，定義滾停止後，子元素的對齊方式 有三個值：
- start: 當滾動停止時，瀏覽器會滾動到子元素在容器的起始位置
- end: 當滾動停止時，瀏覽器會滾動到子元素在容器的結束位置
- enter: 當滾動停止時，瀏覽器會滾動到子元素在容器的中點位置
scroll-snap-type:用於容器定義滾動的方向和型別有兩個值：
- mandatory:當使用者停止滾動的時候，會自動的選擇元素的一個點
proximity:當使用者滾動到接近足夠的值的時候,才會選擇元素的一個點進行滾動
比如scroll-snap-align:center; scroll-snap-type:x proximity; 這個大概是滾動超過中間點150px的位置發生滾動
完整x軸的案例
<div class="container">
<div ><img src="1.jpeg" /></div>
<div ><img src="2.jpeg" /></div>
<div ><img src="3.jpeg" /></div>
<div ><img src="4.jpeg" /></div>
<div ><img src="5.jpeg" /></div>
<div ><img src="2.jpeg" /></div>
<div ><img src="3.jpeg" /></div>
<div ><img src="4.jpeg" /></div>
</div>
.container{
display:flex;
flex-drection:row;
height:200px;
padding:1rem;
width:200px;
overflow-x:auto;
overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;;
}
div{
margin:10px;
scroll-snap-align:center;
}
img{
width:180px;
max-width:none;
object-fit:contain;
border-radius:1rem;
}所以scroll-snap-type這個屬性可以讓滾動時自動捕捉臨界點。正常情況下，滾動臨界點是緊貼滾動容器的
scroll-snap-type:y proximity;
scroll-snap-slign:start;
scroll-margin: 0是起始位置 正數是記錄起始的位置 負數可以看到下一個盒子的內容提升頁面滾動效能
##### pc端
避免在頁面滾動的時候頻繁觸發包括hover在內的，任何滑鼠事件，從而提升頁面滾動時的效能
body{
point-events:none;
}使用滾動監聽可靈活控制
let timer = null
window.addEventListener('scroll',function(){
document.body.style.pointerEvents = 'none'
if(timer){this.clearTimeout(timer)}
timer = this.setTimeout(()=>{
document.body.style.pointerEvents = 'auto'
},100)
})##### 移動端
touch-action可以禁用瀏覽器在移動端處理手勢的事件，進而提高頁面滾動的效能，還可解決移動端點選延遲
none:阻止所有原生的touch事件，但是我們的輪動也屬於touch事件，
所以要使用manipulation,這個值只允許滾動和持續縮放操作，也就是相當於禁用了其他手勢
html{
touch-action:manipulation;
}也可使用js控制
// 在需要時主動觸發對全域性的所有手勢禁用
document.documentElement.style.touchAction = "none"
// 某一個區域的手勢禁用
document.getElementById('XX').style.touchAction="none"
// 不需要時還原 比如在抬手事件中處理
document.addEventListener('touchend',function(){
document.documentElement.style.touchAction = "manipulation"
})preventDefault阻止預設行為 一般設定passive為 false 宣告不是被動的，
瀏覽器執行完回撥函式才知道有沒有呼叫preventDefault,再去執行預設行為，這樣會造成滾動不流暢
window.addEventListener('touchmove',e=>e.preventDefault(),{
passive:false //設定passive為 false，宣告不是被動的
})所以touchAction先宣告可用觸控事件再配合preventDefault阻止預設行為，且不會影響觸控事件
document.documentElement.style.touchAction = "manipulation"
window.addEventListener('touchmove',e=>e.preventDefault(),)
//將 manipulation 值改為 none，就可以完全阻止滑動預設事件css控制節流
<div class="body">
<button class="throttle" @click="clickFunc">節流提交</button>
</div>
.body{
display: grid;
place-content: center;
height: 100vh;
margin: 0;
//gap屬性實際上是column-gap屬性和row-gap屬性的縮寫 設定網格行列間距
gap: 15px;
background: #f1f1f1;
user-select: none; //滑鼠不可選擇
}
button {
user-select: none;
}
.throttle {
animation: throttle 2s step-end forwards;
}
//:active 偽類匹配被使用者啟用的元素
.throttle:active {
animation: none;
}
@keyframes throttle {
from {
pointer-events: none;
opacity: .5;
}
to {
pointer-events: all;
opacity: 1;
}
}或者透過:active去觸發transiton的變化 然後透過transition回撥去動態設定設定按鈕的禁用狀態
<div class="body">
<button class="throttle" @click="clickFunc">節流提交</button>
</div>
mounted () {
document.addEventListener('transitionstart', function (ev) {
ev.target.disabled = true
})
document.addEventListener('transitionend', function (ev) {
ev.target.disabled = false
})
}
<style scoped>
button {
opacity: 0.99;
transition: opacity 2s;
}
button:not(:disabled):active { //button非禁用狀態的樣式
opacity: 1;
transition:0s;
}
</style>