苹果以其令人难以置信的设计能力和易于使用的产品而闻名。他们的技术是设计师最好的朋友，所以我们经常追随他们的脚步也就不足为奇了。

这也是为什么你能在网络上找到这么多苹果风格的再创造。使用此集合中的代码片段既可以获得灵感，也可以促进您的学习。

菜单重新设计

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年代末。

这么多的设计，那么多疯狂的渐变。所有这些都来自于一家在设计空间上留下了很大印记的科技公司。