巧用 -webkit-box-reflect 倒影實現各種動效

在好久以前的一篇文章，有講到 -webkit-box-reflect 這個屬性 -- 從倒影提及，談談 CSS 繼承 inherit

-webkit-box-reflect 是一個很是有意思的屬性，它讓 CSS 有能力像鏡子同樣，反射咱們元素本來繪製的內容。

上一次寫它，它的兼容性還很是很是的慘淡，可是到今天，雖然仍是一個 Non-standard 的語法，可是兼容性已經大有改觀，而且利用它，咱們能夠實現很是多有意思的效果。

截止至 2021-02-19，它的兼容性已經達到了 91.02%，看看 CANIUSE -webkit-box-reflect：

接下來進入正文。

-webkit-box-reflect 基本用法

-webkit-box-reflect 的語法很是簡單，最基本的用法像是這樣：

div {
    -webkit-box-reflect: below;
}

其中，below 能夠是 below | above | left | right 表明下上左右，也就是有 4 個方向能夠選。

假設咱們有以下一張圖片：

<div></div>

div {
    background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');
}

加上 -webkit-box-reflect: right，也就是右側的倒影：

div {
    background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');
    -webkit-box-reflect: right;
}

效果以下，生成了一個元素右側的鏡像元素：

設置倒影距離

在方向後面，還能夠接一個具體的數值大小，表示倒影與原元素間的距離。

div {
    background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');
    -webkit-box-reflect: right 10px;
}

加上 10px 以後，倒影與原元素間將間隔 10px：

設置倒影虛實

還有一個很是重要的功能，就是方位後面，還能再設置一個漸變值，利用這個漸變值，能夠實現倒影的一個虛化效果，這一點很是重要。

div {
    background-image: url('https://images.pokemontcg.io/xy2/12_hires.png');
    -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, .5));
}

看看效果，有了虛實變化以後，這樣就更像是一個倒影.

其實，這裏的漸變就是給倒影的圖片添加了一個 MASK 屬性，MASK 屬性的 transparent 部分，圖片將變得透明，而實色部分，則保持原圖。

關於 CSS MASK 屬性，若是你還有什麼疑問，建議看看這篇文章：奇妙的 CSS MASK

CodePen Demo -- -webkit-box-reflect Demo

使用 -webkit-box-reflect 實現一些有意思的動效

掌握了基本的語法後，咱們就能夠利用其實現一些有意思的動效，下面簡單羅列一下。

我發現這個屬性特別適合運用在一些暗黑系風格的頁面中。可以讓不少動效看起來高大上不少。（我的審美）

在按鈕中運用 -webkit-box-reflect

配合一些動態邊框動畫的按鈕，可以營造一種很科幻的效果：

感興趣的能夠自行戳源碼瞭解瞭解：

CodePen demo -webkit-box-reflect Neon Button Hover Effect

在文字中運用 -webkit-box-reflect

在暗黑系的標題文字中，運用上 -webkit-box-reflect ，瞬間高大上了很多。

CodePen demo - Font & -webkit-box-reflect

在 3D 中運用 -webkit-box-reflect

嘿嘿，接下來，咱們甚至能夠把 -webkit-box-reflect 運用中 3D 效果中，徹底不同的觀感體驗。

咱們給一個 3D 照片牆，加上倒影效果：

CodePen demo - 3DView & -webkit-box-reflect

使用 -webkit-box-reflect 創造藝術圖案

有趣的 CSS 藝術，它又來了。

在袁川老師的這篇文章中 -- Chinese Window Lattice And CSS，介紹了利用 -webkit-box-reflect 生成剪紙藝術這樣一種思路。

因爲 -webkit-box-reflect 能夠生成倒影，那麼咱們利用它進行不斷的套娃，一層疊一層，那麼只須要生成一個基本的元素，就能夠利用倒影產生出各類不一樣的效果。

假設，咱們有以下結構：

<div class="g-wrap1">
    <div class="g-wrap2">
        <div class="g-wrap3">
            <div class="g-wrap4"></div>
        </div>
    </div>
</div>

咱們只須要給 .g-wrap4 實現一個圖形，例如這樣：

.g-wrap4 {
    background: 
        radial-gradient(circle at 0 0, #000 30%, transparent 30%, transparent 40%, #000 40%, #000 50%, transparent 50%),
        radial-gradient(circle at 100% 100%, #000 10%, transparent 10%, transparent 30%, #000 30%, #000 40%, transparent 40%);
}

而後就是 4 層套娃， 首先給 .g-wrap4 加上一層倒影 -webkit-box-reflect：

.g-wrap4 {
    -webkit-box-reflect: right 0px;
}

獲得：

繼續套娃，給 .g-wrap3 加上一層倒影 -webkit-box-reflect：

.g-wrap4 {
    -webkit-box-reflect: right 0px;
}
.g-wrap3 {
    -webkit-box-reflect: below 0px;
}

繼續，給 .g-wrap2 加上一層倒影 -webkit-box-reflect：

.g-wrap4 {
    -webkit-box-reflect: right 0px;
}
.g-wrap3 {
    -webkit-box-reflect: below 0px;
}
.g-wrap2 {
    -webkit-box-reflect: left 0px;
}

最後，給 .g-wrap1 加上一層倒影 -webkit-box-reflect：

.g-wrap4 {
    -webkit-box-reflect: right 0px;
}
.g-wrap3 {
    -webkit-box-reflect: below 0px;
}
.g-wrap2 {
    -webkit-box-reflect: left 0px;
}
.g-wrap1 {
    -webkit-box-reflect: above 0px;
}

就能夠獲得一個經過 4 層倒影獲得的圖形：

這樣，經過不一樣的基礎圖形，發揮咱們的想象力，就能夠生成各式各樣的剪紙對稱圖形：

完整的代碼，能夠戳這裏：

CodePen Demo -- -webkit-box-reflect artist

最後

本文到此結束，但願對你有幫助 😃，本文介紹了 webkit-box-reflect 的一些有意思的用法，可能業務中不太實用，可是很是有趣。

更多精彩 CSS 技術文章彙總在個人 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏。

若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。