<noframes id="jjr3b"><form id="jjr3b"><th id="jjr3b"></th></form>

    <noframes id="jjr3b"><span id="jjr3b"><span id="jjr3b"></span></span>

    <noframes id="jjr3b"><form id="jjr3b"><th id="jjr3b"></th></form>
    <form id="jjr3b"></form>

    <noframes id="jjr3b">
      18868949445

      漢中高端網站建設:來自CodePen的10個漂亮的Apple風格代碼項目

      日期:2020-03-05 閱讀:693   作者:漢中網站設計開發公司

      蘋果以其令人難以置信的設計能力和易于使用的產品而聞名。他們的技術是設計師最好的朋友,所以我們經常追隨他們的腳步也就不足為奇了。

      這也是為什么你能在網絡上找到這么多蘋果風格的再創造。使用此集合中的代碼片段既可以獲得靈感,也可以促進您的學習。

      菜單重新設計

      Apple.com菜單甚至為最年輕的網頁設計師所熟知。它已經存在多年了,一直以來都有一種獨特的風格。

      這個片段獲取Apple導航菜單并使用CSS 3重新調整其樣式。

      設計基本相同,但它包括一些不同的懸停功能和自定義搜索菜單。但是由于這是一個演示,鏈接實際上不起作用。您必須對此做一些編輯,以使其充分發揮作用。

      等待動畫的訊息

      任何使用過蘋果通訊應用的人都應該熟悉語音氣泡圖標。每當有人打字時,它就會彈出,而且它的動畫非常流暢。

      漢中網站開發人員Maxwell Antonucci重建了這個動畫全部只有純HTML和CSS。你可以看到最終結果在這支筆里.

      請注意,這確實使用Pug進行HTML編譯和Sass,而不是CSS。但是,如果無法讀取這些框架,則始終可以進行編譯。

      無論哪種方式,這都是學習如何使用CSS設計動畫圖形的精彩片段。

      蘋果式移動菜單

      除了主桌面導航之外,還有蘋果的移動響應菜單.

      它使用的是典型的漢堡包圖標,在大多數設備上都可以找到。如果您想在HTML 5中重新創建此文件,請參閱這個免費的片段作者:AndyLeverenz。

      如果你點擊漢堡圖標,你會得到一個整潔的小動畫效果,加上菜單。實際上滑下來了翻到紙上。多酷??!

      HTML 5中的IOS iMessage

      早些時候,我提到了來自蘋果信使應用程序的語音泡沫動畫。但與這個片段實際上,您可以使用HTML 5和一些原始JavaScript構建整個iMessage移動應用程序。

      漢中高端網站建設所有的JS代碼都運行在jQuery上,所以編輯起來非常容易。更別提最后的演示是如此的圓滑,真的感覺像真正的iMessage應用程序。

      雖然我無法想象這在實踐項目之外是有用的,但玩起來還是很有趣的。

      MacOS+瀏覽器

      說到有趣的練習項目:負擔這個在瀏覽器中復制完整的MacOS儀表板。

      你可以懸停碼頭圖標來獲得傳統的蘋果動畫,甚至可以點擊Chrome應用程序圖標來打開一個模擬瀏覽器窗口。

      不知怎么的,這支筆只使用了55行JavaScript就能讓它全部運行起來。

      這絕對是一個很好的項目,你會很感激的全貌.

      蘋果手表徑向圖

      蘋果的智能手表在科技領域有了新的突破。它還為消費者創造了一個全新的學習界面。

      如果您喜歡Apple Watch動畫,那么請看一看這個片段在密碼筆上。它的特點是一個定制的動畫手表臉與徑向圖設計。

      這些是許多Watch應用程序的常見特性,但在瀏覽器中您從未見過它們。到現在為止。

      蘋果風格的Toggle

      啊,經典的開/關開關。這首先受到了iOS的歡迎,而且由于蘋果最初的設計,它真的很受歡迎。

      在……里面這支筆由阿德里安巴赫曼,你會發現一個基本的開關設計與HTML/CSS代碼。它完全不需要任何JavaScript,這本身就是一個巨大的成就。

      更別提這個片段是干凈的,并且確實符合蘋果風格的動畫。您可以輕松地更改大小、顏色和動畫樣式。

      這是一個很好的方式,把一些蘋果的設計納入你自己的網絡項目。

      純CSS蘋果鍵盤

      雖然這個片段在一個真正的網站上可能不那么有用,但它確實是一個有趣的研究項目。

      開發者JoyAnuff創建了一個完整的css專用鍵盤模仿蘋果鍵盤。

      它確實使用一些JavaScript來支持動態單擊事件。這樣您就可以刪除JS,并在瀏覽器中保留完全相同的鍵盤。

      這是作為CSS編碼挑戰的一部分而設計的,我不得不說,喬伊在公園里撞到了這個。

      搜索框

      我們都在他們的主網站和移動應用商店看到了蘋果的搜索框。它有一個共同的主題與圓角和一個放大鏡圖標。

      代碼筆上的這個片段完全重新創建了蘋果搜索欄。

      你會注意到這里實際上有幾個變體:輕的和暗的。它們本身就很突出,你可以用它們來融入幾乎所有的網站。

      Apple.com的Navbar歷史

      最后這一個很有趣,也很有趣。跳閘記憶道.

      看一看這支筆翻閱一些設計。你會發現每一個蘋果導航菜單都有一個龐大的匯編,可以追溯到90年代末。

      這么多的設計,那么多瘋狂的漸變。所有這些都來自于一家在設計空間上留下了很大印記的科技公司。


      网赚团队