HTML 燈泡變亮代碼
在 HTML 中，我們可以使用簡單的代碼來制作一個燈泡并實現其變亮的效果。下面是代碼示例：
<!DOCTYPE html>
<html>
<head>
<title>HTML 燈泡變亮代碼</title>
<style>
.bulb {
width: 50px;
height: 50px;
background-color: #f0f0f0;
border-radius: 50%;
position: relative;
}
.bulb:before {
content: "";
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #f0f0f0;
position: absolute;
top: 5px;
left: 5px;
}
.bulb:after {
content: "";
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #f0f0f0;
position: absolute;
top: 15px;
left: 15px;
}
.bulb.light:before {
background-color: #fc0;
}
.bulb.light:after {
background-color: #fff;
}
</style>
</head>
<body>
<div class="bulb"></div>
<button onclick="document.querySelector('.bulb').classList.toggle('light')">Switch</button>
</body>
</html>這段代碼主要包括三個部分：
- HTML 部分，使用 div 標簽來創建一個燈泡。
- CSS 部分，定義了燈泡樣式和變亮時的樣式。
- JavaScript 部分，使用 toggle() 函數來實現燈泡的開關操作。
在這個例子中，我們使用了偽元素來實現燈泡的效果。:before 偽元素創建了燈泡的下部分，:after 偽元素創建了燈泡的中心部分。通過將燈泡的類切換為 “light”，我們可以實現燈泡變亮的效果。
這個例子展示了通過 HTML、CSS 和 JavaScript 創造交互式效果的能力。通過實現這個小功能，你可以更深入地了解 HTML 和 CSS 的應用，幫助你更好地理解 Web 開發。
上一篇vue畫bpmn流程
下一篇vue微信標題