CSS技巧專欄:一日一例 4.純CSS實現兩款流光溢彩的酷炫按鈕特效

大家好,今天是 CSS技巧專欄:一日一例 第三篇《純CSS實現兩款流光溢彩的酷炫按鈕特效》

先看圖:

特此說明:

本專題專注于講解如何使用CSS制作按鈕特效。前置的準備工作和按鈕的基本樣式,都在本專欄第一篇文章中又詳細說明。自本專欄第四篇文章起,本專欄都將直接跳過前面的內容,不再重復復制,需要了解按鈕基礎樣式的同學,請移步:《CSS技巧 - 一日一例 (1):會討好的熱情按鈕》。

第一步:基本頁面布局

<div class="container"><button class="base">流光溢彩</button><button class="base">邊框流光溢彩</button>
</div> 

第二步:按鈕基本樣式

第三步:按鈕漸變色的填充 和 動畫

給按鈕寫漸變色填充,寫下按鈕需要的樣式:

.button-primary {position: relative;border: transparent;outline: transparent;color: #fff;background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000,#fb0094);background-size: 500%;animation: animate 20s linear infinite;   
}@keyframes animate {0% {background-position: 0 0;}50% {background-position: 300% 0;}100% {background-position: 0 0;}
}

然后,我們別忘了把這個類加到html代碼中哦!

<div class="container"><button class="base btn-primary">流光溢彩</button><button class="base btn-primary">邊框流光溢彩</button>
</div> 

在瀏覽器預覽按鈕效果:

第四步:給按鈕文字增加陰影

text-shadow: -1px -1px 0px rgba(0,0,0,0.3),1px 1px 0px rgba(255,255,255,0.3);

本例在文本上做了兩個陰影:

  1. 陰影1:在x軸和Y軸各向前1像素偏移(向上,向左),模糊為0,顏色為黑色,透明度30%
  2. 陰影2:在x軸和Y軸各向后1像素偏移(向下,向右),模糊為0,顏色為白色,透明度30%

通過這兩個文字陰影,給按鈕上的文字增加了一個向下凹陷的效果。如圖:

第五步:給按鈕增加彩色的光

經過上一篇的案例:CSS技巧專欄:一日一例 3.純CSS實現炫酷多彩按鈕特效 我們已經知道,只要給彩色漸變增加blur濾鏡,我們就可以得到一個擴散的模糊的炫彩的光。按照昨天的思路,我們就可以實現炫光效果:

