整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
是一個屬于移動互聯(lián)網(wǎng)的時代，也是一個科技的時代，一不留神，我們似乎就被“摩爾定律”拋棄，成了過去式。但這些科技時代的產(chǎn)物我們真的需要嗎？瘋狂的背后我們也需要有適當停下的勇氣。
值得等待
技術(shù)如蛇般蜿蜒向前，變得更小，功能更強大，并且更具革命性。我們很容易沉溺與每日科技新聞帶來的如洪水般的消息中。Octa-deca-mega酷睿核心處理器！如果你沒見過無邊框顯示器你一定不會相信它的存在。科技讓一切更智能，從你的咖啡壺到門鈴！
稍等，深呼吸，仔細想想
如果錢對你而言不是問題的話，神奇的Gear隨時準備給你一場頭腦風暴。但是前沿的東西也需要你的妥協(xié)，不論是它的高價格、巨大的漏洞還是其它問題。考慮到這一點，下面是一些“硬骨頭”的清單，你很可能不該購買。（如有遺漏，歡迎指正）
虛擬現(xiàn)實頭戴設(shè)備（Virtual reality headsets）
先不管那些關(guān)于VR頭盔是如何令人興奮和革命性的特性——盡管它們說的都是真的。不論是被外星人追蹤還是用VR再宇宙中漫游，都將徹底改變你對游戲的看法。而且，VR有足夠的潛力突破游戲的界限，完全足夠！
只是，它還沒有準備好。當然，你現(xiàn)在可以買一副三星Gear VR，前提是你擁有一部三星最近發(fā)布的Galaxy 手機，該項目總投資達 900 億美元。或者話費350美元每一個開發(fā)者工具包！還有許多 b 級 VR 和 AR （增強現(xiàn)實） 耳機已經(jīng)可用。但Oculus公司和HTC的SteamVR都釋放了消息稱，需要時間保證該設(shè)備的視覺保真度有巨大的飛躍，它們直到新的一年才會到來。要有耐心。
NVMe固態(tài)硬盤
哇哦。非易失性存儲器快遞（NVMe）固態(tài)硬盤來了！英特爾最近發(fā)布的750系列是如此的才華橫溢。它太快了，事實上，大多數(shù)人的電腦可能跟不上它！沒錯，固態(tài)硬盤正變得比它們使用的計算機接口速度更快。
要充分利用 NVMe 驅(qū)動器，您需要一個同樣強大的處理器如英特爾的八核心i7-5960x-an發(fā)燒友級芯片，一種讓它顯示回炫酷一面的神器。最重要的是，你需要一個發(fā)燒友級主板，支持引導到一個NVMe驅(qū)動器，或者你將不得不使用所有的高速二級單獨存儲。但考慮到750系列SSD turbocharges文件傳輸?shù)乃俣龋瑓s未能顯著加快系統(tǒng)啟動時間或應用程序啟動時間，要求最苛刻的每一個媒體從業(yè)人員都應該等待這兩個技術(shù)的成熟且價格下降。
智能手表
從我還是孩子起便一直渴望一臺智能手表。但第一代智能手表卻留下了很多還待改進的地方。
絕大多數(shù)智能手表，包括Android Wear手表和Apple Watch都需要連接互聯(lián)網(wǎng)才能使用。所以你仍然需要在口袋里揣著你的手機。另類的智能手表用巨大的體積裝下了蜂窩連接系統(tǒng)，并且配備了電話卡。更致命的是，智能手表必須在夜間充電，除非你使用一個欠佳的顯示器。但是，它智能為您提供你已經(jīng)在手機上收到的服務通知。并且，它們大多數(shù)在200美元以上，還有350美元起的Apple Watch。智能手表的花費甚至超過了補貼后的智能旗艦手機。
最終，智能手表可能演變成一個必需品，但目前，它是一個純粹的奢侈品！
4K電視
4k 電視的價格正在暴跌（和監(jiān)視器 ！），VIZIO新的M系列43英寸4K電視的起售價也僅僅設(shè)在了600美元。這與4K電視的幾千美元原始成本有著巨大的差異，但是任然有很多43英寸的1080P電視有著幾百美元的溢價。
先不論花費，現(xiàn)在仍然有很多內(nèi)容無法提供4K顯示。雖然亞馬遜和Netflix正在試水超高清藍光項目，但應該不會很快到來。在今天的互聯(lián)網(wǎng)環(huán)境下，寬帶速度能否滿足4K內(nèi)容也是影響4K需求的重要因素。此外，從1080P到4K的換代并不如從標清到高清那么明顯。除非你給這項交易一個特別大的甜頭，不然這項技術(shù)的普及還需要一段時間。
Kickstarter上那很酷的新東西
談到集資，你知道在Kickstarter 或 Indiegogo上超級酷或者瘋狂激進的硬件嗎？別輕易投資這些項目，除非你愿意失去那筆錢并且不圖任何回報。
請記住：Kickstarter不是一個商店。雖然硬件設(shè)施很可能給某些投資者獲得豐厚的回報，但是你的捐款不是一個預付或者首付。它是為想法買單的“后盾”。你是在為希望買單。你說“這是一個很酷的概念，我想幫助這個希望成為現(xiàn)。”然而，即使資金充足的項目最終往往都會失敗。如果你只對新奇炫酷的小玩意感興趣，可以等等看這個項目是否已接近，現(xiàn)在Kickstarter上表達購買意愿，直至它零售。
觸摸屏筆記本電腦
觸摸屏在手機、平板電腦和2合1筆記本上發(fā)揮了重要的作用。但在傳統(tǒng)PC上卻弊大于利，Windows 8中強行“綁架”用戶手指的行為是一種糟糕的設(shè)計。
Windows 10的驚人反轉(zhuǎn)已經(jīng)足夠證明這個。但是，除了這個事實以外，觸摸功能在筆記本上就如同大船上的救生艇一樣，雖然偶爾有用，但實際上缺點更多。觸摸屏增加了您筆記本電腦的重量和成本，并且會加劇電池壽命的耗損，而且他們經(jīng)常不配備啞光飾面，以至于炫光嚴重。更不用說屏幕上的指紋污跡了！
更自然的電腦交互方式可能會在未來成為常態(tài)。但今天你不需要觸摸屏的筆記本電腦。說到自然的交互方式…
守勢控制配件
雖然通過雙手的舞動來控制你的電腦的主意聽上去很棒，但卻是在理論上。但現(xiàn)實是，仍然有很多工作需要做。雖然，通過手勢控制的虛擬現(xiàn)實頭盔是一個潛在的殺手級案例，如果它能很好工作的話。但是，正如我想反駁的，虛擬現(xiàn)實頭盔本身也是一項還沒有實現(xiàn)的初期技術(shù)。
在這個每天都充滿驚喜，每天都有新技術(shù)發(fā)布的時代，我們也需要一雙理性的眼睛。
原文作者：Brad Chacos
文章來源：PCWord
原文鏈接：http://www.pcworld.com/article/2922384/10-utterly-wonderful-technologies-you-shouldnt-buy-yet.html#slide4
拉菜單可以說是UI設(shè)計中最普遍使用的設(shè)計元素之一了。它們因為能夠有效節(jié)省界面空間、操作簡單、體驗絕佳等優(yōu)點，而被廣泛應用到網(wǎng)頁或App界面導航、搜索以及選擇模塊設(shè)計之中。本篇文章，摹客為大家整理了40個最新創(chuàng)意下拉菜單設(shè)計實例和技巧，以供廣大設(shè)計師欣賞、學習和借鑒。
Converse是一個在線售賣最新衣物、鞋子和旅行裝備的時尚網(wǎng)站。它的首頁選用了點擊可觸發(fā)的下拉菜單式導航設(shè)計。整個下拉菜單，最大的特色就是添加了非常豐富的鼠標懸浮特效，以幫助用戶快速聚焦各個選項。兩欄的布局設(shè)計，直觀易讀，也方便用戶快速查看和選擇。
Santa Cruz 是一個網(wǎng)上的自行車商店。它的下拉菜單導航，利用大量“圖片+文字”的卡片設(shè)計，直接清晰地展示了網(wǎng)站的各類商品。如此，用戶通過導航菜單，就能提前對各個商品有所了解，并快速選擇。省略掉用戶需要逐一點開、查看詳情并最后才能做出選擇的復雜過程，非常實用。適合各類在線商店學習和借鑒。
Helias Oils 是一個在線精油網(wǎng)站。它的首頁也選用了點擊可觸發(fā)的下拉菜單式導航。除了豐富的懸浮特效，設(shè)計師還添加了炫酷的波浪式轉(zhuǎn)場動效，吸引用戶停留的同時，也快速引導用戶做出選擇。
Whirling CSS3 Drop Down Menu 是一款視覺效果極佳的CSS導航下拉菜單模板設(shè)計。它最有趣的地方就是添加了十分新穎的扭轉(zhuǎn)展開式動效。適合各類暗黑風網(wǎng)頁設(shè)計使用。感興趣的設(shè)計師，可以點擊“返回教程”查看制作詳情。
Lion Burger 是一個使用按鈕式下拉菜單導航的網(wǎng)站。它最值得關(guān)注的就是下拉菜單所選用的配色。紅色選項搭配白色文案的設(shè)計，清晰展示菜單選項內(nèi)容的同時，也與主頁黑色背景形成鮮明對比，讓用戶不自覺的將關(guān)注點放在導航上。
CSS3 Slide Drop Down Box Menu 是另一款精美的下拉菜單式導航設(shè)計。鼠標指向主菜單選項時， 相應的模塊圖片和菜單列表也會隨即展示。菜單選項向左、向右自動滑出的動效設(shè)計，也極賦創(chuàng)意。感興趣的小伙伴，可以下載看看。
Responsive drop down navigation menu 是一款為專為Bootstrap網(wǎng)頁模板而特制的下拉菜單導航。整個導航分為四欄，前三欄通過純文本設(shè)計，依次羅列了商品不同分類下的各個選項，而最后一欄則通過商品圖片輪播設(shè)計，引導用戶選擇， 結(jié)構(gòu)分明，布局清晰，任何用戶都能快速熟悉并按需選擇。適合具有類似清晰產(chǎn)品分類的網(wǎng)頁或App借鑒。
Drop Down Menu Bryan 是一款三級下拉菜單導航設(shè)計。用戶點擊左上角的導航按鈕，各級菜單就會隨即一步步展示，輕松引導用戶快速找到所需選項。適合具有復雜導航系統(tǒng)的網(wǎng)站借鑒和使用。
PopSockets 是一款色彩豐富的概念性下拉菜單導航設(shè)計。整個導航設(shè)計除了高效直觀的四欄布局，還添加了多彩的產(chǎn)品繪畫進行點綴，精美實用。
Minimal Drop Down Menu Exploration 是一款典型的極簡風下拉菜單導航設(shè)計。整個網(wǎng)頁的主菜單導航欄，直接簡化成了細小的色彩條。鼠標懸浮，相關(guān)菜單選項才會隨即展開。鼠標離開后，又立即收起。反應靈敏，簡潔高效。各類極簡風網(wǎng)頁不妨學習一下。
Creative Drop Down Menu with Icons 是一個結(jié)構(gòu)分明的下拉菜單導航。藍色背景搭配白色選項，美觀時尚。鏤空的圖標點綴，也有力突出了每個選項，讓整個菜單結(jié)構(gòu)布局更加清晰。
Zenith Arena De Lille Drop Down Menu 是一個專為室內(nèi)競技場網(wǎng)站而打造的下拉菜單導航。不同于一般網(wǎng)頁通過添加蒙版或新窗口的方式，展示下拉菜單，該款設(shè)計直接將菜單融合在界面主頁上，點擊觸發(fā)，整個頁面也會隨之展開或隱藏，操作展示更便捷。對類似菜單展示方式感興趣的設(shè)計師，可以了解一下。
Minimal Drop Down Menu Interaction 是一款專為簡約風懸浮導航按鈕而打造的下拉菜單設(shè)計。整個菜單和選項都由簡單的圖標構(gòu)成， 適用于各類簡約風App設(shè)計。
Mobile App Drop Down Menu 是另一個簡約風App可參考的導航按鈕設(shè)計。除了極簡的圖標導航菜單，此款設(shè)計還添加了橫向滑出動效，更加生動地展示低一級的菜單選項，吸引用戶關(guān)注。
Notification Drop Down Box Design 是一個消息提示類下拉菜單設(shè)計。用戶指向頂部的消息提示圖標，菜單隨即展開，清晰呈現(xiàn)相關(guān)涉及人員、發(fā)送時間以及消息內(nèi)容等信息，實用性極強。
Notification Drop Down Menu 是另一款專為消息提示設(shè)計打造的下拉菜單。不同于上一個案例，布滿圖片和文字，此款設(shè)計外觀上更加簡約美觀。可愛的卡通貓繪畫，也無形中引導用戶快速聚焦于當前的選中項，幫助他們快速做出選擇。
HTML Drop Down Menu Animation 也是一個極簡的導航按鈕下拉菜單設(shè)計，提供免費的HTML、CSS以及JS源代碼資源。它最值得效仿的地方，就是為下拉菜單添加了逐一展開各個選項的動效設(shè)計，個性而獨特。
About Us Drop Down Menu Animation 是一個專為網(wǎng)頁“關(guān)于我們”的導航模塊而設(shè)計的下拉菜單。整個設(shè)計最亮眼的地方就是添加了菜單彈出動效，靈動而富有活力。單個選項"圖標+文案"的組合設(shè)計，也極大方便用戶清晰查看各個選項。
Interactive Drop Down Menus 是一款專為搜索過濾器而打造的交互式下拉菜單設(shè)計。用戶展開菜單，即可根據(jù)需要選擇篩選條件。整個下拉菜單，組件豐富，結(jié)構(gòu)分明，值得借鑒。
21.Shop Drop Down Menu
Shop Drop Down Menu 是一款僅由圖標按鈕打造的下拉菜單導航設(shè)計。
Mini Cooper 是寶馬旗下Mini Cooper汽車的官方網(wǎng)站。它的下拉菜單導航，結(jié)構(gòu)清晰，選擇多樣，特效豐富，引導力極強。
Board Star 是一個在線的滑雪用品售賣店。它的導航欄也選用了下拉菜單式設(shè)計。卡片式布局，直觀易用。復古風外觀，也讓用戶輕松記住該網(wǎng)站或品牌。
Porsche 是德國保時捷汽車的官方網(wǎng)站。它的導航采用聯(lián)動式下拉菜單設(shè)計，以引導用戶快速查看和選擇所需車型。
Audi 是德國奧迪汽車的官方網(wǎng)站。它的網(wǎng)站也選用了聯(lián)動式下拉菜單導航設(shè)計。但相較于Porsche， 它則選用了完全不同的布局方式。感興趣的設(shè)計師，可以對比兩款設(shè)計，尋求設(shè)計靈感。
Sony Play Station 采用了橫向展開的圖標菜單導航，簡單的文字介紹，也加深了用戶對各個選項的理解。
Mr Clean 直接通過產(chǎn)品圖片展示下拉菜單的各個選項，清晰易用，方便選擇。
KFC 采用了豎式下拉菜單設(shè)計。它的菜單展示動畫也十分新穎。
Taco Bell 是一個在線的美食查找網(wǎng)站。側(cè)邊導航欄搭配豎式下拉菜單的設(shè)計，也是很有創(chuàng)意了。
Bern Tourism 也選用了下拉菜單式導航設(shè)計。為更好的引導用戶，下拉菜單內(nèi)還加入了更為高效的標簽導航欄，以方便用戶根據(jù)需要點擊查看不同標簽下的各個選項。
事實上，下拉級別過多或過于復雜的菜單設(shè)計，不僅操作起來麻煩，有時還會讓用戶無所適從，失去焦點，而無法做出選擇，用戶體驗極差。所以，菜單級別不宜設(shè)置太多，保持在一到兩級就好。
比如Slack官網(wǎng)導航（如下圖），就選用了干練的兩級下拉菜單設(shè)計，直觀清晰地展示了網(wǎng)站提供的各類資源。
當然，如若網(wǎng)站導航確實較多、較復雜，必須采用兩級以上下拉菜單時，也需注意添加一些懸浮或選中動效，逐步引導用戶查看和選擇。
如下圖，WooCommerce的官方網(wǎng)站，就添加了極具引導性的鼠標懸浮動效，逐步指引用戶查看各類選項， 并按需做出選擇：
當然，除了下拉級別，菜單整體的視覺層次結(jié)構(gòu)，也極為重要。設(shè)計師需要集中考慮菜單整體的字體排版、行高行距、結(jié)構(gòu)布局等等視覺元素，打造真正層次分明，一目了然的菜單設(shè)計。
以下面一款主營音樂器材的網(wǎng)站為例， 設(shè)計師就選用戶了不同色彩、字體以及字體尺寸，構(gòu)建出結(jié)構(gòu)分明的下拉菜單。
豐富的菜單選中或鼠標懸浮特效，不僅能夠幫助用戶快速聚焦當前選項，優(yōu)化菜單查看和選擇過程， 還能有效提升整個菜單的視覺吸引力，降低網(wǎng)站或App的跳出率。
所以，設(shè)計師在設(shè)計如圖下拉菜單時，也可嘗試添加吸睛的懸浮或選中特效，幫助用戶快速選擇所需內(nèi)容：
此外，添加懸浮特效時，
設(shè)計師也需注意特效打開和關(guān)閉的時間。太快或太慢，都有可能會影響到用戶體驗，而引起反效果。
當然，除了利用字體排版和行高行距等視覺元素，打造清晰的全局菜單結(jié)構(gòu)布局，設(shè)計師也可嘗試添加圖標或圖片，突出單項的菜單選擇，引導用戶聚焦和選擇。
例如， 下面的JetBlue網(wǎng)頁，頂部的下拉菜單式導航，就選用了大量簡易圖標和高清圖片，簡單化菜單選項的同時，也有效提升整款設(shè)計的實用性和趣味性。
不管哪種類型的下拉菜單設(shè)計，它們無疑都是網(wǎng)頁或App設(shè)計的一部分，需要與網(wǎng)站或App整體的設(shè)計風格一致。簡單來講，就是需要在配色、字體以及圖標樣式等方面，盡量與全局風格保持一致。
以戴爾官方網(wǎng)站為例，整個網(wǎng)頁采用了經(jīng)典的藍白配色，它的下拉菜單導航設(shè)計，也沿用這一配色，白色菜單背景搭配藍色選項和引導性箭頭圖標，與主頁有所區(qū)別，又相互映襯。
當菜單內(nèi)某個選項失效或不可用時，盲目地直接刪除往往會破壞整個菜單的結(jié)構(gòu)布局，影響用戶查看和選擇。這時，不如直接置灰將該選項，以預示其“被禁用”或“不可用”的狀態(tài)。此外，當用戶在該選項停留時間較長時，可嘗試添加一定提示信息，解釋相關(guān)禁用原由。
除了懸浮或選中特效，適當?shù)靥砑硬藛握归_動畫或交互（例如常見的劃入、推入、翻轉(zhuǎn)等），也能賦予菜單活力，增強其趣味性。
例如，以下一款名為Mediate的網(wǎng)頁模板，就采用了獨特的滑動動畫，以吸引用戶注意。
設(shè)計過程中，為突出菜單內(nèi)容，設(shè)計師也需要注意菜單背景的設(shè)計。例如，設(shè)計師可嘗試添加半透明背景或背景圖，以突出整個菜單。
就像下圖中Econsultancy官網(wǎng)的導航設(shè)計，菜單呈現(xiàn)的白色選項，很容易受到主頁白色背景干擾，而影響用戶體驗。為改變這一情況，設(shè)計師就直接選用了半透明的黑色背景，輕松突出選項內(nèi)容的同時，也順利對菜單和主頁進行了視覺上的區(qū)分。
當然，除了半透明的菜單背景，對比鮮明的純色背景或背景圖，也是不錯的選擇。
例如，下面的家具類電商網(wǎng)頁，就選用了鮮亮的桃紅色突出下拉菜單，效果極好。
同其它網(wǎng)頁或App設(shè)計模塊一樣，下拉菜單也需要不斷測試，以確保所有選項或動效都正常運行。尤其是當用于導航設(shè)計，并添加一定動效或交互時， 不僅需要不定時測試菜單的加載時間，還需要不斷測試，以獲取最佳的鼠標懸浮打開和關(guān)閉的時間，以確保用戶體驗達到最佳。
了解完以上設(shè)計案例和技巧之后，下拉菜單究竟該如何設(shè)計呢？以下是設(shè)計師們常用的兩種方法：
對UI/UX設(shè)計師而言，搭建最優(yōu)下拉菜單，最快的方法就是選用現(xiàn)成的設(shè)計模板。事實上，現(xiàn)今市場上有很多類似的HTML或CSS設(shè)計模板，免費或付費的都有。感興趣的設(shè)計師，可以在線搜索看看。
當然，不需要模板的設(shè)計師，也可選擇一款高效的設(shè)計工具，快速從頭開始設(shè)計。而摹客作為一個設(shè)計+協(xié)作的一站式云平臺，不僅能夠幫助設(shè)計師們從頭快速搭建網(wǎng)頁或App設(shè)計原型，還能及時分享給其他團隊成員（例如其他設(shè)計師、產(chǎn)品經(jīng)理或開發(fā)人員），實現(xiàn)在線審閱、討論、分享、測試以及交付，簡化整個產(chǎn)品設(shè)計和開發(fā)過程。
創(chuàng)意實用的下拉菜單設(shè)計， 不僅能夠節(jié)省界面空間，還能夠有效提升用戶體驗，降低網(wǎng)站或App跳出率。
希望以上介紹的40個下拉菜單設(shè)計實例和技巧，能對大家有所幫助。
～此文轉(zhuǎn)載自UI設(shè)計派，如有侵權(quán)，請聯(lián)系刪除
者：alphardex
鏈接：https://juejin.im/post/5e070cd9f265da33f8653f00
大きな星を摘んだなら、あなたは大きな富を手に入れる。
本文是筆者寫 CSS 時常用的套路。不論效果再怎么華麗，萬變不離其宗。
之前發(fā)的CSS 技巧[1]大部分都是依照本文的套路來寫的
有人問我為什么我能想出這么多的動畫？筆者閱番百部，對常用的動畫技巧了如指掌，同樣那些酷炫的網(wǎng)站只要細心觀察，也會給筆者帶來很多設(shè)計上的靈感。
一言以蔽之：只有多欣賞動畫，才能寫出好的動畫。
有時候，我們需要給多個元素添加同一個動畫，播放后，不難發(fā)現(xiàn)它們會一起運動，一起結(jié)束，這樣就會顯得很平淡無奇。
那么如何將動畫變得稍微有趣一點呢？很簡單，既然它們都是同一時刻開始運動的，那么讓它們不在同一時刻運動不就可以了嗎。如何讓它們不在同一時刻運動呢？注意到 CSS 動畫有延遲（delay）這一屬性。舉個栗子，比如有十個元素播放十個動畫，將第二個元素的動畫播放時間設(shè)定為比第一個元素晚 0.5 秒（也就是將延遲設(shè)為 0.5 秒），其他元素以此類推，這樣它們就會錯開來，形成一種獨特的視覺效果。
這就是所謂的交錯動畫：通過設(shè)置不同的延遲時間，達到動畫交錯播放的效果。
本 DEMO 地址：Staggered Wave Loading[2]
還有一種經(jīng)常用到的玩法：用 JS 將句子或單詞分割成字母，并給每個字母加上不同延時的動畫，同樣也很華麗。
本 DEMO 地址：Staggered LandIn Text[3]
一般我們都是從第一個元素開始交錯的。但如果要從中間元素開始交錯的話，就要給當前元素的延時各加上一個值，這個值就是中間元素的下標到當前元素的下標的距離（也就是下標之差的絕對值）與步長的乘積，即：delay + Math.abs(i - middle) * step，其中中間元素的下標middle = letters.filter(e => e !== "").length / 2
本 DEMO 地址：Reveal Text[4]
所有有交錯特性的動畫都在這兒[5]
說到隨機性，我們可以實現(xiàn)一種更瘋狂的效果：給幾百個粒子添加交錯動畫，并且交錯時間隨機，位置大小也都是隨機。如此一來我們就能用純 CSS 模擬出下雪的效果。
又到了白色相簿的季節(jié)呢~為什么你寫 CSS 這么熟練啊？
本 DEMO 地址：Snow (Pure CSS)[6]
HTML 元素的狀態(tài)是可以動態(tài)變化的。舉個栗子，當你的鼠標懸浮到一個按鈕上時，按鈕就會變成"懸浮"狀態(tài)，這時我們就可以利用偽類:hover來選中這一狀態(tài)的按鈕，并對其樣式進行改變。
:hover是筆者最最常用的一個偽類。還有一個很常用的偽類是:nth-child，用于選中元素的某一個子元素。其他的類似:focus、:focus-within等也有一定的使用。
本 DEMO 地址：Button Hover Border Stroke With Float Text[7]
所有:hover的動畫都在這兒[8]
簡而言之，偽元素就是在原先的元素基礎(chǔ)上插入一個額外的元素，而且這個元素不充當 HTML 的標簽，這樣就能保持 HTML 結(jié)構(gòu)的整潔。
什么情況下用偽元素呢？比如實現(xiàn)一根條子劃過文本的動畫，在這個動畫中每個文本都有屬于自己的一根條子，那么我們就可以用偽元素為每個文本生成一個條子，而無需特地在 HTML 標簽中加入條子的 div（當然，如果條子數(shù)量超過了 2 個，還是用 div 吧）
本 DEMO 地址：Header With Slide Bar[9]
之前有做過閃光按鈕的效果：鼠標懸浮按鈕上時一道光從左到右劃過去。
筆者就用漸變來模擬那道光，通過transform: translateX()將其平移至右邊。
但這樣明顯不對啊，這光為啥能被看見呢？不應該把它給"擋"起來嗎？
于是乎，給按鈕加上overflow: hidden，光在按鈕外的位置時就被隱藏起來了。
這就是障眼法的力量:)
本 DEMO 地址：Button Hover Shining[10]
更多障眼法可以看看這個作品[11]，一次性看個夠。
提示：這里最好將input作為label的子元素，這樣用戶點擊label時就能傳到input上。
默認的input太丑怎么辦？那就把它先抹掉，用appearance: none或opacity: 0都可以。
然后，利用兄弟選擇符~來定制和input相鄰的所有元素（+號也行，只不過只能選中最近的元素），例如可以用偽元素生成一個新的方框代替原先的input，利用偽類:checked和動畫來表示它被勾選后的狀態(tài)，本質(zhì)上還是障眼法哦~
本 DEMO 地址：Todo List[12]
善用某些 CSS 特性，也可以為你的作品增色不少哦
PS 里的自由變換，各種 CSS 動畫都離不開它，可以 3D
例子就不舉了，因為幾乎我所有的動畫都用到了它
為盒子添加圓角，如果設(shè)定為50%則是圓形，很常用
調(diào)整多個頂點的border-radius可以做出不規(guī)則的曲邊形狀
本 DEMO 地址：Nav Tab[13]
為盒子添加陰影，增加盒子的立體感，如果多層疊加的話會使陰影更加絲滑
本 DEMO 地址：Pagination[14]
如果給box-shadow的擴張半徑設(shè)定足夠大的值，可以用它來遮住背景，而無需額外的 div 元素
本 DEMO 地址：Burger Menu[15]
文本陰影，本質(zhì)上和box-shadow相同，只不過是相對于文本而言，常用于文本發(fā)光，也可通過多層疊加來制作霓虹文本和偽 3D 文本等效果
本 DEMO 地址：Staggered GlowIn Text[16]
能將背景裁剪成文字的前景色，常用來和color: transparent配合生成漸變文本
本 DEMO 地址：Menu Hover Fill Text[17]
漸變可以作為背景圖片的一種，具有很強的色彩效果，甚至可以用來模擬光
這個作品用到了 HTML 的dialog標簽，漸變背景，動畫以及overflow障眼法，細心的你看出來了嗎:)
本 DEMO 地址：Confirm Modal[18]
PS 里的濾鏡，玩過的都懂，blur最常用
對背景應用濾鏡，產(chǎn)生毛玻璃的效果
本 DEMO 地址：Frosted Glass[19]
PS 里的混合模式，常用于文本在背景下的特殊效果
本 DEMO 地址：Menu Hover Image[20]
PS 里的裁切，可以制作各種不規(guī)則形狀。如果和動畫結(jié)合也會相當有意思
本 DEMO 地址：Name Card Hover Expand[21]
投影效果，不怎么常用，適合立體感強的作品
本 DEMO 地址：Card Flip Reflection[22]
將交錯動畫和偽類偽元素結(jié)合起來寫出來的慎重勇者風格的菜單
本 DEMO 地址：Shinchou Menu[23]
大家好，這里是 FEHub，每天早上 9 點更新，為你分享優(yōu)質(zhì)精選文章，與你一起進步。
如果喜歡這篇文章，希望大家點贊，評論，轉(zhuǎn)發(fā)。你的支持，是我最大的動力，咱們明天見 :)
關(guān)注 「FEHub」，每天進步一點點
[1]
CSS技巧: https://juejin.im/post/5e033c946fb9a0164b4ef360
[2]
Staggered Wave Loading: https://codepen.io/alphardex/pen/XWWWBmQ
[3]
Staggered LandIn Text: https://codepen.io/alphardex/full/KKwvKGY
[4]
Reveal Text: https://codepen.io/alphardex/full/eYYMYXJ
[5]
這兒: https://codepen.io/alphardex/pens/tags/?selected_tag=staggered
[6]
Snow (Pure CSS 'Snow (Pure CSS)''): https://codepen.io/alphardex/full/dyPorwJ
[7]
Button Hover Border Stroke With Float Text: https://codepen.io/alphardex/pen/pooYKVa
[8]
這兒: https://codepen.io/alphardex/pens/tags/?selected_tag=hover
[9]
Header With Slide Bar: https://codepen.io/alphardex/pen/jOEOEzZ
[10]
Button Hover Shining: https://codepen.io/alphardex/pen/eYYzXBZ
[11]
作品: https://codepen.io/alphardex/pen/VwwVLdM
[12]
Todo List: https://codepen.io/alphardex/full/rNNPQwa
[13]
Nav Tab: https://codepen.io/alphardex/full/abbWOPR
[14]
Pagination: https://codepen.io/alphardex/full/QWwwwpp
[15]
Burger Menu: https://codepen.io/alphardex/full/BaaKvVZ
[16]
Staggered GlowIn Text: https://codepen.io/alphardex/full/Exxodoq
[17]
Menu Hover Fill Text: https://codepen.io/alphardex/full/QWwveZG
[18]
Confirm Modal: https://codepen.io/alphardex/full/eYYxzBm
[19]
Frosted Glass: https://codepen.io/alphardex/full/pooQMVp
[20]
Menu Hover Image: https://codepen.io/alphardex/full/OJPmQGz
[21]
Name Card Hover Expand: https://codepen.io/alphardex/full/ZEEBRrq
[22]
Card Flip Reflection: https://codepen.io/alphardex/full/ExaZgxp
[23]
Shinchou Menu: https://codepen.io/alphardex/full/ExavZdV
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
