漲姿勢了，殊途同歸的圖片交互動效製作！

来源:https://www.cnblogs.com/coco1s/archive/2023/04/24/17348653.html
-Advertisement-
Play Games

最近，在 CodePen 上，看到一個非常有意思的圖片動效，效果如下： 原效果鏈接：CodePen Demo - 1 div pure CSS blinds staggered animation in 13 declarations 本身這個動畫效果，並沒有多驚艷。驚艷的地方在於原作者的實現方式非 ...


最近，在 CodePen 上，看到一個非常有意思的圖片動效，效果如下：

原效果鏈接：CodePen Demo - 1 div pure CSS blinds staggered animation in 13 declarations

本身這個動畫效果，並沒有多驚艷。驚艷的地方在於原作者的實現方式非常有趣，我們簡單來看看：

<div></div>

$base: 'https://images.unsplash.com/';
$imid: '1608848461950-0fe51dfc41cb';
$size: 800;

/* declarations 1 through 3 are for layout */
html, body, div { display: grid } /* 1 */ 

html { height: 100% } /* 2 */

div {
	place-self: center; /* 3 */
	background: /* cat image */
		url('#{$base}photo-#{$imid}?w=#{$size}') 
			50%/ cover; /* 4 */
	
	&::after {
		padding: 200px; /* 5 size element */
		background: /* blinds */
			/* top to bottom 50% lightness grey to white 
			 * repeating gradient (16 repetitions) */
			/* slightly lighter than 50% grey to fix Chrome on Android glitch */
			repeating-linear-gradient(hsl(0, 0%, 52.5%), #fff 6.25%), 
			/* 50% lightness grey to white gradient 
			 * the top third of the gradient is fully grey 
			 * the middle third is the gradient transition 
			 * from the 50% lightness grey of the first third 
			 * to white, which also covers the bottom third */
			/* extra black stop added to fix Chrome on Android glitch */
			linear-gradient(#000 33.3%, grey 0, #fff 66.7%) 
				/* background height is 3x the element's height */
				0/ 100% 300%; /* 6 */
		/* for reference: this talk where I go into 
		 * the multiply blend mode (Chromium only slides)
		 * https://codepen.io/thebabydino/project/full/ZjwjBe */
		background-blend-mode: multiply; /* 7 */
		/* use a very high contrast value to make  
		 * all greys darker than the 50% lightness one black
		 * and all others white 
		 * from top to bottom, this gives us 
		 * horizontal white bands of increasing height 
		 * with black in between */
		filter: contrast(999); /* 8 */
		/* also detailed in the talk mentioned above
		 * wherever this pseudo is white, result of blending 
		 * with parent (with cat background) is white; 
		 * wherever this pseudo is black, result of blending 
		 * with parent is the parent (cat background here) */
		mix-blend-mode: screen; /* 9 */
		/* background-position animation goes back and forth */
		animation: p 1s linear infinite alternate; /* 10 */
		content: '' /* 11 necesarry for pseudo to show up */
	}
}

@keyframes p {
	/* cat is covered by grey top third of tall gradient, 
	 * which results in a fully black pseudo after 
	 * blending backgrounds & applying contrast 
	 * => result after blending it with the cat is the cat*/
	0%, 25% { background-position: 0 0 } /* 12 */
	/* cat is covered by white bottom third of tall gradient, 
	 * which results in a fully white pseudo after 
	 * blending backgrounds & applying contrast 
	 * => fully white result after blending with cat */
	75%, 100% { background-position: 0 100% } /* 13 */
}

怎麼樣，實際代碼行數不錯，大部分是註釋。

整個效果的核心是利用了漸變 + mix-blend-mode、background-blend-mode 以及濾鏡 filter。相信大部分人看到上述的代碼不調試一番是不知道到底發生了啥的。（我也是）

當然，本文不是來剖析原作者的構思巧妙，而是想就著這個效果，思考一下，在 CSS 中，我們是否有辦法使用其他方式，快速還原同樣的動畫效果？

答案是肯定的。接下來，我們就使用 CSS @property 和 mask 的組合，快速還原上述動畫效果。

動畫分解

其實上面的動畫，整體而言可以拆解成兩個部分。

  1. 向上遮罩消失動畫

首先，我們需要實現這麼一個向上的遮罩消失動畫：

方法很多，但是最適合用於實現這類效果的是 mask 或者 clip-path，當然，需要配合上 CSS @property。

我們使用 mask 配合上 CSS @property，這個效果其實很簡單，代碼如下：

<div></div>

@property --per {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}

div {
    background: url(https://picsum.photos/400/400?random=100);
    width: 400px;
    height: 400px;
    mask: linear-gradient(#000, #000 var(--per), transparent var(--per), transparent);
    animation: change 3s infinite linear;
}

@keyframes change {
    0%, 60% {
        --per: 100%;
    }
    70%, 100% {
        --per: 0%;
    }
}

核心就在於設定了這樣一個 mask -- linear-gradient(#000, #000 var(--per), transparent var(--per), transparent)，其中 --per 這個 CSS 變數的值表示的就是透明與顯示狀態的一個百分比值。動畫過程中，只需要動態的將這個百分比值從 100% 修改為 0% 即可完成向上遮罩消失動畫。

這樣，我們就得到了這麼個效果：

如果你對 mask 和 CSS @property 的用法還不是很熟悉，建議你先看看這兩篇，補齊一下基礎知識：
奇妙的 CSS MASK
CSS @property，讓不可能變可能

  1. 百葉窗動畫

其次，我們需要實現一個百葉窗動畫效果，像是這樣：

在理解了上面的向上遮罩消失動畫後，其實這裡的百葉窗動畫只是迷你版本的向上遮罩消失動畫。

與上述的代碼完全一致，只是調整一下 mask-size 即可。

@property --per {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}

div {
    background: url(https://picsum.photos/400/400?random=100);
    width: 400px;
    height: 400px;
    mask: linear-gradient(#000, #000 var(--per), transparent var(--per), transparent);
    mask-size: 100px 20px;
    animation: change 3s infinite linear;
}

@keyframes change {
    0%, 60% {
        --per: 100%;
    }
    70%, 100% {
        --per: 0%;
    }
}

註意，上面的代碼與第一段代碼幾乎完全一致，僅僅在於多加了 mask-size: 100px 20px。這樣，我們就快速的得到了百葉窗的切換動畫效果：

  1. 結合向上遮罩消失動畫與百葉窗動畫

有了上述兩個動畫，其實我們只需要把它們結合一下，就可以得到文章一開頭的效果。

完整的代碼如下：

@property --per {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}

div {
    background: url(https://picsum.photos/400/400?random=100);
    width: 400px;
    height: 400px;
    mask: 
        linear-gradient(#000, #000 var(--per), transparent var(--per), transparent),
        linear-gradient(#000, #000 var(--per), transparent var(--per), transparent);
    mask-size: 100px 20px, 100% 100%;
    animation: change 3s infinite linear;
}

@keyframes change {
    0%, 60% {
        --per: 100%;
    }
    70%, 100% {
        --per: 0%;
    }
}

這樣，我們就成功的利用了一種其它方式，還原了文章一開頭的動畫效果：

CodePen Demo -- Image Hover Effect

擴展延伸

當然，掌握了上述動畫的技巧後，我們完全可以進行一些延伸嘗試。

譬如，我們可以把上面 mask 的 linear-gradient() 替換成 radial-gradient()。

原理也是一樣的：


@property --per1 {
  syntax: '<length>';
  inherits: false;
  initial-value: 20px;
}
@property --per2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

div {
    background: url(https://picsum.photos/400/400?random=100);
    width: 400px;
    height: 400px;
    mask: 
        repeating-radial-gradient(#000, #000 var(--per1), transparent var(--per1), transparent 20px),
        radial-gradient(transparent, transparent var(--per2), #000 var(--per2), #000);
    animation: change 3s infinite linear;
}

@keyframes change {
    0%, 60% {
        --per1: 20px;
        --per2: 0%;
    }
    70%, 100% {
        --per1: 0px;
        --per2: 100%;
    }
}

只是，這裡我們用到了兩個 CSS @property 變數。這樣，就實現了一個環形的遞進向外的百葉窗消失動畫：

稍加改造，就能實現 Hover 交互效果：

div {
    cursor: pointer;
    transition:
        --per1 .3s,
        --per2 .3s;
}
div:hover {
  --per1: 0px;
  --per2: 100%;
}

一個非常有意思的 Hover 效果就實現了：

完整的代碼，你也可以戳這裡：CodePen Demo -- Image Hover Effect

最後

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

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

-Advertisement-
Play Games
更多相關文章
  • 這種開發方式你瞭解嗎？
    1.隱私政策是怎麼樣的？收集哪些信息？ 關於Scan Kit的隱私政策及收集的信息，請查看SDK隱私安全說明。 Android：SDK隱私安全說明 iOS：SDK隱私安全說明 2.如何使用多碼識別？多碼模式下如何實現指定條碼？多碼模式的坐標支持返回坐標麽？多碼模式下實現自動放大？ 1）統一掃碼服務支 ...
  • 盤點| 有哪些比較新的好用的React Native 開發工具？
    在App開發過程中，如果想實現動畫效果，可以粗略分為兩種方式。一種是直接用代碼編寫，像平移、旋轉等簡單的動畫效果，都可以這麼乾，如果稍微複雜點，就會對開發工程師的數學功底、圖形圖像學功底有很高的要求。 ...
  • 博客園silence主題修改記錄
    博客園作為一個老牌技術博客網站，有著非常濃郁的游戲開發、引擎開發以及圖形學氛圍。並且沒有像其他網站有難以接受的廣告。 雖說網站主站看著比較老，但還在接受的範圍。並且可以根據自己的喜好來自定義主題。 尋找主題 以下是找的幾個常見的主題，因為是技術博客閱讀體驗是最重要的，所以最終還是選中了silence ...
  • axios傳遞參數的使用
    今天在學習elasticsearch時，遇到一個問題：項目中前端採用的是Vue2+axios，後端的介面採用Restful風格來接收： 關於Resultful風格： 1. GET（SELECT）：從伺服器取出資源（一項或多項）； 2. POST（CREATE）：在伺服器新建一個資源； 3. PUT（ ...
  • 記錄-使用雙token實現無感刷新，前後端詳細代碼
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 前言 近期寫的一個項目使用雙token實現無感刷新。最後做了一些總結，本文詳細介紹了實現流程，前後端詳細代碼。前端使用了Vue3+Vite，主要是axios封裝，服務端使用了koa2做了一個簡單的伺服器模擬。 一、token 登錄鑒權 j ...
  • form-create-designer-naiveui
    基於Naive UI和Form Creat的表單設計器，可以通過拖拽的方式快速創建表單，提高開發者對錶單的開發效率，節省開發者的時間。 ...
  • CSS 設置文字間距
    CSS 設置文字間距 一、設置字元間距 在 CSS 中，可以使用 letter-spacing 屬性來設置字元間距。該屬性控制每個字元之間的距離，可以設置負值來讓字元更接近，也可以設置正值來讓字元之間的距離更遠。 以下是一個示例，將字元間距設置為 0.1em： p { letter-spacing: ...
  • js 工具類
    /*是否帶有小數*/ function isDecimal(strValue ) { var objRegExp= /^\d+\.\d+$/; return objRegExp.test(strValue); } /*校驗是否中文名稱組成 */ function ischina(str) { var ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類