一些有趣的 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 的效果以下：

加了 filter 的效果：

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 特效，也歡迎一塊兒探討學習哈~

崗位內推

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

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

你想和 薛兆豐老師 成爲同事麼？有興趣的同窗，能夠 關注下面的公衆 號加我微信 詳聊哈~