前言
上一篇 一些有趣的 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 特效，也歡迎一起探討學習哈~
崗位內推
莉莉絲遊戲招 中高階前端工程師 啦！！！
你玩過《小冰冰傳奇（[刀塔傳奇]）》麼？你玩過《劍與家園》麼？
你想和 薛兆豐老師 成為同事麼？有興趣的同學，可以 關注下面的公眾 號加我微信 詳聊哈~
