現代 CSS 解決方案:CSS 原生支持的三角函數

来源:https://www.cnblogs.com/coco1s/archive/2023/05/25/17430324.html
-Advertisement-
Play Games

在 CSS 中,存在許多數學函數,這些函數能夠通過簡單的計算操作來生成某些屬性值,例如 : * calc():用於計算任意長度、百分比或數值型數據,並將其作為 CSS 屬性值。 * min() 和 max():用於比較一組數值中的最大值或最小值,也可以與任意長度、百分比或數值型數據一同使用。 * c ...


在 CSS 中,存在許多數學函數,這些函數能夠通過簡單的計算操作來生成某些屬性值,例如 :

  • calc():用於計算任意長度、百分比或數值型數據,並將其作為 CSS 屬性值。
  • min() 和 max():用於比較一組數值中的最大值或最小值,也可以與任意長度、百分比或數值型數據一同使用。
  • clamp():用於將屬性值限制在一個範圍內,支持三個參數:最小值、推薦值和最大值。

現代 CSS 解決方案:CSS 數學函數一文中,我們詳細介紹了

  • calc()
  • min()
  • max()
  • clamp()

四個數學函數。

而本文,將給大家介紹一下最近各大瀏覽器也逐漸開始原生支持的三角函數:

  • sin()
  • cos()
  • tan()

CSS 三角函數語法介紹

首先,我們來看看 CSS 三角函數的使用方式:

.box {
  /* 設置元素的寬度為 sin(30deg) 的值 */
  width: calc(sin(30deg) * 100px);

  /* 設置元素的高度為 cos(45deg) 的值 */
  height: calc(cos(45deg) * 100%);

  /* 設置元素的透明度為 tan(60deg) 的值 */
  opacity: calc(tan(60deg));
}

上述代碼中,我們使用了 calc() 函數進行了計算,然後通過 sin()、cos() 和 tan() 函數對計算結果進行了進一步的處理,從而實現了不同的效果。

需要註意的是,三角函數在 CSS3 中僅對弧度(radian)單位進行支持。如果想要在開發中使用三角函數,可以藉助轉換函數 deg() 和 rad() 將角度(degree)和弧度進行轉換。

CSS3 的這些函數使得開發者可以更加方便處理一些複雜的數學問題,增強了 CSS 的表現力。

三角函數的運動軌跡

三角函數的運用,更多的是在動畫當中。以正弦、餘弦函數為例,其圖形如下:

我們通過一個簡單的例子,還原三角函數的圖形,以此來感受三角函數的作用。首先,我們實現一個黑色圓球:

<div class='g-single'></div>
.g-single {
    width: 20px;
    height: 20px;
    background: #000;
    border-radius: 50%;
}

效果如下:

我們可以通過 transfrom,藉助 CSS @property 屬性,來構造一個三角函數的使用場景:

.g-single {
    width: 20px;
    height: 20px;
    background: #000;
    border-radius: 50%;
    animation: move 5s infinite ease-in-out;
    transform: translate(
        calc(var(--dis) - 40vw),
        calc(5 * sin(var(--angle)) * 1em)
    );
}

@keyframes move {
    0% {
        --dis: 0px;
        --angle: 0deg;
    }
    100% {
        --dis: 80vw;
        --angle: 1080deg;
    }
}

上述的核心在於這一段代碼 -- transform: translate(calc(var(--dis) - 40vw), calc(5 * sin(var(--angle)) * 1em)),內部使用了兩個 CSS @property 變數:

  1. x 軸方向是 0px80vw 的水平位移動畫
  2. y 軸方向是 5 * sin(0deg) * 1em5 * sin(1080deg) * 1em 的豎直動畫

通過動畫,動態的修改這兩個變數的值,我們就可以得到一個三角函數曲線動畫圖形:

如果我們,設定多個一模一樣的小球,同一個運動軌跡,設定不同的 animation-delay,效果會上怎麼樣呢?