.button-primary:before, .button-primary:after {content: "";position: absolute;   border-radius: 2rem; top: -2px;left: -2px;background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000, #fb0094, #0000ff, #00ff00, #ffff00, #ff0000,#fb0094);background-size: 500%;width: calc(100% + 4px);height: calc(100% + 4px);z-index: -1;animation: animate 20s linear infinite;}
.button-primary:after {filter: blur(20px);
}

到這里,按鈕其實已經很炫了!

對了,還要給右邊的按鈕增加一個黑色蒙版。

.btn_mask{top:-1px;left: -1px;background: var(--main-bg-color);transition: all .5s;
}
<div class="container"><button class="base button-primary" >流光溢彩</button><button class="base button-primary btn_mask" >邊框流光溢彩</button>
</div>  

第六步:添加鼠標響應動畫

相對前一篇的按鈕,這一篇我們的按鈕交互也沒有難度,接下來我們給兩個按鈕分別增加一些交互。

.btn_mask:hover{background: rgba(17, 17, 17, 0.5);transition: all .5s;
}

接下來,還是留個小作業!

我對上述代碼做了小小的修改,實現的按鈕如圖:

感興趣的同學可以自己動手復原一下!

好啦,今天的教程:《純CSS實現炫酷多彩按鈕》到這里就結束了,希望對可愛漂亮又富有愛心的你有所幫助!嘿嘿,別忘了,給我點贊+關注+評論哦!我在下面等你。。咳咳。。。下面評論區等你!

本專欄其他文章:

CSS技巧 - 一日一例 (1):會討好的熱情按鈕

CSS技巧專欄:一日一例 2.純CSS實現 多彩邊框按鈕特效

CSS技巧專欄:一日一例 3.純CSS實現炫酷多彩按鈕特效

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/43937.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/43937.shtml
英文地址,請注明出處:http://en.pswp.cn/web/43937.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Python基礎教學之四:面向對象編程——邁向更高級編程

Python基礎教學之四&#xff1a;面向對象編程——邁向更高級編程 一、面向對象編程概念 1. 類和對象 定義&#xff1a;在面向對象編程(OOP)中&#xff0c;類是創建對象的模板&#xff0c;它定義了對象的屬性和方法。對象是類的實例&#xff0c;具體存在的實體&#xff0c;擁有…

socket編程(1)

socket編程 1. 預備知識點1.1 網絡字節序1.2 ip地址轉換函數1.3 sockaddr數據結構 最后 1. 預備知識點 1.1 網絡字節序 多字節數據有大端和小端之分&#xff0c;網絡數據流采用大端字節序&#xff0c;如果主機采用的是小端字節序&#xff0c;那么需要轉換。 大端&#xff1a…

ffmpeg和imagemagick制作gif動圖

from: https://blog.csdn.net/hufang360/article/details/107291163?ops_request_misc%257B%2522request%255Fid%2522%253A%2522167876076516800186587476%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id167876076516800186587476&biz_i…

【JavaScript 報錯】未捕獲的范圍錯誤:Uncaught RangeError

&#x1f525; 個人主頁&#xff1a;空白詩 文章目錄 一、錯誤原因分析1. 遞歸調用次數過多2. 數組長度超出限制3. 數值超出允許范圍 二、解決方案1. 限制遞歸深度2. 控制數組長度3. 檢查數值范圍 三、實例講解四、總結 Uncaught RangeError 是JavaScript中常見的一種錯誤&…

347. 前 K 個高頻元素(中等)

347. 前 K 個高頻元素 1. 題目描述2.詳細題解3.代碼實現3.1 Python3.2 Java 1. 題目描述 題目中轉&#xff1a;347. 前 K 個高頻元素 2.詳細題解 尋找出現頻率前 k k k高的元素&#xff0c;因此需要先統計各個元素出現的次數&#xff0c;該步驟時間復雜度為 O ( n ) O(n) O(n)…

柔性接觸力學及其建模仿真方法

柔性接觸力學是研究柔性體&#xff08;如柔性機器人、柔性結構等&#xff09;在接觸過程中產生的力學效應和相互作用的學科。它涉及到接觸力的計算、接觸變形的分析以及接觸過程中的能量轉換等多個方面。由于柔性體具有變形能力&#xff0c;其接觸過程往往比剛性體接觸更為復雜…

Transformer學習過程中常見的問題與解決方案 - Transformer教程

在機器學習領域&#xff0c;Transformer模型已經成為了處理自然語言處理&#xff08;NLP&#xff09;任務的主流工具。然而&#xff0c;在學習和使用Transformer的過程中&#xff0c;很多人會遇到各種各樣的問題。今天我們就來聊一聊Transformer學習過程中常見的問題以及對應的…

C++模板總結

文章目錄 寫在前面1. 函數模板1.1 函數模板的概念1.2 函數模板的原理1.3 函數模板的實例化1.4 函數模板的實例化模板參數的匹配原則 2. 類模板3. 非類型模板參數4. 模板的特化4.1 概念4.2 函數模板特化4.3 類模板特化 5. 模板分離編譯6. 總結 寫在前面 進入C以后&#xff0c;C…

智能小車——初步想法

需要參考輪趣的智能小車自己搭建一臺智能機器人&#xff0c;這里從底層控制開始逐步搭建。 控制模式 之后要自行搭建智能小車&#xff0c;所以將輪趣的底盤代碼進行學習&#xff0c;根據開發手冊先大致過一遍需要的內容。 有做很多個控制方法&#xff0c;包括了手柄、串口、…

MySQL中的JOIN、LEFT JOIN、RIGHT JOIN講解

在 MySQL 中&#xff0c;JOIN 是一種非常強大的功能&#xff0c;它允許你將兩個或多個表中的行結合起來&#xff0c;基于兩個表之間的共同字段。這種操作在數據庫查詢中非常常見&#xff0c;特別是在處理關系型數據庫時。下面我將分別解釋 JOIN、LEFT JOIN&#xff08;也稱為 L…

uin-app微信小程序自定義tabBar底部菜單實現簡單示例(工作筆記)

在微信小程序中實現自定義 tabBar 可以為你的應用提供更加靈活和個性化的底部導航菜單。由于微信小程序的官方 tabBar 配置功能有限&#xff0c;自定義 tabBar 成為了很多開發者實現復雜底部導航的選擇。以下是一個簡單的示例&#xff0c;說明如何在小程序中實現自定義 tabBar。…

Linux下常見壓縮文件tar.xz、tar.bz2、tar.gz的區別和詳解

文章目錄 tar.xz tar.bz2 tar.gz 的區別三種文件的解壓方式tar.xz的解壓三種壓縮文件的創建方式 tar.xz tar.bz2 tar.gz 的區別 這三個文件擴展名都表示壓縮后的檔案文件&#xff0c;但它們使用不同的壓縮算法。 tar.xz: tar 代表 Tape Archive&#xff0c;它是一種將多個文件…

House holder reflections and Givens rotations

House holder reflections and Givens rotations Householder反射和Givens旋轉是兩種常見的線性代數方法&#xff0c;用于將一個矩陣分解為正交矩陣(Q)和上三角矩陣&#xff0c;即QR分解。它們在數值線性代數中非常重要&#xff0c;特別是在求解線性方程組和特征值問題中。以下…

【若依管理系統】注意事項

1.前端字段必填 rules: {sceneName: [{ required: true, message: "場景名稱不能為空", trigger: "blur" }],orderNum: [{ required: true, message: "顯示排序不能為空", trigger: "blur" }], }, 2.IDEA&#xff0c;默認以debug模式…

python | pyvips,一個神奇的 Python 庫

本文來源公眾號“python”&#xff0c;僅用于學術分享&#xff0c;侵權刪&#xff0c;干貨滿滿。 原文鏈接&#xff1a;pyvips&#xff0c;一個神奇的 Python 庫&#xff01; 大家好&#xff0c;今天為大家分享一個神奇的 Python 庫 - pyvips。 Github地址&#xff1a;https…

Agents 要點

一、Agents概念 人類是這個星球上最強大的 Agent。Agent是一個能感知并自主地采取行動的實體&#xff0c;這里的自主性極其關鍵&#xff0c;Agent要能夠實現設定的目標&#xff0c;其中包括具備學習和獲取知識的能力以提高自身性能。 關鍵點&#xff1a;感知環境、自主決策、具…

前端項目筆記經驗-001

做項目有一段時間了&#xff0c;利用下班或者零碎時間的功夫&#xff0c;想分享一些個人心得和感受。與君共勉。 前端應該具備的幾個能力&#xff1a; &#xff08;1&#xff09;準備假數據&#xff08;模擬數據&#xff09;的能力&#xff0c;因為后端有時候接口沒有準備好&…

element plus 實現跨頁面+跨tab欄多選

文章目錄 element plus 層面數據層面 菜鳥好久沒寫博客了&#xff0c;主要是沒遇見什么很難的問題&#xff0c;今天碰見了一個沒有思路的問題&#xff0c;解決后立馬來和大家伙分享了&#xff01; 菜鳥今天要實現一個需求&#xff0c;就是&#xff1a;實現跨頁面跨 tab欄 多選…

力學篤行(四)Qt 線程與信號槽

線程與信號槽 1. 主窗口&#xff08;MainWindow&#xff09;主線程2. 線程2.1 QThread2.2 QtConcurrent::run()2.3 thread 的調用方式 3. 信號槽3.1 connect3.2 元對象系統中注冊自定義數據類型 附錄一 信號槽機制與主線程進行通信示例 1. 主窗口&#xff08;MainWindow&#x…

MySQL聯合索引最左匹配原則

MySQL中的聯合索引(也叫組合索引)遵循最左匹配原則&#xff0c;即在創建聯合索引時&#xff0c;查詢條件必須從索引的最左邊開始&#xff0c;否則索引不會被使用。在聯合索引的情況下&#xff0c;數據是按照索引第一列排序&#xff0c;第一列數據相同時才會按照第二列排序。 例…