CSS 奇思妙想之酷炫倒影

来源:https://www.cnblogs.com/coco1s/archive/2023/01/12/17045518.html
-Advertisement-
Play Games

在 CSS 中,倒影是一種比較常見的效果。今天,我們就將嘗試,使用 CSS 完成各類不同的倒影效果,話不多說,直接進入主題。 實現倒影的兩種方式 首先,快速過一下在 CSS 中,實現倒影的 2 種方式。 使用 -webkit-box-reflect 正常而言,-webkit-box-reflect ...


在 CSS 中,倒影是一種比較常見的效果。今天,我們就將嘗試,使用 CSS 完成各類不同的倒影效果,話不多說,直接進入主題。

實現倒影的兩種方式

首先,快速過一下在 CSS 中,實現倒影的 2 種方式。

使用 -webkit-box-reflect

正常而言,-webkit-box-reflect 是一種非常便捷及快速的實現倒影的方式。

-webkit-box-reflect 的語法非常簡單,最基本的用法像是這樣:

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

其中,below 可以是 below | above | left | right 代表下上左右,也就是有 4 個方向可以選。

看這麼一個例子:

div {
    background-image: url('image.png');
    -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, .5));
}

看看效果,有了虛實變化之後,這樣就更像是一個倒影。

簡單而言,使用 -webkit-box-reflec 可以做到:

  1. 不同方向的投影
  2. 投影的距離
  3. 投影的虛實,可疊加一層蒙版控制透明度

上面 3 點即是 -webkit-box-reflec 的特點,同時,也表明瞭它存在一定的局限性,同時,在今天,從 -webkit-box-reflec 的名字也能看出來,存在一點相容性問題。所以,如果,我們想實現更負雜一點的倒影效果。利用下麵一種方式可能更好。

利用實現多一個反向元素實現

這個方法其實是更為普遍的。也就是我們實現一個反向的效果即可。通常會利用元素的偽元素。

代碼非常簡單,以文字為例子:

<p content="Reflect">Reflect</p>
p {
    position: relative;
    
    &::before {
        content: attr(content);
        position: absolute;
        inset: 0;
        transform: rotatex(180deg) translatey(15px);
        transform-origin: 50% 100%;
    }
}

就是通過元素的偽元素,再旋轉 180 度,放置到正確合適的位置即可,效果如下:

image

雖然這個代碼多一點,但是由於這是一整個可控制的元素,所以基於它,我們可以實現的效果就能夠非常豐富。

實現各式倒影效果

下麵,我們就基於上述的 DEMO,豐富我們的倒影效果。

我們核心要做的,就是通過改造偽元素,實現不同的效果,得到不一樣的倒影。

  1. 通過 mask,控制透明度,控制條紋

我們可以通過 mask,有效的控制倒影的透明度:

p::before {
    mask: linear-gradient(transparent, #000);
}

效果如下:

透明度的控制也可以是這種從左往右的:

p::before {
  mask: 
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.01) 25%,
      white,
      rgba(255, 255, 255, 0.01) 75%,
      transparent
  );
}

效果如下:

當然,mask 可以有不同的作用,不僅僅是控制透明度,也可以實現橫線分隔、豎線分隔、斜線分隔:

p::before {
  mask: repeating-linear-gradient(
    transparent,
    transparent 3px,
    white 3px,
    white 4px
  );
}

這個是橫線,效果如下:

改變 mask 的角度,就可以得到各種不同方向的效果:

p::before {
  mask: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 3px,
    white 3px,
    white 4px
  );
}

是的,我們還可以把上述兩個不同的 mask 效果疊加在一起,那麼就會是這樣:

p::before {
  mask: 
  repeating-linear-gradient(
      transparent,
      transparent 3px,
      white 3px,
      white 4px
  ),
  linear-gradient(transparent 40%, white 90%);
}

那麼,就會是漸變消失疊加線段分隔的效果:

上面的效果,再疊加上角度控制,就是另外一種效果:

p::before {
  mask: 
    repeating-linear-gradient(
        35deg,
        transparent,
        transparent 3px,
        white 3px,
        white 4px
    ),
    linear-gradient(-90deg, transparent, transparent, white);
}

效果如下:

  1. 配合 transform,實現斜體

通過疊加 transform,我們就能很好的讓字體有一個適合的傾斜角度,像是這樣:

p::before {
  mask: linear-gradient(transparent 20%, rgba(255, 255, 255, .7) 95%);
  transform: rotatex(180deg) translatey(15px) skew(135deg) translatex(-10px);
}

效果如下:

當然,控制 mask,能有各式的紋理:

