CSS實現切換效果的方法有很多種，其中常用的包括hover、active和toggle等。下面將通過代碼來展示這幾種方法的具體實現。

/* hover效果 */
.box:hover{
background-color: black;
color: white;
}
/* active效果 */
.box:active{
background-color: blue;
color: white;
}
/* toggle效果 */
.box{
background-color: red;
color: white;
transition: all 1s ease;
}
.box.active{
background-color: blue;
color: white;
}

通過上述代碼，我們可以實現hover、active和toggle效果。hover的實現方法比較簡單，只需要在對應的元素上添加:hover樣式即可。active的實現方法也很簡單，只需要在對應的元素上添加:active樣式即可。而toggle的實現方法則需要借助JavaScript來實現，代碼也相對較為復雜。

/* JS實現toggle效果 */
document.querySelector('.box').addEventListener('click', function(){
this.classList.toggle('active');
})

通過上述JavaScript代碼，我們可以實現點擊元素后toggle樣式的切換。這里借助了DOM API中的classList來實現，同時監聽click事件來實現元素的點擊反饋。