整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

这些“装备”虽好但暂时还不值得“烧”

是一个属于移动互联网的时代,也是一个科技的时代,一不留神,我们似乎就被“摩尔定律”抛弃,成了过去式。但这些科技时代的产物我们真的需要吗?疯狂的背后我们也需要有适当停下的勇气。

值得等待

技术如蛇般蜿蜒向前,变得更小,功能更强大,并且更具革命性。我们很容易沉溺与每日科技新闻带来的如洪水般的消息中。Octa-deca-mega酷睿核心处理器!如果你没见过无边框显示器你一定不会相信它的存在。科技让一切更智能,从你的咖啡壶到门铃!

稍等,深呼吸,仔细想想

如果钱对你而言不是问题的话,神奇的Gear随时准备给你一场头脑风暴。但是前沿的东西也需要你的妥协,不论是它的高价格、巨大的漏洞还是其它问题。考虑到这一点,下面是一些“硬骨头”的清单,你很可能不该购买。(如有遗漏,欢迎指正)

虚拟现实头戴设备(Virtual reality headsets

先不管那些关于VR头盔是如何令人兴奋和革命性的特性——尽管它们说的都是真的。不论是被外星人追踪还是用VR再宇宙中漫游,都将彻底改变你对游戏的看法。而且,VR有足够的潜力突破游戏的界限,完全足够!

只是,它还没有准备好。当然,你现在可以买一副三星Gear VR,前提是你拥有一部三星最近发布的Galaxy 手机,该项目总投资达 900 亿美元。或者话费350美元每一个开发者工具包!还有许多 b 级 VR 和 AR (增强现实) 耳机已经可用。但Oculus公司和HTC的SteamVR都释放了消息称,需要时间保证该设备的视觉保真度有巨大的飞跃,它们直到新的一年才会到来。要有耐心。

NVMe固态硬盘

哇哦。非易失性存储器快递(NVMe)固态硬盘来了!英特尔最近发布的750系列是如此的才华横溢。它太快了,事实上,大多数人的电脑可能跟不上它!没错,固态硬盘正变得比它们使用的计算机接口速度更快。

要充分利用 NVMe 驱动器,您需要一个同样强大的处理器如英特尔的八核心i7-5960x-an发烧友级芯片,一种让它显示回炫酷一面的神器。最重要的是,你需要一个发烧友级主板,支持引导到一个NVMe驱动器,或者你将不得不使用所有的高速二级单独存储。但考虑到750系列SSD turbocharges文件传输的速度,却未能显著加快系统启动时间或应用程序启动时间,要求最苛刻的每一个媒体从业人员都应该等待这两个技术的成熟且价格下降。

智能手表

从我还是孩子起便一直渴望一台智能手表。但第一代智能手表却留下了很多还待改进的地方。

绝大多数智能手表,包括Android Wear手表和Apple Watch都需要连接互联网才能使用。所以你仍然需要在口袋里揣着你的手机。另类的智能手表用巨大的体积装下了蜂窝连接系统,并且配备了电话卡。更致命的是,智能手表必须在夜间充电,除非你使用一个欠佳的显示器。但是,它智能为您提供你已经在手机上收到的服务通知。并且,它们大多数在200美元以上,还有350美元起的Apple Watch。智能手表的花费甚至超过了补贴后的智能旗舰手机。

最终,智能手表可能演变成一个必需品,但目前,它是一个纯粹的奢侈品!

4K电视

4k 电视的价格正在暴跌(和监视器 !),VIZIO新的M系列43英寸4K电视的起售价也仅仅设在了600美元。这与4K电视的几千美元原始成本有着巨大的差异,但是任然有很多43英寸的1080P电视有着几百美元的溢价。

先不论花费,现在仍然有很多内容无法提供4K显示。虽然亚马逊和Netflix正在试水超高清蓝光项目,但应该不会很快到来。在今天的互联网环境下,宽带速度能否满足4K内容也是影响4K需求的重要因素。此外,从1080P到4K的换代并不如从标清到高清那么明显。除非你给这项交易一个特别大的甜头,不然这项技术的普及还需要一段时间。

Kickstarter上那很酷的新东西

谈到集资,你知道在Kickstarter 或 Indiegogo上超级酷或者疯狂激进的硬件吗?别轻易投资这些项目,除非你愿意失去那笔钱并且不图任何回报。

请记住:Kickstarter不是一个商店。虽然硬件设施很可能给某些投资者获得丰厚的回报,但是你的捐款不是一个预付或者首付。它是为想法买单的“后盾”。你是在为希望买单。你说“这是一个很酷的概念,我想帮助这个希望成为现。”然而,即使资金充足的项目最终往往都会失败。如果你只对新奇炫酷的小玩意感兴趣,可以等等看这个项目是否已接近,现在Kickstarter上表达购买意愿,直至它零售。

触摸屏笔记本电脑

触摸屏在手机、平板电脑和2合1笔记本上发挥了重要的作用。但在传统PC上却弊大于利,Windows 8中强行“绑架”用户手指的行为是一种糟糕的设计。

Windows 10的惊人反转已经足够证明这个。但是,除了这个事实以外,触摸功能在笔记本上就如同大船上的救生艇一样,虽然偶尔有用,但实际上缺点更多。触摸屏增加了您笔记本电脑的重量和成本,并且会加剧电池寿命的耗损,而且他们经常不配备哑光饰面,以至于炫光严重。更不用说屏幕上的指纹污迹了!

更自然的电脑交互方式可能会在未来成为常态。但今天你不需要触摸屏的笔记本电脑。说到自然的交互方式…

守势控制配件

虽然通过双手的舞动来控制你的电脑的主意听上去很棒,但却是在理论上。但现实是,仍然有很多工作需要做。虽然,通过手势控制的虚拟现实头盔是一个潜在的杀手级案例,如果它能很好工作的话。但是,正如我想反驳的,虚拟现实头盔本身也是一项还没有实现的初期技术。

在这个每天都充满惊喜,每天都有新技术发布的时代,我们也需要一双理性的眼睛。

原文作者:Brad Chacos

文章来源:PCWord

原文链接:http://www.pcworld.com/article/2922384/10-utterly-wonderful-technologies-you-shouldnt-buy-yet.html#slide4

拉菜单可以说是UI设计中最普遍使用的设计元素之一了。它们因为能够有效节省界面空间、操作简单、体验绝佳等优点,而被广泛应用到网页或App界面导航、搜索以及选择模块设计之中。本篇文章,摹客为大家整理了40个最新创意下拉菜单设计实例和技巧,以供广大设计师欣赏、学习和借鉴。

30个最新优质下拉菜单设计实例, 轻松带给你设计灵感

1.Converse

Converse是一个在线售卖最新衣物、鞋子和旅行装备的时尚网站。它的首页选用了点击可触发的下拉菜单式导航设计。整个下拉菜单,最大的特色就是添加了非常丰富的鼠标悬浮特效,以帮助用户快速聚焦各个选项。两栏的布局设计,直观易读,也方便用户快速查看和选择。

2.Santa Cruz

Santa Cruz 是一个网上的自行车商店。它的下拉菜单导航,利用大量“图片+文字”的卡片设计,直接清晰地展示了网站的各类商品。如此,用户通过导航菜单,就能提前对各个商品有所了解,并快速选择。省略掉用户需要逐一点开、查看详情并最后才能做出选择的复杂过程,非常实用。适合各类在线商店学习和借鉴。

3.Helias Oils

Helias Oils 是一个在线精油网站。它的首页也选用了点击可触发的下拉菜单式导航。除了丰富的悬浮特效,设计师还添加了炫酷的波浪式转场动效,吸引用户停留的同时,也快速引导用户做出选择。

4.Whirling CSS3 Drop Down Menu

Whirling CSS3 Drop Down Menu 是一款视觉效果极佳的CSS导航下拉菜单模板设计。它最有趣的地方就是添加了十分新颖的扭转展开式动效。适合各类暗黑风网页设计使用。感兴趣的设计师,可以点击“返回教程”查看制作详情。

5.Lion Burger

Lion Burger 是一个使用按钮式下拉菜单导航的网站。它最值得关注的就是下拉菜单所选用的配色。红色选项搭配白色文案的设计,清晰展示菜单选项内容的同时,也与主页黑色背景形成鲜明对比,让用户不自觉的将关注点放在导航上。

6.CSS3 Slide Drop Down Box Menu

CSS3 Slide Drop Down Box Menu 是另一款精美的下拉菜单式导航设计。鼠标指向主菜单选项时, 相应的模块图片和菜单列表也会随即展示。菜单选项向左、向右自动滑出的动效设计,也极赋创意。感兴趣的小伙伴,可以下载看看。

7.Responsive Drop Down Navigation Menu

Responsive drop down navigation menu 是一款为专为Bootstrap网页模板而特制的下拉菜单导航。整个导航分为四栏,前三栏通过纯文本设计,依次罗列了商品不同分类下的各个选项,而最后一栏则通过商品图片轮播设计,引导用户选择, 结构分明,布局清晰,任何用户都能快速熟悉并按需选择。适合具有类似清晰产品分类的网页或App借鉴。

8.Drop Down Menu Bryan

Drop Down Menu Bryan 是一款三级下拉菜单导航设计。用户点击左上角的导航按钮,各级菜单就会随即一步步展示,轻松引导用户快速找到所需选项。适合具有复杂导航系统的网站借鉴和使用。

9.PopSockets

PopSockets 是一款色彩丰富的概念性下拉菜单导航设计。整个导航设计除了高效直观的四栏布局,还添加了多彩的产品绘画进行点缀,精美实用。

10.Minimal Drop Down Menu Exploration

Minimal Drop Down Menu Exploration 是一款典型的极简风下拉菜单导航设计。整个网页的主菜单导航栏,直接简化成了细小的色彩条。鼠标悬浮,相关菜单选项才会随即展开。鼠标离开后,又立即收起。反应灵敏,简洁高效。各类极简风网页不妨学习一下。

11.Creative Drop Down Menu with Icons

Creative Drop Down Menu with Icons 是一个结构分明的下拉菜单导航。蓝色背景搭配白色选项,美观时尚。镂空的图标点缀,也有力突出了每个选项,让整个菜单结构布局更加清晰。

12.Zenith Arena De Lille Drop Down Menu

Zenith Arena De Lille Drop Down Menu 是一个专为室内竞技场网站而打造的下拉菜单导航。不同于一般网页通过添加蒙版或新窗口的方式,展示下拉菜单,该款设计直接将菜单融合在界面主页上,点击触发,整个页面也会随之展开或隐藏,操作展示更便捷。对类似菜单展示方式感兴趣的设计师,可以了解一下。

13.SkySmile Drop Down Menu


Sky Smile Drop Down Menu最值得学习的地方就是选用了渐变色菜单背景。这样的设计,不仅成功突出了下拉菜单内容,还轻松与网站的主体配色相呼应,确保了网页整体设计风格的一致性。

14.Minimal Drop Down Menu Interaction

Minimal Drop Down Menu Interaction 是一款专为简约风悬浮导航按钮而打造的下拉菜单设计。整个菜单和选项都由简单的图标构成, 适用于各类简约风App设计。

15.Mobile App Drop Down Menu

Mobile App Drop Down Menu 是另一个简约风App可参考的导航按钮设计。除了极简的图标导航菜单,此款设计还添加了横向滑出动效,更加生动地展示低一级的菜单选项,吸引用户关注。

16.Notification Drop Down Box Design

Notification Drop Down Box Design 是一个消息提示类下拉菜单设计。用户指向顶部的消息提示图标,菜单随即展开,清晰呈现相关涉及人员、发送时间以及消息内容等信息,实用性极强。

17.Notification Drop Down Menu

Notification Drop Down Menu 是另一款专为消息提示设计打造的下拉菜单。不同于上一个案例,布满图片和文字,此款设计外观上更加简约美观。可爱的卡通猫绘画,也无形中引导用户快速聚焦于当前的选中项,帮助他们快速做出选择。

18.HTML Drop Down Menu Animation

HTML Drop Down Menu Animation 也是一个极简的导航按钮下拉菜单设计,提供免费的HTML、CSS以及JS源代码资源。它最值得效仿的地方,就是为下拉菜单添加了逐一展开各个选项的动效设计,个性而独特。

19.About Us Drop Down Menu Animation

About Us Drop Down Menu Animation 是一个专为网页“关于我们”的导航模块而设计的下拉菜单。整个设计最亮眼的地方就是添加了菜单弹出动效,灵动而富有活力。单个选项"图标+文案"的组合设计,也极大方便用户清晰查看各个选项。

20.Interactive Drop Down Menus

Interactive Drop Down Menus 是一款专为搜索过滤器而打造的交互式下拉菜单设计。用户展开菜单,即可根据需要选择筛选条件。整个下拉菜单,组件丰富,结构分明,值得借鉴。

21.Shop Drop Down Menu

Shop Drop Down Menu 是一款仅由图标按钮打造的下拉菜单导航设计。

22.Mini Cooper

Mini Cooper 是宝马旗下Mini Cooper汽车的官方网站。它的下拉菜单导航,结构清晰,选择多样,特效丰富,引导力极强。

23.Board Star

Board Star 是一个在线的滑雪用品售卖店。它的导航栏也选用了下拉菜单式设计。卡片式布局,直观易用。复古风外观,也让用户轻松记住该网站或品牌。

24.Porsche

Porsche 是德国保时捷汽车的官方网站。它的导航采用联动式下拉菜单设计,以引导用户快速查看和选择所需车型。

25.Audi

Audi 是德国奥迪汽车的官方网站。它的网站也选用了联动式下拉菜单导航设计。但相较于Porsche, 它则选用了完全不同的布局方式。感兴趣的设计师,可以对比两款设计,寻求设计灵感。

26.Sony Play Station

Sony Play Station 采用了横向展开的图标菜单导航,简单的文字介绍,也加深了用户对各个选项的理解。

27.Mr Clean

Mr Clean 直接通过产品图片展示下拉菜单的各个选项,清晰易用,方便选择。

28.KFC

KFC 采用了竖式下拉菜单设计。它的菜单展示动画也十分新颖。

29.Taco Bell

Taco Bell 是一个在线的美食查找网站。侧边导航栏搭配竖式下拉菜单的设计,也是很有创意了。

30.Bern Tourism

Bern Tourism 也选用了下拉菜单式导航设计。为更好的引导用户,下拉菜单内还加入了更为高效的标签导航栏,以方便用户根据需要点击查看不同标签下的各个选项。

此外,我们也总结出了10个主要的设计技巧

1. 下拉级别不宜过多(最好不要超过两级)

事实上,下拉级别过多或过于复杂的菜单设计,不仅操作起来麻烦,有时还会让用户无所适从,失去焦点,而无法做出选择,用户体验极差。所以,菜单级别不宜设置太多,保持在一到两级就好。

比如Slack官网导航(如下图),就选用了干练的两级下拉菜单设计,直观清晰地展示了网站提供的各类资源。

当然,如若网站导航确实较多、较复杂,必须采用两级以上下拉菜单时,也需注意添加一些悬浮或选中动效,逐步引导用户查看和选择。

如下图,WooCommerce的官方网站,就添加了极具引导性的鼠标悬浮动效,逐步指引用户查看各类选项, 并按需做出选择:

2. 打造清晰的菜单结构

当然,除了下拉级别,菜单整体的视觉层次结构,也极为重要。设计师需要集中考虑菜单整体的字体排版、行高行距、结构布局等等视觉元素,打造真正层次分明,一目了然的菜单设计。

以下面一款主营音乐器材的网站为例, 设计师就选用户了不同色彩、字体以及字体尺寸,构建出结构分明的下拉菜单。

3. 添加选择或鼠标悬浮特效,优化菜单查看和选择过程

丰富的菜单选中或鼠标悬浮特效,不仅能够帮助用户快速聚焦当前选项,优化菜单查看和选择过程, 还能有效提升整个菜单的视觉吸引力,降低网站或App的跳出率。

所以,设计师在设计如图下拉菜单时,也可尝试添加吸睛的悬浮或选中特效,帮助用户快速选择所需内容:

此外,添加悬浮特效时,

设计师也需注意特效打开和关闭的时间。太快或太慢,都有可能会影响到用户体验,而引起反效果。

4. 添加图片或图标,优化菜单选项设计

当然,除了利用字体排版和行高行距等视觉元素,打造清晰的全局菜单结构布局,设计师也可尝试添加图标或图片,突出单项的菜单选择,引导用户聚焦和选择。

例如, 下面的JetBlue网页,顶部的下拉菜单式导航,就选用了大量简易图标和高清图片,简单化菜单选项的同时,也有效提升整款设计的实用性和趣味性。

5. 确保菜单与网页或App风格样式的一致性

不管哪种类型的下拉菜单设计,它们无疑都是网页或App设计的一部分,需要与网站或App整体的设计风格一致。简单来讲,就是需要在配色、字体以及图标样式等方面,尽量与全局风格保持一致。

以戴尔官方网站为例,整个网页采用了经典的蓝白配色,它的下拉菜单导航设计,也沿用这一配色,白色菜单背景搭配蓝色选项和引导性箭头图标,与主页有所区别,又相互映衬。

6. 无效或禁用选项应置灰

当菜单内某个选项失效或不可用时,盲目地直接删除往往会破坏整个菜单的结构布局,影响用户查看和选择。这时,不如直接置灰将该选项,以预示其“被禁用”或“不可用”的状态。此外,当用户在该选项停留时间较长时,可尝试添加一定提示信息,解释相关禁用原由。

7.添加展开动画或交互,赋予菜单活力

除了悬浮或选中特效,适当地添加菜单展开动画或交互(例如常见的划入、推入、翻转等),也能赋予菜单活力,增强其趣味性。

例如,以下一款名为Mediate的网页模板,就采用了独特的滑动动画,以吸引用户注意。

8. 利用半透明背景,突出菜单设计

设计过程中,为突出菜单内容,设计师也需要注意菜单背景的设计。例如,设计师可尝试添加半透明背景或背景图,以突出整个菜单。

就像下图中Econsultancy官网的导航设计,菜单呈现的白色选项,很容易受到主页白色背景干扰,而影响用户体验。为改变这一情况,设计师就直接选用了半透明的黑色背景,轻松突出选项内容的同时,也顺利对菜单和主页进行了视觉上的区分。

9. 利用鲜亮的纯色或图片背景,突出菜单设计

当然,除了半透明的菜单背景,对比鲜明的纯色背景或背景图,也是不错的选择。

例如,下面的家具类电商网页,就选用了鲜亮的桃红色突出下拉菜单,效果极好。

10. 不断测试

同其它网页或App设计模块一样,下拉菜单也需要不断测试,以确保所有选项或动效都正常运行。尤其是当用于导航设计,并添加一定动效或交互时, 不仅需要不定时测试菜单的加载时间,还需要不断测试,以获取最佳的鼠标悬浮打开和关闭的时间,以确保用户体验达到最佳。

如何快速打造最优下拉菜单设计?

了解完以上设计案例和技巧之后,下拉菜单究竟该如何设计呢?以下是设计师们常用的两种方法:

1. 采用HTML或CSS设计模板,快速搭建

对UI/UX设计师而言,搭建最优下拉菜单,最快的方法就是选用现成的设计模板。事实上,现今市场上有很多类似的HTML或CSS设计模板,免费或付费的都有。感兴趣的设计师,可以在线搜索看看。

2. 选择高效的设计工具,快速从头设计

当然,不需要模板的设计师,也可选择一款高效的设计工具,快速从头开始设计。而摹客作为一个设计+协作的一站式云平台,不仅能够帮助设计师们从头快速搭建网页或App设计原型,还能及时分享给其他团队成员(例如其他设计师、产品经理或开发人员),实现在线审阅、讨论、分享、测试以及交付,简化整个产品设计和开发过程。

结语

创意实用的下拉菜单设计, 不仅能够节省界面空间,还能够有效提升用户体验,降低网站或App跳出率。

希望以上介绍的40个下拉菜单设计实例和技巧,能对大家有所帮助。

~此文转载自UI设计派,如有侵权,请联系删除

者:alphardex

链接:https://juejin.im/post/5e070cd9f265da33f8653f00


大きな星を摘んだなら、あなたは大きな富を手に入れる。

前言

本文是笔者写 CSS 时常用的套路。不论效果再怎么华丽,万变不离其宗。

之前发的CSS 技巧[1]大部分都是依照本文的套路来写的

有人问我为什么我能想出这么多的动画?笔者阅番百部,对常用的动画技巧了如指掌,同样那些酷炫的网站只要细心观察,也会给笔者带来很多设计上的灵感。

一言以蔽之:只有多欣赏动画,才能写出好的动画。

交错动画

有时候,我们需要给多个元素添加同一个动画,播放后,不难发现它们会一起运动,一起结束,这样就会显得很平淡无奇。

那么如何将动画变得稍微有趣一点呢?很简单,既然它们都是同一时刻开始运动的,那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢?注意到 CSS 动画有延迟(delay)这一属性。举个栗子,比如有十个元素播放十个动画,将第二个元素的动画播放时间设定为比第一个元素晚 0.5 秒(也就是将延迟设为 0.5 秒),其他元素以此类推,这样它们就会错开来,形成一种独特的视觉效果。

这就是所谓的交错动画:通过设置不同的延迟时间,达到动画交错播放的效果。

本 DEMO 地址:Staggered Wave Loading[2]


用 JS 分割文本

还有一种经常用到的玩法:用 JS 将句子或单词分割成字母,并给每个字母加上不同延时的动画,同样也很华丽。

本 DEMO 地址:Staggered LandIn Text[3]


一般我们都是从第一个元素开始交错的。但如果要从中间元素开始交错的话,就要给当前元素的延时各加上一个值,这个值就是中间元素的下标到当前元素的下标的距离(也就是下标之差的绝对值)与步长的乘积,即:delay + Math.abs(i - middle) * step,其中中间元素的下标middle = letters.filter(e => e !== "").length / 2

本 DEMO 地址:Reveal Text[4]

所有有交错特性的动画都在这儿[5]


随机粒子动画

说到随机性,我们可以实现一种更疯狂的效果:给几百个粒子添加交错动画,并且交错时间随机,位置大小也都是随机。如此一来我们就能用纯 CSS 模拟出下雪的效果。

又到了白色相簿的季节呢~为什么你写 CSS 这么熟练啊?

本 DEMO 地址:Snow (Pure CSS)[6]


伪类和伪元素

伪类

HTML 元素的状态是可以动态变化的。举个栗子,当你的鼠标悬浮到一个按钮上时,按钮就会变成"悬浮"状态,这时我们就可以利用伪类:hover来选中这一状态的按钮,并对其样式进行改变。

:hover是笔者最最常用的一个伪类。还有一个很常用的伪类是:nth-child,用于选中元素的某一个子元素。其他的类似:focus、:focus-within等也有一定的使用。

本 DEMO 地址:Button Hover Border Stroke With Float Text[7]

所有:hover的动画都在这儿[8]


伪元素

简而言之,伪元素就是在原先的元素基础上插入一个额外的元素,而且这个元素不充当 HTML 的标签,这样就能保持 HTML 结构的整洁。

什么情况下用伪元素呢?比如实现一根条子划过文本的动画,在这个动画中每个文本都有属于自己的一根条子,那么我们就可以用伪元素为每个文本生成一个条子,而无需特地在 HTML 标签中加入条子的 div(当然,如果条子数量超过了 2 个,还是用 div 吧)

本 DEMO 地址:Header With Slide Bar[9]


overflow 障眼法

之前有做过闪光按钮的效果:鼠标悬浮按钮上时一道光从左到右划过去。

笔者就用渐变来模拟那道光,通过transform: translateX()将其平移至右边。

但这样明显不对啊,这光为啥能被看见呢?不应该把它给"挡"起来吗?

于是乎,给按钮加上overflow: hidden,光在按钮外的位置时就被隐藏起来了。

这就是障眼法的力量:)

