CSS開關燈效果代碼
CSS開關燈效果可以使網站更加生動，給用戶帶來極佳的視覺效果，下面我們就來介紹一下該效果的代碼實現。
首先，我們需要一個HTML文件，其中包含一個開關燈的按鈕和一個燈泡的圖片，如下所示：
```
```
接著，我們需要定義CSS樣式來實現開關燈效果，代碼如下：
```
/* 開關燈的容器 */
.switch-container {
display: inline-block; /* 將容器設為行內塊元素 */
position: relative; /* 設置相對定位 */
margin-top: 10px;
}
/* 隱藏原來的復選框 */
.switch {
display: none;
}
/* 開關燈的標簽 */
.switch-label {
position: absolute; /* 設置絕對定位 */
top: 0;
left: 0;
width: 60px;
height: 30px;
background-color: #ccc; /* 設置灰色背景 */
border-radius: 15px;
cursor: pointer; /* 設置光標為指針 */
}
/* 開關燈的標簽的背景 */
.switch-label:before {
position: absolute; /* 設置絕對定位 */
content: ''; /* 不顯示文本內容 */
width: 26px;
height: 26px;
background-color: #fff; /* 設置白色背景 */
border-radius: 50%;
top: 2px;
left: 2px;
transition: all 0.3s ease-in-out; /* 設置過渡效果 */
}
/* 點擊后開關燈的標簽的背景 */
.switch:checked + .switch-label:before {
transform: translateX(30px); /* 將背景向右移動 */
}
/* 燈泡 */
.light {
width: 50px;
height: 50px;
margin-top: 20px;
filter: grayscale(100%); /* 設置灰度 */
transition: all 0.3s ease-in-out; /* 設置過渡效果 */
}
/* 點擊后開關燈的效果 */
.switch:checked ~ .light {
filter: grayscale(0); /* 設置取消灰度 */
transform: translateY(-30px); /* 將燈泡上移 */
}
```
通過以上CSS樣式設置，即可實現一個簡單的開關燈效果。
以上代碼可以在文本編輯器中編寫并保存為.html和.css文件，在瀏覽器中打開.html文件即可查看效果。
請點擊下面的按鈕開關燈
```
接著，我們需要定義CSS樣式來實現開關燈效果，代碼如下：
```
/* 開關燈的容器 */
.switch-container {
display: inline-block; /* 將容器設為行內塊元素 */
position: relative; /* 設置相對定位 */
margin-top: 10px;
}
/* 隱藏原來的復選框 */
.switch {
display: none;
}
/* 開關燈的標簽 */
.switch-label {
position: absolute; /* 設置絕對定位 */
top: 0;
left: 0;
width: 60px;
height: 30px;
background-color: #ccc; /* 設置灰色背景 */
border-radius: 15px;
cursor: pointer; /* 設置光標為指針 */
}
/* 開關燈的標簽的背景 */
.switch-label:before {
position: absolute; /* 設置絕對定位 */
content: ''; /* 不顯示文本內容 */
width: 26px;
height: 26px;
background-color: #fff; /* 設置白色背景 */
border-radius: 50%;
top: 2px;
left: 2px;
transition: all 0.3s ease-in-out; /* 設置過渡效果 */
}
/* 點擊后開關燈的標簽的背景 */
.switch:checked + .switch-label:before {
transform: translateX(30px); /* 將背景向右移動 */
}
/* 燈泡 */
.light {
width: 50px;
height: 50px;
margin-top: 20px;
filter: grayscale(100%); /* 設置灰度 */
transition: all 0.3s ease-in-out; /* 設置過渡效果 */
}
/* 點擊后開關燈的效果 */
.switch:checked ~ .light {
filter: grayscale(0); /* 設置取消灰度 */
transform: translateY(-30px); /* 將燈泡上移 */
}
```
通過以上CSS樣式設置，即可實現一個簡單的開關燈效果。
以上代碼可以在文本編輯器中編寫并保存為.html和.css文件，在瀏覽器中打開.html文件即可查看效果。上一篇css 平均分布空間
下一篇vue建立tcp連接