一些有趣的 CSS 魔法和佈局（下）

Micherwa發表於2019-04-02
CSS

前言

上一篇 一些有趣的 CSS 魔法和佈局（上） 中，我們聊了一些有趣且實用的佈局。今天，將呈現一些 CSS 帶來的魔法特效，有部分特效可以幫我們省去不少工作量。

滑鼠懸浮使內容自撐開

在以前遇到這個需求的時候，我們可能會想到用 JS 來操作內容的顯式與否。現在，CSS3 的 transition 可以幫我們更簡單地實現。

<ul>
    <li style="padding-bottom: 20px;">
        <div class="head">
            列表1
        </div>
        <div class="body">
            列表內容<br>
            內容列表內容<br>
            內容列表內容<br>
            內容
        </div>
    </li>

    <li>
        <div class="head">
            列表2
        </div>
        <div class="body">
            列表內容<br>
            內容列表內容<br>
            內容列表內容<br>
            內容
        </div>
    </li>
</ul>
複製程式碼
.body {
  max-height: 0;
  overflow: hidden;
  transition: all 1s ease-out;
}

li:hover .body {
  max-height: 300px;
  transition-timing-function: ease-in;
}
複製程式碼

transition: all 1s ease-out; 這是一種簡寫，transition 有 4 個過渡屬性：transition-property、transition-duration、transition-timing-function、transition-delay。transition-timing-function 規定了速度效果的速度曲線，它有以下幾種約定的屬性。

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
複製程式碼

讓圖片變成黑白色

有一些特殊的時段，比如需要降半旗，在大環境下，各大網站為了表示默哀，會把顏色鮮豔的圖片變灰變暗，過了這段時間後再恢復原本的顏色。

過去，會讓 UI 同學臨時趕工改圖，然後再上傳更新，過程麻煩，還會造成儲存空間的浪費。現在，CSS3 的 filter (濾鏡) 屬性可以更快地實現該需求。UI 同學改的，其實也是源圖片的濾鏡。所以，可以這樣實現：

.header {
    background: no-repeat center center;
    background-color: #ccc;
    background-attachment: scroll;
    background-size: cover;
    margin-bottom: 0;
    
    background-image: url(xxx.jpg);
    filter: grayscale(100%);
}
複製程式碼

未加 filter 的效果如下：

一些有趣的 CSS 魔法和佈局（下）

加了 filter 的效果：

一些有趣的 CSS 魔法和佈局（下）

filter 的屬性還有很多，其中 blur 可以實現高斯模糊，類似 IOS7 的毛玻璃效果。contrast 可以調整圖片的對比度。drop-shadow 會在圖片的下方合成陰影效果，等等。

自定義輸入框游標的顏色

之前遇到過一個需求，註冊登入介面的整體色調偏藍色，連輸入框的邊框色都偏藍。所以，產品希望輸入框的顏色和游標都變為藍色。

設定文字的顏色方便，但游標該怎麼設定顏色？CSS3 的 caret-color 可以解決這個問題。

input, textarea {
    caret-color: blue;
}
複製程式碼

它不僅對於原生的輸入控制元件有效，對設定 contenteditable 的普通 HTML 標籤也適用。

不過相容性上，safari 的 PC 版從 V11.1 開始支援，wap 版從 V11.4 也開始支援了。當然 IE 目前還沒有支援。

禁用文字選中

在以前，如果不想讓別人選中你的頁面裡的內容，可以用 JS 來阻止滑鼠事件。而現在，只需要一句 user-select:none; 的樣式就可以搞定了。

body {
    user-select: none; // 頁面中的文字不能被選中
}
複製程式碼

除了 IE，相容性都不錯。在 IE 6-9 上，可以通過給 body 新增 JS 程式碼 onselectstart="return false;" 來解決。

反過來，對於無法被選中文字的頁面，如果真想複製，也是有技巧的。方法很簡單：開啟 chrome 的 debug 模式，在 console 下輸入 document.body.innerText，回車後就能愉快地複製了，嘿嘿~

控制表格單元格寬度