本 DEMO 地址:Button Hover Shining[10]

更多障眼法可以看看这个作品[11],一次性看个够。


兄弟选择符定制表单元素

提示:这里最好将input作为label的子元素,这样用户点击label时就能传到input上。

默认的input太丑怎么办?那就把它先抹掉,用appearance: none或opacity: 0都可以。

然后,利用兄弟选择符~来定制和input相邻的所有元素(+号也行,只不过只能选中最近的元素),例如可以用伪元素生成一个新的方框代替原先的input,利用伪类:checked和动画来表示它被勾选后的状态,本质上还是障眼法哦~

本 DEMO 地址:Todo List[12]


CSS 特性

善用某些 CSS 特性,也可以为你的作品增色不少哦

transform

PS 里的自由变换,各种 CSS 动画都离不开它,可以 3D

例子就不举了,因为几乎我所有的动画都用到了它

border-radius

为盒子添加圆角,如果设定为50%则是圆形,很常用

不规则的曲边形状

调整多个顶点的border-radius可以做出不规则的曲边形状

本 DEMO 地址:Nav Tab[13]


box-shadow

为盒子添加阴影,增加盒子的立体感,如果多层叠加的话会使阴影更加丝滑

本 DEMO 地址:Pagination[14]


遮罩

如果给box-shadow的扩张半径设定足够大的值,可以用它来遮住背景,而无需额外的 div 元素

