【動畫進階】巧用 CSS/SVG 實現複雜線條光效動畫

来源:https://www.cnblogs.com/coco1s/p/18174403
-Advertisement-
Play Games

最近，群里在討論一個很有意思的線條動畫效果，效果大致如下： 簡單而言，就是線條沿著不規則路徑的行進動畫，其中的線條動畫可以理解為是特殊的光效。 本文，我們將一起探索，看看在不使用 JavaScript/Canvas 的基礎上，使用純 CSS/SVG 的方式，我們可以如何大致的還原上述的線條動畫效果。 ...


最近，群里在討論一個很有意思的線條動畫效果，效果大致如下：

簡單而言，就是線條沿著不規則路徑的行進動畫，其中的線條動畫可以理解為是特殊的光效。

本文，我們將一起探索，看看在不使用 JavaScript/Canvas 的基礎上，使用純 CSS/SVG 的方式，我們可以如何大致的還原上述的線條動畫效果。

基於 SVG 的線條動畫效果

談到線條動畫，尤其是不規則路徑或者是複雜路徑，我們第一時間應該想到的就是 SVG 中的 stroke-dasharray 和 stroke-dashoffset。

這兩個屬性，我們在多篇文章中都有提及，也是非常有意思的線條動畫效果，感興趣的可以一併拓展閱讀：

首先，也是最為重要的，上面的路徑動畫的路徑，本質上是多段線段。而使用 SVG 可以非常輕鬆多端線段效果，像是這樣：

<svg height="100%" width="100%"> xmlns="http://www.w3.org/2000/svg">
    <polyline points="240 10 140 10 140 90 0 90" stroke="#ddd" fill="transparent" stroke-width="2" />
</svg>

這樣，我們就能得到這樣一個多段線段：

接下來，我們就可以利用 stroke-dasharray 來實現多種不同的虛線樣式。

利用與上面同樣路徑的 polyline，我們來實現一個虛線版本：

<svg height="100%" width="100%"> xmlns="http://www.w3.org/2000/svg">
    <polyline class="g-dashed-line" points="240 10 140 10 140 90 0 90" fill="transparent" stroke-width="2" />
</svg>

.g-dashed-line {
  stroke: #fc0;
  stroke-dasharray: 20, 20;
}

就可以得到這麼一個圖形：

當然，這裡可能有人不太瞭解 stroke-dasharray，簡單說明一下。

在 CSS 中可以利用 dashed 關鍵字實現虛線邊框。但是，每段虛線的長度、每段虛線線段的長度是無法控制的，在 SVG 中利用 stroke-dasharray 就可以進行控制。

再看一個簡單的 DEMO：

<svg xmlns="http://www.w3.org/2000/svg">
  <rect class="rect rect1"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect class="rect rect2"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
  <rect class="rect rect3"/>
</svg>

svg {
  width: 250px;
  height: 50px;
  margin-bottom: 20px;
}
.rect {
  width: 100%;
  height: 100%;
  stroke: #673ab7;
  stroke-width: 2;
  fill: transparent;
}
.rect1 {
  stroke-dasharray: 10 10;
}
.rect2 {
  stroke-dasharray: 30 30;
}
.rect3 {
  stroke-dasharray: 50 20;
}

這樣，我們就能得到不同的虛線邊框樣式：

取其中一個，一看就懂：

好，言歸正傳，此時，我們把上面兩條 SVG 線段疊加在一起，就是這麼個效果：

我們只需要再調整一下 stroke-dasharray，讓圖形中只出現一段小段的邊框即可：

.g-dashed-line {
    stroke: #fc0;
    stroke-dasharray: 40, 320;
}

效果如下：

最後，我們再藉助 stroke-dashoffset 實現動畫效果。

那麼，什麼又是 stroke-dashoffset 呢？

預設情況下，虛線的起點位於路徑的起點處，但是通過改變 stroke-dashoffset 值，可以讓虛線從路徑的其他位置開始繪製。

也看一個簡單的例子：

.rect1 {
  stroke-dasharray: 10 20 30 40 50 60;
  stroke-dashoffset: 0;
}
.rect2 {
  stroke-dasharray: 10 20 30 40 50 60;
  stroke-dashoffset: 20px;
}
.rect3 {
  stroke-dasharray: 10 20 30 40 50 60;
  stroke-dashoffset: 40px;
}

在上面，我們的 stroke-dasharray 是一致的，10 20 30 40 50 60 表示邊框和間隔按照 10px 20px 30px 40px 50px 60px 的規律進行，不斷迴圈，只有 stroke-dashoffset 不一致，分別是 0、20px 和 40px。效果如下：

仔細看 3 個圖形，邊框形狀是一致的，就是邊框的起點不一樣，而這，就是 stroke-dashoffset 的作用：

言歸正傳，此時，我們基於 stroke-dashoffset 設置動畫即可，完整的代碼如下：

