在網上看到一個前端大牛的主頁，覺得他有一個特效特別酷，一開始還以為是要用什麼javascript程式碼來實現，但仔細看一下，發覺只是用幾行css程式碼就搞定了，我覺得挺好的。
他這個效果就是滑鼠放在左半部分和右半部分，整個網頁的佈局顏色會相互變化，我貼上前後兩張圖來比較一下，你們就明白了。
當滑鼠放在左半部分：

當滑鼠放在右半部分：

可能靜態的圖片看不太出效果，但是動態看起來還是比較酷的，最關鍵的是它的程式碼其實很簡單。

.panel, .panel-left:hover + .panel-right {
    background-color: #22c3aa;
    color
 
: white;
}

.panel-right, .panel:hover {
    background-color: white;
    color: #22c3aa;
}

.panel-right:hover + img#avatar {
    transform: rotateY(180deg);
}

第一段和第二段程式碼主要就是背景顏色和主體顏色的改變，他把做面板滑鼠移動到上面時的效果和右面板的效果設為一致，從而達到左右顛倒的效果，最後一段程式碼主要是下面一張圖片的旋轉180度。
真的是前端的東西很變化莫測，往往很簡單的思路能夠達到意想不到的效果，我覺得真的是值得我們很多時候多多思考的。
再貼上這個前端大神的網頁