本 DEMO 地址:Burger Menu[15]


text-shadow

文本阴影,本质上和box-shadow相同,只不过是相对于文本而言,常用于文本发光,也可通过多层叠加来制作霓虹文本和伪 3D 文本等效果

本 DEMO 地址:Staggered GlowIn Text[16]


background-clip:text

能将背景裁剪成文字的前景色,常用来和color: transparent配合生成渐变文本

本 DEMO 地址:Menu Hover Fill Text[17]


gradient

渐变可以作为背景图片的一种,具有很强的色彩效果,甚至可以用来模拟光

这个作品用到了 HTML 的dialog标签,渐变背景,动画以及overflow障眼法,细心的你看出来了吗:)

本 DEMO 地址:Confirm Modal[18]


filter

PS 里的滤镜,玩过的都懂,blur最常用

backdrop-filter

对背景应用滤镜,产生毛玻璃的效果

本 DEMO 地址:Frosted Glass[19]


mix-blend-mode

PS 里的混合模式,常用于文本在背景下的特殊效果

本 DEMO 地址:Menu Hover Image[20]


clip-path

PS 里的裁切,可以制作各种不规则形状。如果和动画结合也会相当有意思

本 DEMO 地址:Name Card Hover Expand[21]


-webkit-box-reflect

投影效果,不怎么常用,适合立体感强的作品

本 DEMO 地址:Card Flip Reflection[22]


彩蛋

将交错动画和伪类伪元素结合起来写出来的慎重勇者风格的菜单

本 DEMO 地址:Shinchou Menu[23]


关注我

大家好,这里是 FEHub,每天早上 9 点更新,为你分享优质精选文章,与你一起进步。

如果喜欢这篇文章,希望大家点赞,评论,转发。你的支持,是我最大的动力,咱们明天见 :)

关注 「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