p::before {
  mask: 
    repeating-linear-gradient(35deg, transparent, transparent 2px, white 2px, white 4px),
    repeating-linear-gradient(-35deg, transparent, transparent 2px, white 2px, white 4px),
    linear-gradient(transparent 30%, white 95%);
  transform: rotatex(180deg) translatey(15px) skew(135deg) translatex(-10px);
}

效果如下:

如果把另外一個偽元素也用上呢,就能豐富倒影的方向:

p {
  &::before {
    mask: linear-gradient(transparent 5%, rgba(255, 255, 255, .9) 95%);
    transform: rotatex(180deg) translatey(11px) skew(125deg) translatex(-10px);
    background: #333;
    color: transparent;
    background-clip: text;
    z-index: 1;
  }
  &::after {
    transform: rotatex(180deg) translatey(11px) skew(-125deg) translatex(8px);
    background: #ddd;
    color: transparent;
    background-clip: text;
    mask: linear-gradient(transparent 5%, rgba(255, 255, 255, .9) 95%);
  }
}

像是這樣:

  1. 藉助濾鏡實現虛化

再接著,我們可以藉助濾鏡,繼續豐富倒影的效果。

譬如簡單的一層模糊濾鏡:

p::before {
  mask: linear-gradient(transparent 5%, rgba(255, 255, 255, .9) 99%);
  transform: rotatex(180deg) translatey(6px) skew(135deg) translatex(-8px);
  filter: blur(8px);
}

效果如下:

或者是半截式的,模糊倒影:

p::before {
  transform: rotatex(180deg) translatey(15px);
  filter: blur(4px);
  mask: linear-gradient(transparent 30%, white 90%);
}

或者是多個濾鏡疊加在一起:

p::before {
  transform: rotatex(180deg) translatey(15px);
  filter: blur(9px) brightness(1.5);
}

效果如下:

上述所有效果的 Demo,你可以在這裡找到:

CodePen Demo -- Text Reflect Effect Demo

嘗試更換字體以及利用 background-clip: text

再接著,我們可以嘗試更換不同的字體。其實,通過 background-clip: text 的特性,給文字染上不同的效果。

譬如,我們選擇了這樣一張圖片:

211817598-69d82c13-aee3-4cd5-b3a8-b52d63375243.png

通過 background-clip: text 作用給文字,像是這樣:

p {
    position: relative;
    font-family: 'new font', sans-serif;
    background: url(花里胡哨的圖片.jpg);
    background-clip: text;
    color: transparent;
    
    &::before {
        content: attr(content);
        position: absolute;
        inset: 0;
        transform: rotatex(180deg) translatey(24px);
        transform-origin: 50% 100%;
        background: inherit;
        background-clip: text;
        color: transparent;
    }
}

再重覆上述的效果一次,我們就能得到更為多樣的不同的效果,下麵是整體效果展示圖:

完整的代碼,你可以戳這裡:CodePen Demo -- Text Reflect Effect Demo

最後

當然,倒影能做的效果遠不止這些,感興趣的讀者可以嘗試使用更多 CSS 屬性,製作更多有意思的倒影效果。

好了,本文到此結束,希望本文對你有所幫助

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Axios 1.基本說明 Axios是一個基於promise的網路請求庫,作用於node.js和瀏覽器中。它是 isomorphic 的 (即同一套代碼可以運行在瀏覽器和node.js中)。在服務端它使用原生node.js http 模塊, 而在客戶端 (瀏覽端) 則使用XMLHttpRequest ...
  • JavaScript 是一種基於原型繼承的語言。在 JavaScript 中,對象是通過原型鏈來繼承屬性和方法的。 一、原型 每一個對象都有一個 proto 屬性,該屬性指向該對象的原型。原型本質上也是一個對象,所有的對象都擁有一個原型,除了 Object.prototype。 JavaScript ...
  • 著意登樓瞻玉兔,何人張幕遮銀闕?又到了一年一度的網頁小掛件環節,以往我們都是集成別人開源的組件,但所謂熟讀唐詩三百首,不會做詩也會吟,熟讀了別人的東西,做幾首打油詩也是可以的,但若不能自出機抒,卻也成不了大事,所以本次我們從零開始製作屬於自己的網頁小掛件,博君一曬。 玉兔主題元素繪製 成本最低的繪製 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 一、audio標簽的使用 1、Audio 對象屬性 2、對象方法 二、效果 效果如下: 三、代碼 代碼如下: MusicPlayer.vue <template> <div class="music"> <!-- 占位 --> <div ...
  • 摘要:輸入網址並點回車,後臺到底發生了什麼。透析 HTTP 協議與 TCP 連接之間的千絲萬縷的關係。掌握為何是三次握手四次揮手?time_wait 存在的意義是什麼?全面圖解重點問題,再也不用擔心面試問這個問題。 本文分享自華為雲社區《輸入網址,小手一點,後面到底發生了什麼?》,作者:龍哥手記。 ...
  • 1.按鈕點擊後添加loading,介面返回成功後再移除loading(經過多次嘗試發現,此方法不能完全確保只調用一次介面,第二次添加時仍會多次調用介面),方法如下: html代碼: <el-button @click="onSave" :loading="onLoading">保存</el-butt ...
  • JavaScript 中,對於普通對象,不能直接使用 length 來獲取對象的長度,因為 JavaScript 對象並不是一種有序的集合,沒有長度的概念。 對於數組或者類數組對象,可以使用 .length 來獲取它們的長度,因為它們是有序集合。 對於字元串也可以使用.length來獲取長度,因為字... ...
  • 我們是袋鼠雲數棧 UED 團隊,致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神,探索前端道路,為社區積累並傳播經驗價值。 前言 訪問控制(Access control)是指對訪問者向受保護資源進行訪問操作的控制管理。該控制管理保證被授權者可訪問受保護資源,未被授權者不能訪問受保護資源。 現 ...
