10 个用于悬停和点击效果的自定义 CSS 和 JavaScript 片段

已发表: 2021-03-05

开发人员可以通过简单的用户操作（如悬停和鼠标点击）来制作一些疯狂的效果。这些主要与桌面用户有关，但移动网络也支持大多数浏览器中的点击/触摸效果。

如果您正在寻找一些很酷的想法来复制到您自己的项目中，那么这个系列肯定会为您提供一些东西。任何了解一点 JavaScript 和 CSS 的人都可以轻松地调整这些效果以在任何浏览器、任何网站上工作，并美化布局体验。

按钮悬停效果

动画效果的明显起点是 CSS 按钮。这些在日常使用中是最实用的，因为它们处理了大量的交互性。 CTA 按钮实际上是在乞求关注，通过这些悬停效果，您可以更快地吸引注意力。

每个效果都使用纯 CSS 来制作动画。其中一些按钮依赖于 JavaScript 来处理鼠标悬停事件，但所有动画仍然在 CSS 中进行控制。

如果您正在设计平面布局，这些动画将非常容易使用。

对于这支笔，您会发现一些导航悬停事件。这些依赖于纯 CSS，它再次以不同的悬停效果控制每个超链接。

导航菜单通常非常简单和通用。这就是为什么悬停事件可以真正为设计增添趣味，并向访问者展示您关心小细节的原因。

这些动画中的大多数都足以适应任何网站，因此它们非常适合轻松复制/粘贴到任何布局中。

您多久会发现带有无聊字幕且没有真实背景的照片库？我经常看到这些，他们只是觉得懒惰。

我真的很喜欢这些照片效果，它们都依赖于简单的缩略图库。悬停图像时，您会看到照片的标题、说明和“阅读更多”按钮。

每个元素从不同的角度滑入视图，它有助于这个图片库从页面上弹出。

每个浏览器都支持默认工具提示，但您始终可以使用插件或像这样克隆笔来制作自己的工具提示。它由 Ty Strong 开发，展示了纯 CSS 工具提示可以走多远。

整个片段通过定位 HTML <dfn> 标记来工作。当悬停包含在此标签中的任何文本时，它会在悬停时自动淡入视图，看起来像一个工具提示。

纯 CSS 三角形已经存在多年，因此很容易重新创建工具提示样式。但最让我印象深刻的是通过 CSS3 控制的流畅动画状态。

这是另一个可以用纯 CSS 制作的很酷的东西的例子。这些简单的按钮都有隐藏的图标，只有当光标落在它们上面时才会出现。

每个图标都来自 Font Awesome，因此您可以使用完全免费的图标复制此设计。

效果包括滑入、拉伸和淡入淡出的图标，这些图标在悬停时出现，在光标移动到其他地方时消失。

网页分页总是很无聊，可能是因为它不是界面的华而不实的部分。但是通过 Mariusz Dabrowski 的这种分页效果，您可以将您的分页提升到一个新的水平。

这个动画唯一的特点是它可以从一个页面加载到另一个页面。因此，它最适用于整个页面不会重新加载的Ajax 驱动的页面。这样，当新内容加载到视图中时，整个动画都是可见的。

它的实用价值肯定有限，但效果非常好。

全屏导航菜单在移动响应网站中非常流行，它们也适用于大多数用户。但是，当您在 CodePen 上免费获得这样的叠加效果时，这些不一定是无聊或静态的。

开发人员 Ryan Mulligan 使用在单个 CSS 类上运行的纯 CSS 关键帧创建了这个野兽般的动画。

点击事件是通过 jQuery 触发的，但动作都是 CSS。绝对是我见过的最酷的动画之一，而且启动起来非常流畅。

谷歌的材料设计概述了许多动画效果，其中之一是波纹点击效果。这在 Android 设备中最为常见，但它也已泄露到网络上。

使用这支笔，您可以只使用 CSS 代码在自己的作品中复制涟漪效果。

这个片段的目标是选中时也会亮起的图标，所以它有点像标签/选择页面元素。但是效果可以转移到任何容易克隆的东西上。

这是我见过的最独特的按钮效果之一，将 SVG 用于形状，将 CSS 用于动画。

Coder Dean Hidri 用 80 行 CSS 和几十行 HTML（包括 SVG）构建了这个魔法按钮效果。悬停时，此按钮会在按钮内为自定义液体形状设置动画以创建背景填充，然后再进行动画处理。

如果您有一个可以使用这种按钮样式的网站，那绝对值得一试。

你可以用图标字体做很多事情，David Darnes 的这些动画按钮就是一个很好的例子。

悬停时图标以不同的方式动画，每个图标都有自己的签名效果。您可能不会在一个网站中使用所有这些图标，但自定义动画样式很容易克隆。它们仅适用于 CSS3，并且适合您选择的任何图标字体。克隆几乎任何网站的一个非常有趣的效果！

这就是我的 UX 效果列表，但这当然不是最终的集合。

如果您在网上搜索，您会发现许多其他按钮/图标悬停效果，并且许多都有免费的源代码。但是，如果您想了解有关自定义 Web 动画的更多信息，请查看我们为开发人员提供的大量插件和资源列表。