CSS是網頁設計中不可或缺的一部分，它可以讓我們的網頁更加美觀、易于操作。在CSS中，一項非常引人注目的特性就是視頻開關燈，它可以讓我們在使用視頻時更加具有藝術感。下面我們來一起了解一下如何使用CSS實現視頻開關燈。

.video {
position: relative;
}
.video:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1;
display: none;
}
.video .switch-checkbox:checked ~ .video-wrapper:before {
display: block;
}
.video-wrapper {
position: relative;
z-index: 2;
}
.video-wrapper video {
width: 100%;
}
.video .switch {
position: absolute;
top: 0;
right: 0;
z-index: 3;
margin: 10px;
}
.video .switch input[type="checkbox"] {
display: none;
}
.video .switch-label {
position: relative;
display: inline-block;
width: 40px;
height: 22px;
background-color: #27ae60;
border-radius: 11px;
}
.video .switch-label:before,
.video .switch-label:after {
content: "";
position: absolute;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
background-color: #fff;
border-radius: 11px;
transition: 0.2s;
}
.video .switch-label:before {
left: 1px;
right: auto;
}
.video .switch-checkbox:checked + .switch-label:before {
transform: translateX(18px);
}
.video .switch-checkbox:checked + .switch-label:after {
left: auto;
right: 1px;
}

以上代碼中，我們首先將視頻后面加上了一個透明度為0.7的黑色遮罩層（使用:before），用來實現關閉燈的效果。然后使用:checked偽類，通過改變:before的display屬性來控制遮罩層的出現或消失。同時，我們在視頻上方添加了一個switch開關，通過將switch-checkbox(input)隱藏，并在switch-label(label)上添加:before和:after偽類元素，來實現開關的UI效果。

通過上面的代碼和講解，相信大家已經掌握了如何使用CSS實現視頻開關燈的方法。這個效果既實用又美觀，可以讓我們的網頁更加生動有趣，不妨在項目中試試看吧！