Css知識掃盲

HappyCodingTop發表於2023-01-04
CSS

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"'則表示黑夜主題，深色模式，黑暗風格，護眼模式。

相關文章