現(xiàn)在前端頁面能夠實現(xiàn)的交互效果越來越酷炫，也越來越復雜惯裕。但是這些特效背后的形成機制，卻始終簡潔優(yōu)雅绣硝。
簡單說來蜻势，一個交互效果的實現(xiàn)，是由HTML提供頁面骨架鹉胖，JavaScript負責行為事件握玛，而頁面中呈現(xiàn)出的各種各樣的效果，是由CSS完成的甫菠。當然挠铲，每一個特效形成的具體原理各有不同，不過也是有規(guī)律可尋寂诱。
顯示與隱藏
典型代表： 下拉菜單 提示框
利用CSS的display屬性拂苹，在事件發(fā)生后實現(xiàn)相應區(qū)塊內容的顯示和隱藏顯示和隱藏。 需要注意的是痰洒，在具體實現(xiàn)中醋寝，最好不要在JS代碼直接寫style.display,而是通過改變相應內容的className去實現(xiàn)，這樣就把JS與CSS很好的進行了分離带迟。這種顯示和隱藏，根據(jù)不同的情況還存在很多的變體囱桨，opactiy（蒙版） 仓犬、overflow（圖片輪播）。
數(shù)值改變
典型代表： 頂部廣告 圖片輪播
頁面中很多元素的CSS屬性都是數(shù)值型的舍肠，結合setInterval() setTimeout()等方法搀继，可以讓CSS屬性值動態(tài)的改變，從而實現(xiàn)一些簡單的動畫效果翠语。不過對于一些復雜的動畫效果叽躯，最好是用CSS3去實現(xiàn)，呈現(xiàn)出來會更細膩流暢肌括。
相互關聯(lián)
典型代表： 網(wǎng)頁定位導航 放大鏡
頁面中各元素不是孤立存在的点骑，它們之間也是有許多的聯(lián)系。谍夭，網(wǎng)頁定位導航的實現(xiàn)黑滴，就是利用了頁面內容與導航條間的聯(lián)系， 放大鏡效果紧索，是通過建立鼠標位置的移動與放大展示圖片的聯(lián)系袁辈。
當然這里效果總結只是總體的很小一部分，而且隨著CSS3珠漂、HTML5等新特性被瀏覽器的逐漸支持晚缩，會有更多新奇好玩的效果出現(xiàn)尾膊。等有機會了，再進行總結荞彼。