一周排行
    -Advertisement-
    Play Games
  • 隨著Aspire發佈preview5的發佈,Microsoft.Extensions.ServiceDiscovery隨之更新, 服務註冊發現這個屬於老掉牙的話題解決什麼問題就不贅述了,這裡主要講講Microsoft.Extensions.ServiceDiscovery(preview5)以及如何 ...
  • 概述:通過使用`SemaphoreSlim`,可以簡單而有效地限制非同步HTTP請求的併發量,確保在任何給定時間內不超過20個網頁同時下載。`ParallelOptions`不適用於非同步操作,但可考慮使用`Parallel.ForEach`,儘管在非同步場景中謹慎使用。 對於併發非同步 I/O 操作的數量 ...
  • 1.Linux上安裝Docken 伺服器系統版本以及內核版本:cat /etc/redhat-release 查看伺服器內核版本:uname -r 安裝依賴包:yum install -y yum-utils device-mapper-persistent-data lvm2 設置阿裡雲鏡像源:y ...
  • 概述:WPF界面綁定和渲染大量數據可能導致性能問題。通過啟用UI虛擬化、非同步載入和數據分頁,可以有效提高界面響應性能。以下是簡單示例演示這些優化方法。 在WPF中,當你嘗試綁定和渲染大量的數據項時,性能問題可能出現。以下是一些可能導致性能慢的原因以及優化方法: UI 虛擬化: WPF提供了虛擬化技術 ...
  • 引言 上一章節介紹了 TDD 的三大法則,今天我們講一下在單元測試中模擬對象的使用。 Fake Fake - Fake 是一個通用術語,可用於描述 stub或 mock 對象。 它是 stub 還是 mock 取決於使用它的上下文。 也就是說,Fake 可以是 stub 或 mock Mock - ...
  • 為.net6在CentOS7上面做準備,先在vmware虛擬機安裝CentOS 7.9 新建CentOS764位的系統 因為CentOS8不更新了,所以安裝7;簡單就一筆帶過了 選擇下載好的操作系統的iso文件,下載地址https://mirrors.aliyun.com/centos/7.9.20 ...
  • 經過前面幾篇的學習,我們瞭解到指令的大概分類,如:參數載入指令,該載入指令以 Ld 開頭,將參數載入到棧中,以便於後續執行操作命令。參數存儲指令,其指令以 St 開頭,將棧中的數據,存儲到指定的變數中,以方便後續使用。創建實例指令,其指令以 New 開頭,用於在運行時動態生成並初始化對象。方法調用指... ...
  • LiteDB 是一個輕量級的嵌入式 NoSQL 資料庫,其設計理念與 MongoDB 類似,但它是完全使用 C# 開發的,因此與 C# 應用程式的集成非常順暢。與 SQLite 相比,LiteDB 提供了 NoSQL(即鍵值對)的數據存儲方式,並且是一個開源且免費的項目。它適用於桌面、移動以及 We ...
  • 1 開源解析和拆分文檔 第三方的工具去對文件解析拆分,去將我們的文件內容給提取出來,並將我們的文檔內容去拆分成一個小的chunk。常見的PDF word mark down, JSON、HTML。都可以有很好的一些模塊去把這些文件去進行一個東西去提取。 優勢 支持豐富的文檔類型 每種文檔多樣化選擇 ...
  • OOM是什麼?英文全稱為 OutOfMemoryError(記憶體溢出錯誤)。當程式發生OOM時,如何去定位導致異常的代碼還是挺麻煩的。 要檢查OOM發生的原因,首先需要瞭解各種OOM情況下會報的異常信息。這樣能縮小排查範圍,再結合異常堆棧、heapDump文件、JVM分析工具和業務代碼來判斷具體是哪 ...