有趣的css問題

<div style="margin:0 auto;max-width:450px;">
  <div style="height:20vh;background-color: firebrick;">   </div>
</div>

父元素margin:0 auto;max-width:450px; 居中

子孩子不寫寬度直接繼承父級的max-width

好像直接跟父元素直接寫width型別

object-fit

object-fit: cover;

被替換的內容在保持其寬高比的同時填充元素的整個內容框。如果物件的寬高比與內容框不相匹配，該物件將被剪裁以適應內容框。

用於img

will-change

定義將來將要更改的屬性(通過css或者js)

will-change: transform,left,top;
告訴瀏覽器針對這幾個css屬性進行優化,
通過js進行修改的時候回進行優化

錯誤使用方法

.my-element:hover {
  will-change: opacity;
  transition: opacity .25s ease-in-out;
}

will-change是將來時,所以在動畫發生時不應應用

可以把will-change放在父元素上

.parent-element:hover {
  will-change: opacity;
}

.my-element:hover {
  transition: opacity .25s ease-in-out;
}
 

Mozilla建議will-change在元素更改完成後刪除。這就是為什麼還建議will-change通過JavaScript進行設定以便將其刪除的原因。如果will-change在CSS樣式表中設定了，則無法將其刪除。

const el = document.querySelector('.parent-element')
el.addEventListener('mouseenter', addWillChange)
el.addEventListener('animationend', removeChange)

const addWillChange = () => {
  this.style.willChange = 'opacity'
}

const removeChange = () => {
  this.style.willChange = 'auto'
}
 

requestAnimationFrame 動畫

預設1s中60次

  <h1 id="ccc"></h1>

 	let number = 0;
    let h1 = document.querySelector('#ccc')
    let ref;
    const countUp = () => {
      number++;
      // UI 更新
      h1.textContent=number;
      if (number < 100000) {
      ref=  requestAnimationFrame(countUp)
      }
    }
    // 開啟動畫
    requestAnimationFrame(countUp)
    // 假設 5s清除動畫
    setTimeout(()=>{
      cancelAnimationFrame(ref)
    },5000)

https://codepen.io/kikiki_kiki/pen/jOWraNL

晚上研究,控制幀率

window.requestAnimationFrame(callback);

引數

該引數與performance.now()的返回值相同，它表示requestAnimationFrame() 開始去執行回撥函式的時刻。

const countUp = (now) => {
    console.log(now); // performance.now()  5s 也就是now最終的數值應該超過 5000ms
    number++;
    // UI 更新
    h1.textContent=number;
    if (number < 60*5) {
      ref=  requestAnimationFrame(countUp)
    }
  }

唉....最後想出了這種方法,減少遞迴次數進行優化

  let number = 0;
  let h1 = document.querySelector('#ccc')
  let ref;
  const countUp = () => {
    number++;
    // UI 更新
    h1.textContent=number;
    if (number < 5) {
      setTimeout(()=>{
        ref=  requestAnimationFrame(countUp)
      },1000)
    }
  }
  // 開啟動畫
  requestAnimationFrame(countUp)

特殊的基本資料型別

number,boolean,string

let a=1
a.sex='xxx'
a //1

let b='xxx'
b.sex='bbb'
b // 'xxx'

let c=true
b.sex='ccc'
b // true

都不會報錯,第二行會建立一個number,string,boolean 的物件,但是第三行執行的時候會被銷燬

Object 建構函式作為一個工廠方法,能夠根據傳入值得型別返回相應原始值包裝型別的例項

let obj=new Object('xxx')
obj instanceof String // true
Number ,Boolean 同理

解構

let arr = [1, 2, 3, 4, 5]
let {length, 0: first, [length - 1]: last} = arr;
console.log(first, last);
// 1, 5
let {1:squired}=arr;
console.log(squired);// 2

扁平化陣列

let a=['a','b','c',['d','e','f',['b','d']]]
String(a).split(',');

[
  'a', 'b', 'c',
  'd', 'e', 'f',
  'b', 'd'
]

let a=['a','b','c']
for (let [key, value] of a.entries()) {
  console.log(key, value);
}

delele

let arr = [1, 2, 3];
delete arr[0];
delete arr[2];
console.log(arr.length);// 3

刪除但是沒有改變長度

動畫

 .spinner{
      width: 100px;
      height: 100px;
      display: flex;
      max-width: 100px;
      position: relative;
      box-sizing: border-box;
      border-radius: 50%;
      margin-left:-25px;
      background:conic-gradient(transparent 0%, transparent 27%, #CD798F 27%, #92DFF0 38%, white 48%, transparent 48%, transparent 77%, #CD798F 77%, #92DFF0 88%, white 98%, transparent 98%);
      /*mix-blend-mode: color-dodge;*/
      animation: spin 4s linear infinite;
    }
    .spinner:before{
      content: '';
      position: absolute;
      top:0;
      right:0;
      bottom:0;
      left:0;
      z-index:-1;
      margin:5px;
      border-radius: 50%;
      background-color: #fff;
    }
    @keyframes spin {
      0%{
        transform: rotateZ(0deg);
      }
      100%{
        transform: rotateZ(360deg);
      }
    }

html

    <div class="spinner"></div>

重要程式碼

background:conic-gradient(transparent 0%, transparent 27%);
 顏色,度數

conic-gradient（）函式是CSS中的內建函式，用於將圓錐曲線漸變設定為背景影象。圓錐傾斜角從0度到360度開始。圓錐形是圓形的，並使用元素的中心作為色標的源點。

mix-blend-mode: color-dodge;

元素的內容應該與元素的直系父元素的內容和元素的背景如何混合

animation-direction: reverse;

反向執行動畫

https://css-tricks.com/examples/nth-child-tester/

focus-within

:focus-within 是一個CSS 偽類 ，表示一個元素獲得焦點，或，該元素的後代元素獲得焦點。換句話說，元素自身或者它的某個後代匹配 :focus 偽類。（shadow DOM 樹中的後代也包括在內）

滑鼠hover標記一個特殊欄位