<div class="g-svg">
  <svg height="100%" width="100%"> xmlns="http://www.w3.org/2000/svg">
    <polyline points="240 10 140 10 140 90 0 90" stroke="#ddd" fill="transparent" stroke-width="2" />
    <polyline class="g-dashed-line" points="240 10 140 10 140 90 0 90" fill="transparent" stroke-width="2" />
  </svg>
</div>

.g-svg {
    width: 240px;
    height: 100px;

    .g-dashed-line {
        stroke: #fc0;
        stroke-dasharray: 40, 320;
        stroke-dashoffset: 0;
        animation: move 2.4s infinite linear;
    }
}

@keyframes move {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -320;
    }
}

這裡，我們其實只是控制了 .g-dashed-line 這個 SVG 圖形的虛線的 offset 偏移距離，視覺上形成了路徑動畫效果：

錄製 GIF 圖的軟體顏色識別有點問題，圖中運動過程中有一些灰色塊，實際效果不會出現這種問題~

當然，這個方案的最大的問題在於，基於 stroke-dasharray 實現的邊框線條，只能是一種顏色值，因此，我們無法實現漸變色的線條效果。

不過，我們倒是可以另闢蹊徑，譬如，通過 filter: drop-shadow()給整個線條添加上陰影：

或者，通過再疊加一層線條動畫，只給線條的頭部，添加上陰影效果：

完整的代碼，你可以戳這裡：CodePen Demo -- Line Animation Effect

通過角向漸變配合 MASK 實現漸變線條

當然，如果我們就是想要漸變彩色的線條動畫效果，譬如這樣，那該怎麼辦呢：

CSS 能實現嗎？當然可以。

在很久之前的一篇文章 -- CSS 奇思妙想邊框動畫 中，我們介紹了一種非常有意思的邊框效果：

效果圖和示意圖如下，旋轉一個部分角向漸變的圖形，中間的部分使用另外一個偽元素進行遮罩（或者也可以使用 mask 進行裁剪），只漏出線條部分即可：

完整的代碼，可以看這裡：CodePen Demo -- Rotating border 3

看，這裡不就是漸變色的線條動畫效果麽？

當然，可能有同學還會有疑問，我們再放另外一個示意圖，一看就懂。

首先，利用角向漸變實現這樣一個背景：

