乙個神奇卻很簡單的css特效

2022-09-11 03:57:13 字數 823 閱讀 9791

在網上看到乙個前端大牛的主頁,覺得他有乙個特效特別酷,一開始還以為是要用什麼j**ascript**來實現,但仔細看一下,發覺只是用幾行css**就搞定了,我覺得挺好的。

他這個效果就是滑鼠放在左半部分和右半部分,整個網頁的布局顏色會相互變化,我貼上前後兩張圖來比較一下,你們就明白了。

當滑鼠放在左半部分:

當滑鼠放在右半部分:

可能靜態的看不太出效果,但是動態看起來還是比較酷的,最關鍵的是它的**其實很簡單。

.panel, .panel-left

:hover + .panel-right

.panel-right, .panel

:hover

.panel-right

:hover + img

#**atar

第一段和第二段**主要就是背景顏色和主體顏色的改變,他把做面板滑鼠移動到上面時的效果和右面板的效果設為一致,從而達到左右顛倒的效果,最後一段**主要是下面一張的旋轉180度。

真的是前端的東西很變化莫測,往往很簡單的思路能夠達到意想不到的效果,我覺得真的是值得我們很多時候多多思考的。

再貼上這個前端大神的網頁真的很佩服她,乙個女生居然**寫的這麼好,看看別人做的東西,再看看自己的東西,簡直慚愧不已,我覺得人醜還是多讀書,尤其是我這種長的那麼醜的人就更應該讀了。

寫乙個很簡單的程式

寫乙個很簡單的程式,是寢室的乙個女孩讓我幫她寫一下,看一下的。想的思想什麼都有的了,可是,自己做的時候,卻有很多的問題,浪費了乙個晚上。其實,卡在自己在選單的相應程式中弄了乙個迴圈,想像中,用這個迴圈給幾個變數賦值,然後用settimer,在ontimer函式中寫繪製的 讓在固定的時間畫圖,可是,這...

乙個很簡單的動態改變class外掛程式

1 function options 初始化傳入的json資料8 910 fn.lf function options fn.lf.defaults,options 12this init 13 1415 16 外掛程式的擴充套件函式 公共方法 17 18 fn.lf.prototype 29 30...

乙個簡單css例子

lang en charset utf 8 css講解title rel stylesheet href style.css body div dd xddaa hover abc ulli first child ulli last child ulli nth child 3 ulli only...