CSS點擊開關效果，可以在頁面中實現一個開關的功能。當用戶點擊開關時，頁面上的某些元素會發生相應的變化。以下是實現方式：

HTML代碼：
<div class="switch">
<input type="checkbox" id="switch"/>
<label for="switch"></label>
</div>
CSS代碼：
.switch {
display: inline-block;
position: relative;
width: 50px;
height: 30px;
}
.switch input {
display: none;
}
.switch label {
display: block;
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 30px;
border-radius: 15px;
background-color: #d9d9d9;
cursor: pointer;
transition: background-color .2s;
}
.switch label::after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 3px;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #fff;
transform: translateY(-50%);
transition: transform .2s, background-color .2s;
}
.switch input:checked + label {
background-color: #40a9ff;
}
.switch input:checked + label::after {
left: 23px;
background-color: #fff;
box-shadow: 0 0 5px #40a9ff;
}

上面的代碼中，通過HTML中的input和label標簽，結合CSS實現了開關的效果。其中，input標簽的type屬性設置為checkbox，是為了表明這是一個復選框。使用label標簽將復選框和開關控件關聯起來，通過CSS對label標簽和after偽元素做樣式設置，實現了點擊開關后的樣式變化。