div {
    position: relative;
    
    &::after {
        content: '';
        position: absolute;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background: conic-gradient(#399953, #399953 25%, #fbb300 25%, #fbb300 50%, #d53e33 50%, #d53e33 75%, #377af5 75%, #377af5);
    }
}

註意，這裡運用了元素的偽元素生成的這個圖形，並且，寬高都是父元素的 200%，超出則 overflow: hidden。

接下來，給它加上旋轉：

div {
    &::after {
        animation: rotate 4s linear infinite;
    }
}

@keyframes rotate {
	100% {
		transform: rotate(1turn);
	}
}

看看效果：

最後，再利用 mask，將中間區域進行裁剪：

div {
    mask: 
        linear-gradient(#000, #000 3px, transparent 3px, transparent calc(100% - 3px), #000 calc(100% - 3px), #000),
        linear-gradient(90deg, #000, #000 3px, transparent 3px, transparent, transparent calc(100% - 3px), #000 calc(100% - 3px), #000);
}

這樣，一個 Nice 的邊框動畫就出來了

當然，用 mask 的好處是中間是鏤空透明的，如果對 mask 不太熟悉的同學，也可以把 mask 方案替換成用另外一個偽元素疊加進行遮擋的方式。

在理解了上述的基本技巧之後，我們可以再對漸變的顏色做一些調整，我們將 4 種顏色變成 1 種顏色：

div::after {
    content: '';
    position: absolute;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(#399953, #399953 25%, transparent 25%, transparent);
}

得到這樣一個圖形：

同樣的，讓它旋轉一起，一個單色追逐的邊框動畫就出來了：

好，最後，我們把這個純色替換漸變色，再給父元素加一個底色，完整的代碼：

div {
    position: relative;
    width: 300px;
    height: 240px;
    background: #ddd;
    overflow: hidden;
    mask: 
        linear-gradient(#000, #000 3px, transparent 3px, transparent calc(100% - 3px), #000 calc(100% - 3px), #000),
        linear-gradient(90deg, #000, #000 3px, transparent 3px, transparent, transparent calc(100% - 3px), #000 calc(100% - 3px), #000);
    
    &::after {
        content: '';
        position: absolute;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background: conic-gradient(#fc0, #ff5722 25%, transparent 25%, transparent);
        animation: rotate 4s linear infinite;
    }
}
@keyframes rotate {
	100% {
		transform: rotate(1turn);
	}
}

這樣，我們就得到了一個酷炫的漸變色線條邊框動畫：

完整的代碼，你可以戳這裡：CodePen Demo -- Gradient Line Animation

仔細看這個圖形，如果只取其中斜對角的一半，不就是我們想要的效果了嗎？

當然，上述 DEMO 中利用偽元素進行旋轉的代碼，還可以進行優化。我們可以利用 CSS @property 變數動畫替換整個元素的旋轉，從而得到更優雅的代碼。如此一來，完整的代碼，就變成這樣了：

<div class="g-gradient"></div>

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 199deg;
}
.g-gradient {
    width: 200px;
    height: 100px;
    background: #ddd;
    mask: linear-gradient(#000, #000 2px, transparent 2px, transparent),
        linear-gradient(90deg, #000, #000 2px, transparent 2px, transparent);
    
    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: conic-gradient(from var(--angle), transparent, #fc0, #ff5722 45deg, transparent 45deg);
        animation: angleChange 2.4s infinite ease-in-out;
    }
}

@keyframes angleChange {
    0% {
        --angle: 199deg;
    }
    100% {
        --angle: 420deg;
    }
}

這樣，我們就成功的實現了，漸變色的線條動畫：

當然，有的時候我們的線段不止兩段，可能有多段，也無需擔心，在掌握了上述的技巧後， 我們通過動畫拼接，也可以很容易的得到多段線段的漸變色線條動畫效果：

完整的代碼，你可以戳這裡：CodePen Demo -- Line Animation Effect

最後

兩種方法各有優劣，感興趣的可以趕緊動手嘗試一下！

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

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

-Advertisement-
Play Games
更多相關文章
  • Linux基礎之網路管理
    目錄網路配置服務管理防火牆配置文件下載wget和curl網路連接信息netstat和ss Linux 網路管理涉及一系列任務，包括配置網路介面、設置IP地址、管理網路服務和防火牆等。 網路配置 網卡命名 根據網路介面定義設備： ethX 傳統的乙太網介面命名方式，其中 X 通常是數字，如 eth0 ...
  • 大數據面試SQL每日一題系列：最高峰同時線上主播人數。位元組，快手等大廠高頻面試題
    大數據面試SQL每日一題系列：最高峰同時線上主播人數。位元組，快手等大廠高頻面試題 之後會不定期更新每日一題sql系列。 SQL面試題每日一題系列內容均來自於網路以及實際使用情況收集，如有雷同，純屬巧合。 1.題目 問題1：如下為某直播平臺各主播的開播及關播時間數據明細，現在需要計算該平臺最高峰期同時 ...
  • mysql安裝使用教程
    一、下載mysql安裝包 官網：https://dev.mysql.com/downloads/mysql/ 預設會跳轉到最新版本的下載頁面，也可以在舊版本集中選擇需要安裝的版本。 MSI Installer是安裝程式，ZIP Archive是壓縮包形式。 二、安裝mysql MSI安裝程式會有圖形 ...
  • Redis開源社區持續壯大，華為雲為Valkey項目註入新的活力
    摘要：作為Valkey社區的Technical Steering Committee member，華為雲將持續參與社區建設。 一、背景 今年3月21日，Redis Labs宣佈從Redis 7.4版本開始，將原先比較寬鬆的BSD源碼使用協議修改為RSAv2和SSPLv1協議，意味著 Redis在O ...
  • SQL Server實戰四：查詢資料庫的數據
    本文介紹基於Microsoft SQL Server軟體，實現資料庫表中多種數據查詢方法的具體操作。 目錄1 指定列或全部列查詢——查詢S表學生記錄2 指定列或全部列查詢——查詢學生姓名與出生年份3 按條件查詢及模糊查詢——查詢成績不及格學生學號4 按條件查詢及模糊查詢——查詢20-23歲間學生姓名 ...
  • kafka核心概念Broker、Topic、Partition和Replication
    在Kafka中，Broker、Topic、Partition和Replication是四個核心概念，它們各自扮演了不同的角色並共同協作以確保數據的可靠性、可擴展性和高性能。以下是關於這四個概念的詳細解釋： Broker（代理） * Broker是Kafka集群中的一個節點，負責存儲和轉發消息。Kaf ...
  • 說說你對盒子模型的理解?
    一、是什麼 當對一個文檔進行佈局（layout）的時候，瀏覽器的渲染引擎會根據標準之一的 CSS 基礎框盒模型（CSS basic box model），將所有元素表示為一個個矩形的盒子（box） 一個盒子由四個部分組成：content、padding、border、margin content，即 ...
  • 十分鐘，帶你瞭解 Vue3 的新寫法
    本文的目的，是為了讓已經有 Vue2 開發經驗的 人 ，快速掌握 Vue3 的寫法。 因此， 本篇假定你已經掌握 Vue 的核心內容 ，只為你介紹編寫 Vue3 代碼，需要瞭解的內容。 一、Vue3 里 script 的三種寫法 首先，Vue3 新增了一個叫做組合式 api 的東西，英文名叫 Com ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類