大佬程序員送福利，用40行代碼做出最適合裝13特效

我發現最近找的都是實體案例，也沒有 找那些特效案例，所以今天就給大家分享一個特效案例。不要問我什麼是13的意思？這個案例是在貼吧看到的，然後可以去找了下載，在此還得感謝那位大佬的分享。此案例是最適合小白去學習的案例，因為涉及的只是點較少，而且代碼量也不多，只有40多行的代碼，出了BUG也容易找，不多說了，上圖說話，讓大家來看看這個特效是咋樣的：

動態圖

靜態圖

當然，在這篇文章分享之前我還是要推薦下我自己的前端群：621071874，不管你是小白還是大牛，小編我都挺歡迎，不定期分享乾貨以及各種經典案例（包括此案例），包括我自己整理的一份2017最新的前端資料和零基礎入門教程，歡迎初學和進階中的小夥伴。

代碼

CSS

回憶了下自己的經歷，我提點簡單的建議吧

• 初期不要急著自己去設計頁面，直接仿站來讓自己獲得從0到1的能力。我個人應該主要是通過模仿WordPress模板入的門。當然找的都是一些比較有新意的，結構上稍有複雜度的，基本沒切過有高相似度的頁面，時間要花在刀刃上。當時國外應該有大量應用了css3動畫以及響應式設計等較新技術的頁面（2011年），也確實培養起了自己對CSS的興趣。

• 找份真實的工作來鞏固深入學習。相信我，放低姿態去找份真實的開發工作，比你自己業餘去摸索要高效10倍。我個人畢業後進入網易，經過公司的內部系統培訓，理解了CSS模塊化的思想，才發現自己以前只能算是完成了一個頁面，而不算是做好了它。真實的產品開發才是自己的CSS能力真正落地的開始。

• 工作后應繼續關注相關一些例如Codrops 等這類能帶來CSS使用靈感的網站，去思考為什麼，而不是copy它的代碼去完成功能。頁面開發中有太多重複的工作，如果你一直用一個思路去解決問題，會有礙於經驗和能力的積累，形成一個較低級舒適區的怪圈。平時也可以去codepen這類網站收集一些瑣碎的靈感，增加知識面

• 學習css過程中千萬不要剝離HTML學習。當你什麼時候理解了html的重要性（從頁面開發角度而言，它可以視為是後續良好css和js編碼得以實施的基礎，相當於程序中的數據結構，設計好了可以讓你事半功倍），你才可以稱得上是一個合格的頁面開發

• 對於新人，我建議除了幾個關鍵概念，如布局、盒模型、單位等等，都不應該花大量去扣細節，甚至背書記憶，瀏覽性學習知道有這個東西就行，在實際應用時再去加深記憶。

算拋磚引玉吧，好久沒有機會好好寫寫CSS了。雖然我一直認為純粹的CSS頁面開發並不適合作為前端領域裡深入發展的方向，但不可否認，在學習玩耍css的過程中，帶給了自己很多樂趣。