整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文中我們對CSS超炫加載動畫設計、實現與實例進行了講解與說明，通過學習可知使用CSS提供的animation屬性及偽元素等可以實現精美的CSS動畫效果的設計與開發。本文我們將繼續介紹CSS在Web頁面元素設計中的應用。
純CSS實現開關元素設計
本例我們使用CSS完成開關的設計，主要要求是在點擊開關時開關標識顏色需要改變，另外需要體現出元素點擊前與點擊后的動態變化與立體效果。本例最終設計呈現效果描述如下圖所示：
開關按鈕實現效果展示
要實現如上圖所示的開關按鈕效果，需要針對元素改變鼠標點擊前后的CSS樣式，因為只使用CSS實現，我們選擇本身具有點擊屬性的INPUT元素。因此還需要考慮對INPUT元素外觀進行設置，其設置也主要是依托于CSS選擇器及相關屬性的設置。
CSS選擇器及屬性設置
另一方面本例中出現的開關標志，主要使用第三方字體庫提供的圖標實現，因此需要對font相關屬性及CSS外部link方法有所學習掌握。本例所使用字體如下所示：
字體圖標
在明確基本思路之后，我們可以使用submine進行代碼編寫，主要編寫步驟如下：
1、鏈接字體樣式
本例使用如上圖所示提供的on圖標，即Font Awesome圖標字體庫和CSS框架，因此需要外部鏈接或者下載相應CSS文件，這里我們選擇外部鏈接，通過使用CSS提供的link，實現代碼如下：
字體鏈接
鏈接完成之后我們在設置字體時可直接使用FontAwesome字體，其中on圖標對應的編碼為f011。
2、定義頁面內容
本例頁面內容主要使用input元素checkbox屬性進行按鈕設置。因此頁面內容部分定義如下所示：
頁面主體部分
3、定義checkbox樣式
在完成頁面元素添加之后就需要對頁面元素進行CSS樣式的設置，本例通過元素加type屬性作為選擇器，選擇指定元素并進行樣式設置。代碼如下：
checkbox屬性設置
checkbox屬性設置描述如上圖所示，設置效果如下：
checkbox屬性效果
4、input添加checked、after等樣式
為進一步實現點擊效果切換及圖標按鈕的效果，需要對check狀態及after偽元素進行CSS樣式的設置。其中after為元素主要用于在上圖中添加on開關圖標。實現代碼描述如下：
after偽元素選擇器及樣式設置
after偽元素選擇器及樣式設置如上圖所示，主要完成content內容即on圖標設置，字體選擇、字體顏色及字體大小設置，設置完成預覽效果如下：
after為元素設置效果
要實現點擊效果就需要在點擊之后對input元素樣式進行設置，因此我們使用checked作為選擇器對該狀態下input樣式進行設置。設置代碼如下所示：
checked狀態CSS設置
checked狀態CSS設置如上圖所示，我們只對box-shadow陰影進行設置，通過陰影變化實現按鈕動態效果。
5、點擊之后on圖標顏色變化
點擊之后on圖標顏色變化主要通過對input[type="checkbox"]:checked，進一步使用after偽元素定義字體顏色實現。實現代碼如下所示：
on圖標（字體）顏色改變
通過使用該選擇器，會在input點擊之后，on字體顏色變為紅色。以上給出了input按鈕效果實現的基本思路與部分核心實現代碼。如需完整案例代碼請關注并私信作者。
本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可在評論區回復。更多程序設計相關教程及實例分享，期待大家關注與閱讀！
過一段時間的醞釀，我決定繼續開啟頭條文章的發布。
1. 將自己平常工作學習中的素材積累，分享在頭條號。既能加深記憶，又能為大家帶來分享。
2. 標題為零基礎HTML的意思很簡單，我希望讓HTML這個前端語言變成每一位網友都熟知的語言。因為它其實并不復雜，甚至可以說它就是計算機語言中的“美圖秀秀”
3. 如有想加深學習進度的小伙伴，請私信我。
廢話不說了，開始 零基礎HTML素材積累01 CSS HOVER的7個按鈕
CSS hover 樣式很簡單，但是想創造出有意思、實用、有創意性的特效是很考驗設計師的創意能力，所以設計達人每隔一段時間都會分享一些與鼠標點擊、懸停的相關特效，以便大家獲得更好的創造靈感。
今天我們整理了10組網頁按鈕的點擊與懸停效果，每組都有不同的特色以及創意性，下面達人將特效錄制成 GIF 動圖，方便大家在線觀看
查看演示: 私信九弓子：css hover （獲取源碼演示鏈接）
們都見過它們，它們保護我們的眼睛免受所有光線的傷害。 這些是暗模式按鈕，這里是如何在 HTML、CSS 和 JS 中創建自己的按鈕！
我們要做的第一件事是創建 HTML 文件。 我正在使用引導程序使按鈕看起來不錯。 我要做的第一件事是將引導程序鏈接到我的 HTML 文件，這樣我就可以訪問所有按鈕。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"><title>Dark mode</title></head><body></body></html>這是樣板 HTML 代碼。 現在我將添加按鈕并鏈接 css 樣式表。 如果您正在跟進，請在與您的 HTML 文件相同的目錄中創建一個 style.css 文件。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style.css"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"><title>Dark mode</title></head><body><button type="button" class="btn btn-dark">Dark Mode</button></body></html>我使用了引導 btn-dark 類，它只是一個簡單的深色按鈕。
現在為 css。 我將創建一個 .dark 類，但我知道我們還沒有分配它。 那將適用于黑暗模式。
.dark {background-color: black;}現在，我們將添加一些 javascript。 我們不會制作新文件，因為它不會那么多。 我將首先給按鈕一個“按鈕”類，然后從那里開始工作。我將添加一個事件偵聽器，然后在單擊時，我將切換 HTML 主體類 dark 。然后我將向主體添加一個 ID，以便我們可以 使用 JavaScript 選擇它。然后我將更改文本和按鈕顏色，以便我們可以來回切換。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style.css"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"><title>Dark mode</title></head><body id="body" class=""><button type="button" class="btn btn-dark" class="button">Dark Mode</button><script>let button = document.querySelector('button');let body = document.getElementById('body');button.addEventListener('click', () => {body.classList.toggle('dark');if(body.classList.contains('dark')) {button.style.backgroundColor = "white";button.innerHTML = "Light Mode"button.style.color = "black";} else {button.style.backgroundColor = "black";button.innerHTML = "Dark Mode"button.style.color = "white";}});</script></body></html>僅此而已！ 謝謝閱讀。 如果你喜歡，請關注！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
