一些有趣的 CSS 魔法和佈局(下)

Micherwa發表於2019-04-02

前言

上一篇 一些有趣的 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-propertytransition-durationtransition-timing-functiontransition-delaytransition-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 魔法和佈局(下)

相關文章