使用CSS創建定向點燃的3D按鈕-css教學-PHP中文網

使用CSS創建定向點燃的3D按鈕

>我不太確定我是如何偶然發現的。但是有些事情使我進入了這條推文：

>
是否有人與CSS進行了這種定向的照明光標相互作用？ pic.twitter.com/zll7sk6kw5
- 傑德·布里奇斯（@jedbridges）2020年7月1日

對我來說，這是一個挑戰。

>按鈕設計整潔。但是我不想直接副本。相反，我們決定製作一個“ Twitter”按鈕。這個想法是，我們創建一個幾乎透明的按鈕，上面有一個社交圖標。然後那個社交偶像在下面投射了一個陰影。將我們的鼠標移到按鈕上，從而在其上閃閃發光。按下按鈕將其按下表面。這是最終結果：

>定向照明3D CSS Twitter按鈕？ https://t.co/qpfzewumey通過@codepen pic.twitter.com/zwfwtpaixo
- jhey？（@jh3yy）2021年1月30日
在本文中，我們將研究如何製作。很酷的事情是，您可以將圖標交換為您想要的任何東西。

鑰匙要點

>利用CSS和HTML創建一個具有動態照明效果的3D按鈕，該效果響應光標運動，增強用戶交互。

通過操縱CSS屬性，例如`transform-preserve-3d;`並使用變量來控制深度和透視圖。通過使用``aria-hidden''屬性來增強可訪問性，並確保通過屏幕讀取器可感知交互元素。
>應用CSS過渡和轉換來模擬物理互動，例如按下按鈕，將現實主義添加到用戶體驗中。
>使用JavaScript進行動態效果，例如基於光標位置在按鈕上移動光線，並帶有用於平滑動畫的GSAP。

>在這裡，我們創建了一個用於渲染Twitter圖標的SVG的混合蛋白。如果我們像這樣調用，這將渲染Twitter圖標：

這樣做將為我們提供一個很大的Twitter圖標。

看到筆 1。通過站點點渲染圖標（@sitepoint）在Codepen上。

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

登入後複製

由於社交圖標集傾向於使用相同的“ 0 0 24 24”視圖框，因此我們可以進行標題和路徑參數：>

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

登入後複製

然後我們的Twitter圖標變為

<span><span>+icon()</span>
</span>

登入後複製

，但是，如果我們有許多要使用或重複的圖標，我們可以將其傳遞給對像中的路徑，然後將路徑存儲在對像中：

這可能是創建圖標混合物重複使用的整潔方法。對於我們的例子來說，這有點過分，但值得注意。

<span><span>mixin icon(title, path)</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= title
</span>    <span>path<span><span>(d=path)</span></span>
</span>

登入後複製

現在，我們需要對我們的按鈕進行一些標記。

注意到可訪問性總是很好。我們可以通過檢查瀏覽器開發人員工具中的

<span><span>+icon('Twitter Icon', 'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z')</span>
</span>

登入後複製

可訪問性

面板來檢查我們的按鈕發出的內容。

使用CSS創建定向點燃的3D按鈕 >為我們的按鈕文本介紹並以艾里亞隱藏的方式隱藏圖標可能是個好主意。我們也可以隱藏跨度文本，同時使其可用於屏幕讀取器：>

>我們有不同的選擇來應用那些隱藏的屬性。我們將使用的一個是更改混合代碼以應用Aria Hinded：

<span><span>mixin icon(key)</span>
</span>  <span>-
</span>    <span>const PATH_MAP = {
</span>      <span>Twitter<span>:</span> "M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
</span>    }
  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= <span><span>`<span>${key}</span> Icon`</span></span>
</span>    <span>path<span><span>(d=<span>PATH_MAP[key]</span>)</span></span>
</span>
<span><span>+icon('Twitter')</span>
</span>

登入後複製

>與PUG一起使用的另一種整潔的方式是將所有屬性通過混合蛋白。這在我們只想通過某些屬性的情況下很有用：

<span><span>.scene</span>
</span>  <span>button<span>.button</span>
</span>    <span>span<span>.button__shadow</span>
</span>      <span><span>+icon('Twitter')</span>
</span>    <span>span<span>.button__content</span>
</span>      <span><span>+icon('Twitter')</span>
</span>      <span>span<span>.button__shine</span>
</span>