手寫原生 table 的時候，直接給單元格設定寬度並沒什麼作用，因為單元格的寬度是根據其內容進行調整的。但是，在使用 element-ui 的 el-table 元件時，卻可以給每個單元格設定寬度。這是如何做到的呢？

開啟 debug，看 table 的結構，會發現在 CSS 上有個屬性：table-layout: fixed;。

table-layout 的預設值是 auto，當設定為 fixed 時，在 單元格 td 上設定的寬度就起作用了。用法很簡單：

table {
    table-layout: fixed;
    width: 100%;
}
複製程式碼

流光效果

某個商城上曾看到過的，滑鼠 hover 出現一道流光劃過的效果。用到了 CSS3 的 transform、linear-gradient、transition 等特性。

<div class="img-light">
    <img src="xxx.jpg" width="640" height="384">
</div>
複製程式碼
.img-light {
    position: relative;
    width: 640px;
    height: 384px;
}

.img-light::after {
    content: "";
    height: 100%;
    width: 100px;
    transform: skewX(-25deg) translateZ(0);
    background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.3) 50%, hsla(0, 0%, 100%, 0));
    position: absolute;
    left: -150%;
    top: 0;
    z-index: 2;
}

.img-light:hover::after {
    transition: left 2s ease-in-out;
    left: 150%;
}
複製程式碼

透傳事件層

遇到過一種情況，點選當前層無需觸發自己的事件，但可以觸發下面那層的事件，我把這種情況理解為“透傳”。也就是，點選自身並無反應，相當於直接點選在了下面那層上。

用 CSS3 的 pointer-events 實現很簡單：

div {
    pointer-events: none;
}
複製程式碼

設定為 none，在 MDN 上的解釋是：元素永遠不會成為滑鼠事件的 target。但是，當其後代元素的 pointer-events 屬性指定其他值時，滑鼠事件可以指向後代元素，在這種情況下，滑鼠事件將在捕獲或冒泡階段觸發父元素的事件偵聽器。

美化表單的 radio 和 checkbox

在某個部落格中看到的美化 radio 和 checkbox 的寫法。

.radio-beauty-container {
    font-size: 0;
    $bgc: green;

    %common {
        padding: 2px;
        background-color: $bgc;
        background-clip: content-box;
    }
    .radio-name {
        vertical-align: middle;
        font-size: 16px;
    }
    .radio-beauty {
        width: 18px;
        height: 18px;
        box-sizing: border-box;
        display: inline-block;
        border: 1px solid $bgc;
        vertical-align: middle;
        margin: 0 15px 0 3px;
        border-radius: 50%;

        &:hover {
            box-shadow: 0 0 7px $bgc;
            @extend %common;
        }
    }
    input[type="radio"]:checked+.radio-beauty {
        @extend %common;
    }
}
複製程式碼

其原理是：

  • 偽類選擇器 :checked，表示對應控制元件元素（單選框或是核取方塊）選中時的樣式
  • 加號 + 相鄰兄弟選擇器，這個符號表示選擇後面的兄弟節點
  • 兩者配合，就可以輕鬆自如控制後面元素的顯示或者隱藏，或是其他樣式了
  • 用 label 標籤控制單/核取方塊的選中與否，for 屬性錨定對應的單選框或是核取方塊，然後點選這裡的 label 標籤元素的時候，對應的單/核取方塊就會選中或是取消選中。

總結

CSS3 有許多很讚的特性，可以呈現非常神奇且炫酷的效果。在這兒僅展示了一些我搜羅到的，覺得有意思的特效。大家如果有值得推薦的 CSS 特效，也歡迎一起探討學習哈~

崗位內推

莉莉絲遊戲招 中高階前端工程師 啦！！！

你玩過《小冰冰傳奇（[刀塔傳奇]）》麼？你玩過《劍與家園》麼？

你想和 薛兆豐老師 成為同事麼？有興趣的同學，可以 關注下面的公眾 號加我微信 詳聊哈~

一些有趣的 CSS 魔法和佈局（下）

相關文章