<ul class="g-multi">
  <li> </li>
  // ... 一共 80 個 li
  <li> </li>
</ui>
li {
    animation: move 5s infinite ease-in-out;
    transform: translate(
        calc(var(--dis) - 40vw),
        calc(5 * sin(var(--angle)) * 1em);
}
@for $i from 1 to $count {
    li:nth-child(#{$i}) {
        animation-delay: #{$i * 5 / $count * -1s};
    }
}
@keyframes move {
    0% {
        --dis: 0px;
        --angle: 0deg;
    }
    100% {
        --dis: 80vw;
        --angle: 1080deg;
    }
}

這樣,就得到了這麼一個動畫,非常的類似三角函數動畫的曲線:

完整的代碼,你可以戳這裡:CodePen Demo -- CSS Cos/Sin Math function

快速實現圓弧軌跡動畫

在之前,我們想實現一個圓弧動畫,如下所示,還是稍微有點點麻煩的:

有了三角函數之後,類似的動畫,可以節省部分代碼實現:

<div></div>
@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.g-single {
    background: #000;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    animation: move 3s infinite linear;
    transform: translate(
        calc(sin(var(--angle)) * 10vmin),
        calc(cos(var(--angle)) * 10vmin)
    );
}

@keyframes move {
    0% {
        --angle: 0deg;
    }
    100% {
        --angle: 360deg;
    }
}

核心就在於 transform: translate(calc(sin(var(--angle)) * 10vmin), calc(cos(var(--angle)) * 10vmin));,簡化一下這段代碼,表達式為:

  • transform: translate(sinX, conX),其中 X 為角度變化

如此,我們只需要動態設置 X 從 0deg360deg 的變化即可,就可以得到一個圓形動畫效果:

完整的代碼,你可以戳這裡:CodePen Demo -- CSS Cos/Sin Math function - arc animation

基於這個技巧,我們可以嘗試實現一個旋轉的 Loading 動畫,代碼也非常簡單:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
ul {
    position: relative;
}
li {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: move 3s infinite ease-in-out;
    transform: translate(
        calc(sin(var(--angle)) * 60px),
        calc(cos(var(--angle)) * 60px)
    );
}
@for $i from 1 to 11 {
    li:nth-child(#{$i}) {
        animation-delay: #{ $i * -0.15 }s;
        background: #{hsl(100 + $i * 15, 80%, 60%)};
    }
}
@keyframes move {
    0% {
        --angle: 0deg;
    }
    100% {
        --angle: 360deg;
    }
}

藉助了 SASS 完成了部分重覆性代碼,核心就是讓小圓以不同的速率進行旋轉動畫,結果如下:

完整的代碼,你可以戳這裡:CSS Cos/Sin Math function - Loading animation

嘗試使用三角函數實現波浪線

那麼,三角函數還有什麼作用嗎?

我們來嘗試點新奇的,藉助三角函數實現曲線(波浪線)。

box-shadow 足夠瞭解的同學應該知道,box-shadow 是支持多重陰影的,藉助這個特性,出現了很多單標簽,藉助 box-shadow 來繪圖的案例。

藉助三角函數、以及box-shadow 是支持多重陰影的這兩個特性,我們就可以利用它們來實現波浪線。

當然,可以還需要藉助 SASS 簡化手動書寫的代碼量。我們來看一個 DEMO:

<div></div>
<div></div>
<div></div>
@function shadowSet($vx, $vy, $color) {
    $shadow: 0 0 0 0 $color;

    @for $i from 0 through 50 {
        $x: calc(2 * sin(#{$i * 15 * 1deg}) * #{$vy});
        $y: $i * $vy;

        $shadow: $shadow, #{$x} #{$y} 0 0 $color;
    }

    @return $shadow;
}

div {
    margin: auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f00;
    box-shadow: shadowSet(3px, 3px, #f00);
}
div:nth-child(2) {
    width: 6px;
    height: 6px;
    background: #fc0;
    box-shadow: shadowSet(3px, 3px, #fc0);
}
div:nth-child(3) {
    width: 4px;
    height: 4px;
    background: #000;
    box-shadow: shadowSet(2px, 2px, #000);
}

這樣,我們就能得到 3 條波浪線:

單獨看其中一個,其實是這樣一坨 box-shadow 代碼:

好吧,這個方法確實一定程度上彌補了之前 CSS 無法有效繪製波浪線的缺陷,但是,缺點也非常明顯,編譯後的代碼量太多了!

完整的代碼,你可以戳這裡:CSS Cos/Sin Math And box-shadow

曲線創意構想

有了繪製曲線的能力,我們就能利用它在 CSS 中創造許多有美感、藝術性的效果。

我們可以嘗試使用這些曲線,來製作書簽圖案:

代碼也不複雜,我就不貼完整的代碼了,感興趣的可以戳這裡:CodePen Demo - CSS Cos/Sin Math And box-shadow - bookmark

熟悉我的讀者一定對 CSS-doodle 不陌生,袁川老師,也就是 CSS-doodle 庫的作者,在他的 Codepen 首頁背景板中,使用的就是使用了三角函數實現的一副純 CSS 畫作:

Codepen Demo -- border-radius

我之前也嘗試使用三角函數,實現了一副醜一點的:

Codepen Demo -- CSS-Doodle fish

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

-Advertisement-
Play Games
更多相關文章
  • CSS中,*的作用是通配表示“全部”。遺憾的是,並沒有一種通配元素名的方法。 例如,我有好幾個東西class都標記為了my-element-序號,就像這樣: ```html ... ``` 我現在希望讓所有這些class的東西都應用同一個css規則。可惜,css並不支持這麼一種寫法: ```css ...
  • 近日在編寫一個小程式,將日記功能移植到小程式中,雖然在手機端寫日記一般用不到Markdown,但是仍想在小程式中查看在電腦端寫的Markdown格式的內容,如代碼塊等。 經過查詢,找到一個被廣泛使用的解決方案是towxml 現記錄如下: > 首先將代碼克隆下來 ```js git clone htt ...
  • > 效果預覽 ![調節頁面.gif](https://wansherry.com/api/fc01e2c58219126e20367e856ebad24c.gif) > 關鍵代碼 ```javascript //調節視窗大小 useEffect(() => { if (conref.current) ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 在業務中,有這麼一種場景,表格下的某一列 ID 值,文本超長了,正常而言會是這樣: 通常,這種情況都需要超長省略溢出打點,那麼,就會變成這樣: 但是,這種展示有個缺點,3 個 ID 看上去就完全一致了,因此,PM 希望能夠實現頭部省略打點 ...
  • 隨著項目的發展,前端SPA應用的規模不斷加大、業務代碼耦合、編譯慢,導致日常的維護難度日益增加。同時前端技術的發展迅猛,導致功能擴展吃力,重構成本高,穩定性低。因此前端微服務應運而生。 ...
  • 1. 動畫 動畫(animation)是CSS3中具有顛覆性的特征之一,可以通過設置都各節點來精確控制一個或一組動畫,常用來實現複雜的動畫效果。 相比較過度,動畫可以實現更多變化,更多控制,連續自動播放等效果。 1.1 動畫的基本使用 製作動畫分為兩步: (1)先定義動畫。 (2)再使用(調用)動畫 ...
  • Iframe是一個歷史悠久的HTML元素,根據MDN WEB DOCS官方介紹,Iframe定義為HTML內聯框架元素,表示嵌套的Browsing Context,它能夠將另一個HTML頁面嵌入到當前頁面中。Iframe可以廉價實現跨應用級的頁面共用,並且具有使用簡單、高相容性、內容隔離等優點,因此... ...
  • 比如老王我,用npm init新建一個包,改把改把,然後來個npm publish,so easy ✌️!Too young too naive, baby
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...