登入後複製

如果我們再次檢查

可訪問性

>面板，我們的按鈕只會讀取“ Twitter”。這就是我們想要的！

<span><span>.scene</span>
</span>  <span>button<span>.button</span>
</span>    <span>span<span>.button__shadow</span>
</span>      <span><span>+icon('Twitter')</span>
</span>    <span>span<span>.button__content</span>
</span>      <span>span<span>.button__text</span> Twitter
</span>      <span><span>+icon('Twitter')</span>
</span>      <span>span<span>.button__shine</span>
</span>

登入後複製

樣式 >這是您來的部分 - 我們如何設計東西。首先，我們將其放在：

中

>使我們能夠為按鈕創建所需的3D變換。嘗試在最終演示中關閉它，您會看到一切都破裂了。

>讓我們從眼睛隱藏跨度文本。我們可以在許多方面做到這一點。一種推薦的方法是從我們的眼中隱藏元素，而不是ScreenReader的元素是使用這些樣式：

<span><span>mixin icon(key)</span>
</span>  <span>-
</span>    <span>const PATH_MAP = {
</span>      <span>Twitter<span>:</span> "...path code"
</span>    }
  <span>svg<span>.button__icon<span>(role=<span>'img' aria-hidden="true" xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= <span><span>`<span>${key}</span> Icon`</span></span>
</span>    <span>path<span><span>(d=<span>PATH_MAP[key]</span>)</span></span>
</span>

登入後複製

>在開始使用按鈕之前，我們將傾斜場景。我們可以使用轉換來做到這一點。在這裡，我們將轉換帶入我們想要的位置。我花了一些時間在現場流上修補值，以使其接近原件：>

>您也會注意到大小變量。我們將使用CSS變量為按鈕驅動某些東西。這將使修補值和效果的修補使其方便。通常，我們將它們放在需要的範圍之下。但是，對於這樣的演示，將它們放在：root處於我們文件頂部，使我們更容易玩。

<span><span>mixin icon(key)</span>
</span>  <span>-
</span>    <span>const PATH_MAP = {
</span>      <span>Twitter<span>:</span> "...path code"
</span>    }
  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span><span>&attributes(attributes)</span></span>
</span>    <span>title= <span><span>`<span>${key}</span> Icon`</span></span>
</span>    <span>path<span><span>(d=<span>PATH_MAP[key]</span>)</span></span>
</span>

登入後複製

這些是我們正在使用的變量，當我們構建按鈕時它們會很有意義。

<span>* {
</span>  <span>transform-style: preserve-3d;
</span><span>}
</span>

登入後複製

按鈕

>讓我們繼續使用該按鈕！按鈕元素將填充場景元素。我們本可以在按鈕上使用尺寸並直接轉換。但是，如果我們要介紹其他按鈕和元素，我們就必須對其進行更改和大小。總體而言，這是CSS值得關注的事情。嘗試使您的容器元素決定佈局：

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

登入後複製

在這裡我們剝離按鈕樣式。這給了我們這個。

看到筆 9。按sitepoint（@sitepoint）按台式按鈕樣式在Codepen上。

接下來，我們需要為按鈕內容和陰影創建一個常見的起點。我們可以通過給出每個元素絕對定位來做到這一點。該內容將根據我們之前定義的深度變量具有3D翻譯：>

>請注意我們也如何使用-radius變量。

<span><span>+icon()</span>
</span>

登入後複製

看到筆 10。通過站點點（@SitePoint）給按鈕深度在Codepen上。

>在此階段很難區分兩個圖標。現在是為它們設計的好時機。我們可以應用一些基本的圖標樣式，並為每個SVG圖標使用示波器填充：>

它到達那裡！不過，目前這些圖標的尺寸不一樣。我們將做到這一點。

看到筆 11。按sitepoint（@SitePoint）應用示波器填充在Codepen上。

<span><span>mixin icon(title, path)</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= title
</span>    <span>path<span><span>(d=path)</span></span>
</span>

登入後複製

>讓我們按下按鈕。這部分真的很快集成：

就是這樣！使用範圍的CSS變量，我們說刪除Z軸翻譯：Active。將過渡添加到轉換會阻止其如此瞬間。

看到筆 12.按下：通過SitePoint（@SitePoint）活動在Codepen上。

>剩下要做的就是樣式按鈕層和光澤。讓我們從陰影開始：

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

登入後複製

>這裡的另一種範圍。我們說的是，當我們按下按鈕時，陰影不再模糊。為了模糊陰影，我們將CSS過濾器屬性與模糊過濾器一起使用 - 我們在CSS變量中定義的值。使用-blur變量播放並查看會發生什麼。

看到筆 13。減少懸停在懸停點的模糊（@sitepoint）在Codepen上。

對於內容層，我們將使用背景顏色，然後應用背景過濾器。就像過濾器一樣，背景過濾器是我們將視覺效果應用於元素的一種方式。當前常見的用例是將Blur用於“玻璃塑料”：>

<span><span>+icon()</span>
</span>

登入後複製

我們使用-blur的值並將過渡應用於背景過濾器。由於我們在：Active的方式上範圍範圍內的變量：我們幾乎可以免費獲得過渡。為什麼溢出：隱藏？我們預計將在按鈕周圍移動的光澤元素。不過，我們不希望它在外面徘徊。

看到筆 14. sitepoint的樣式內容層（@SitePoint）在Codepen上。

現在，拼圖的最後一部分 - 光線閃耀。這就是導致圖標的大小不同的原因。因為它沒有樣式，所以它會影響佈局。讓我們給它一些樣式：

<span><span>mixin icon(title, path)</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= title
</span>    <span>path<span><span>(d=path)</span></span>
</span>

登入後複製

絕對定位將整理圖標尺寸。施加邊框半徑將使聚光燈成為聚光燈。我們再次使用過濾器給出模糊的斑點效果。您會注意到，我們在那裡的末端將亮度過濾器鏈接在一起，以使事物變得模糊。

看到筆 15.造型劃分sitepoint（@sitepoint）在Codepen上。

使用3D翻譯可確保將光線坐在按鈕上方，它將可以做到。這樣，就沒有機會與其他元素進行Z戰鬥。

>這就是我們目前需要的全部。現在是時候進行某些腳本了。

>腳本

>為了方便起見，我們將在這裡使用Greensock。他們對我們想要的東西有一些整潔的公用事業。但是，我們可以通過Vanilla JavaScript取得相同的結果。因為我們使用的是帶有“模塊”類型的腳本，所以我們可以利用Skypack。

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

登入後複製

>現在我們準備開始修補。我們希望我們的按鈕響應指針運動。我們想要的第一件事是翻譯光澤，就好像它遵循了我們的指針一樣。第二個是根據我們的指針在位置移動按鈕。

>讓我們抓住所需的元素，並在文檔上設置一些基本的事件偵聽器：>

嘗試在此演示中移動指針，以查看我們將返回x和y的貴重物品：

<span><span>+icon()</span>
</span>

登入後複製

看到筆 16.抓取元素並按SitePoint（@SitePoint）創建事件偵聽器在Codepen上。

這是最棘手的位。我們需要一些數學才能確定光澤位置。首次重置後，我們將翻譯光澤。我們需要首先更新Shine Styles以適應它。我們正在使用範圍的CSS變量-X和-Y。我們給他們一個-150的後備，因此演示負載時，他們將不再射擊：

然後，在我們的更新功能中，我們計算了Shine的新位置。我們將其基於按鈕大小的百分比。我們可以通過從我們的指針位置減去按鈕位置來計算這一點。然後，我們將其除以位置。要結束，乘以200，以獲得一個百分比：

<span><span>mixin icon(title, path)</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= title
</span>    <span>path<span><span>(d=path)</span></span>
</span>

登入後複製

例如，pos_x：

<span><span>+icon('Twitter Icon', 'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z')</span>
</span>

登入後複製

抓取指針位置x。

我們乘以200，因為光澤是按鈕的一半。這個特定部分很棘手，因為我們正在嘗試跟踪指針並將其映射到3D空間中。為了將其應用於按鈕，我們可以使用gsap.set設置這些CSS變量。這是一種GSAP方法，可作為零秒之間的補間。這對於在元素上設置值特別有用：

>，但是，如果我們想進一步邁出一步，我們可以使用GSAP的QuickSetter，這對於在現實世界中的性能更好，我們正在進行大量更新：

>使我們的更新功能看起來像這樣：

<span><span>mixin icon(key)</span>
</span>  <span>-
</span>    <span>const PATH_MAP = {
</span>      <span>Twitter<span>:</span> "M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"
</span>    }
  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= <span><span>`<span>${key}</span> Icon`</span></span>
</span>    <span>path<span><span>(d=<span>PATH_MAP[key]</span>)</span></span>
</span>
<span><span>+icon('Twitter')</span>
</span>

登入後複製

<span><span>mixin icon()</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title Twitter icon
</span>    <span>path<span><span>(d=<span>'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z'</span>)</span></span>
</span>

登入後複製

遵循指針的準確性將需要更多的計算才能確切。與此演示一起玩，該演示可以看到按鈕上的溢出，並且光澤更為突出。您可以看到Shine Element如何丟失其跟踪。

看到筆 17。按SitePoint（@SitePoint）翻譯Shine Playground 在Codepen上。

這個演示將所有內容都放在了應該的位置。

看到筆 18。按SitePoint（@SitePoint）翻譯光澤在Codepen上。

>最後一個功能。讓我們移動按鈕以增加觸摸。在這裡，我們將基於指針位置的按鈕的換檔。但是，我們將限制其運動。為此，我們可以使用另一個GSAP實用程序。我們將使用maprange。這使我們可以將一組值映射到另一組值。然後，我們可以傳遞一個值，然後將映射的值返回。

首先，我們將定義運動的限制。這將是按鈕大小的百分比：

<span><span>+icon()</span>
</span>

登入後複製

現在，在我們的更新功能中，我們可以計算移位百分比。我們通過將窗口寬度映射到極限上來做到這一點。我們輸入指針位置以使映射百分比返回：

<span><span>mixin icon(title, path)</span>
</span>  <span>svg<span>.button__icon<span>(role=<span>'img' xmlns='http://www.w3.org/2000/svg' viewbox='0 0 24 24'</span>)</span></span>
</span>    <span>title= title
</span>    <span>path<span><span>(d=path)</span></span>
</span>

登入後複製

在此塊中，我們將0範圍映射到窗口。 InnerWidthto -10至10。通過指針位置X將為我們提供-10至10之間的值。然後我們可以將該百分比移動應用於我們的按鈕。我們對垂直偏移也這樣做，這為我們提供了以下更新函數：

<span><span>+icon('Twitter Icon', 'M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z')</span>
</span>

登入後複製

就是這樣！

這就是您如何創建帶有CSS和一些腳本的定向點亮的3D按鈕。很酷的事情是我們可以相對輕鬆地進行更改。

對於最終演示，我添加了一些額外的詳細信息並更改了圖標。您可能會認識到它。

看到筆 20。站點點按sitepoint（@sitepoint）在Codepen上。

一如既往，感謝您的閱讀。想看更多嗎？快來在Twitter上找到我或查看現場流！

經常詢問有關使用CSS

創建定向點亮的3D按鈕的問題

>如何使用CSS創建一個3D按鈕，該CSS單擊時會更改？

創建一個3D按鈕，該按鈕在單擊時會更改時，涉及使用：Active Pseudo-class在CSS中。當用戶激活該元素時，該偽級用於設計元素。例如，單擊按鈕時可以更改按鈕的顏色，大小或位置。這是一個簡單的示例：

.button：active {
background-color：＃3e8e41;
box-shadow：0 5px＃666;
transform：translatey（translatey（4px ）; }
在此示例中，單擊時，按鈕的背景顏色會更改為不同的綠色陰影。盒子陰影屬性添加了陰影效果，轉換屬性將按鈕稍微向下移動。
>

>如何為我的3D按鈕添加懸停效果？可以使用CSS中的懸停偽級來實現3D按鈕。當鼠標指針越過時，該偽級用於樣式元素。您可以更改顏色，尺寸或懸停在按鈕中的陰影。這是一個簡單的示例：

.button：hover {

背景色：＃3e8e41; box-shadow：0 5px＃666;
}
在此示例中，懸停在懸停時，按鈕的背景顏色會更改為不同的綠色陰影，並添加了陰影效果。
>
>如何使我的3D按鈕能夠響應？

使您的3D按鈕響應能力涉及使用媒體CSS中的查詢。媒體查詢允許您為不同的設備或屏幕尺寸應用不同的樣式。例如，您可以根據屏幕尺寸更改按鈕的大小或位置。這是一個簡單的示例：

@media屏幕和（最大寬度：600px）{

> .button { width：100％;
padding：20px;
}
}
在此示例中，按鈕的寬度設置為100％，並且當屏幕尺寸為600px或更小時時，填充物會增加。
如何為3D按鈕添加過渡效果？使用CSS中的過渡屬性可以實現在3D按鈕中添加過渡效果。此屬性允許您指定效果的速度。例如，您可以使顏色變化或陰影逐漸出現。這是一個簡單的示例：

.button {
過渡：背景色0.5s易於寬鬆，盒子遮蓋0.5s sele; }>在此示例中，背景顏色和陰影在0.5秒的時間內逐漸更改。

>如何創建一個帶有圓角的3D按鈕？

創建一個帶有圓角的3D按鈕涉及在CSS中使用Border-Radius屬性。此屬性使您可以將圓形邊界添加到元素中。例如，您可以使按鈕的拐角圓。這是一個簡單的示例：

.button {
border-radius：12px;
}
在此示例中，按鈕的拐角處的拐角處的半徑為12px。 >如何創建一個具有梯度背景的3D按鈕？

>創建具有漸變背景的3D按鈕涉及在CSS中使用線性梯度函數。此功能使您可以創建一個在兩種或多個顏色之間過渡的梯度。這是一個簡單的示例：

.button {
背景：線性級別（在右邊，＃ff7f00，＃ff5500）; }
}
>}
在此示例中，按鈕的背景從一個淺橙色至較深的橙色。

>如何創建一個具有陰影效果的3D按鈕？

>

>創建帶有陰影效果的3D按鈕涉及使用CSS中的盒子遮陽屬性。此屬性使您可以向元素添加陰影。例如，您可以在按鈕中添加陰影以使其看起來3D。這是一個簡單的示例：

.button { boxshadow：0 5px 15px rgba（0,0,0,0,0.3）; }
在此示例中，該按鈕具有一個陰影在按鈕下方是5px，半徑為15px。陰影的顏色是半透明的黑色。

>如何創建一個帶有邊框的3D按鈕？

>創建帶有邊框的3D按鈕涉及在CSS中使用邊框屬性。此屬性使您可以向元素添加邊框。例如，您可以在按鈕中添加一個邊框以使其脫穎而出。這是一個簡單的示例：

.button {

邊界：2px固體＃ff5500;
}
在此示例中，該按鈕具有2px固體邊框，帶有橙色的顏色。 >
>如何創建一個帶有文本內部文本的3D按鈕？

創建一個帶有文本的3D按鈕涉及使用CSS中的文本屬性。這些屬性允許您在元素內部設計文本。例如，您可以更改按鈕內文本的顏色，大小或字體。這是一個簡單的示例：

.button {

顏色：#fff;

font-size：20px; font-family：arial，arial，sans-serif;
}
}
在此示例中，按鈕內的文本為白色，大小為20px，並使用Arial字體。

>如何創建一個與所有瀏覽器兼容的3D按鈕？

>創建一個與所有瀏覽器兼容的3D按鈕涉及在CSS中使用供應商前綴。這些前綴允許您在所有瀏覽器中得到充分支持之前使用新的CSS功能。例如，您可以使用-webkit-前綴用於Chrome和Safari，Firefox的-moz-前綴和Internet Explorer的-MS-前綴。這是一個簡單的示例：

.button {
-webkit-transition：background-color 0.5s易於易度，盒子遮蓋0.5s易於;
moz-moz-transition：background- color 0.5s易於寬鬆。，盒子陰影0.5s易於;
-ms-transition：背景色0.5s易於寬鬆，盒子遮陽0.5s易於;
過渡：背景色0.5s易於寬鬆，盒子遮蓋，盒子shadow 0.5s sele; } 在此示例中，過渡效果與Chrome，Safari，Firefox和Internet Explorer兼容。

以上是使用CSS創建定向點燃的3D按鈕的詳細內容。更多資訊請關注PHP中文網其他相關文章！