出色的 CSS 图像悬停效果汇总

有了 CSS 的图像悬停特效，你就能毫不费力地在任何网站上实现漂亮的交互界面。悬停效果可能是 Web 设计中最常用的元素，主要是因为它很容易实现，还能显著改善用户体验。

如果你不够小心谨慎的话，复杂的非 CSS 动画会明显拖慢你的网站速度，所以 CSS 悬停效果在几乎所有情况下都是更好的选择。它们不仅可以快速应用于你的网站，还可以快速加载，为你的页面添加的开销也是最少的。

这篇文章是由 wpDataTables（排行第一的 WordPress 表格插件「https://wpdatatables.com/」）的工作人员撰写的，我们汇总了一份可在你的网站上使用的 CSS 图像悬停效果的列表，还提供了一些关于这个主题的基本信息。

CSS 图像悬停效果的作用

交互内容是所有现代网站的重要组成部分，因为它可以保持用户的参与度，并鼓励他们花更多的时间浏览站点。在网站上包含交互元素也会使用户体验更加直观，因为它们会提示用户，告诉他们可以在页面上做什么事情。

但这里有一个关键问题，那就是使用不当的动画会降低网站的速度。这里就轮到 CSS 图像悬停效果出场做救星了。

图像悬停效果可以在不降低网站速度的情况下增加网站元素的交互性。悬停效果很优雅，也不会打乱网页设计；无论你添加多少效果，网站都可以流畅运行。

我们收集了一些最出色的 CSS 图像悬停效果，每个效果都给出了几句话的描述，来帮助你选择最适合你的项目的效果。这方面值得探索的内容还有很多，本文提供的列表会是一个很好的起点。

CSS 图像悬停效果

Button Hover Animation

首先介绍的是按键悬停动画，也就是在指针悬停时创建一个动画轮廓。该效果由 BhautikBharadavato 开发，用来强调那些行为召唤（call-toaction）按键。

它很流畅，代码非常简单，可以缩短加载时间，还能轻松自定义。

链接：（https://codepen.io/bhautikbharadava/pen/OdPzdW）

按键悬停效果集合

David Conner 整理了一份 CSS 图像悬停效果的集合，帮助大家轻松按需取用。这些效果完全基于 CSS3 和 HTML5。

你可以根据网站的设计自定义悬停效果，使其与页面完美融合。这些效果还可以扩展，并且在移动设备上也有出色的表现。David Conner 调整了效果背后的代码，你直接拿来用即可。

链接：（https://codepen.io/davidicus/pen/emgQKJ）

Direction-awate 3D 悬停效果（概念）

Noel Delgado 开发了这种带有方向感知的悬停效果，但这种效果肯定并不常见。用户喜欢用这种效果来展示产品或视觉元素。

这种悬停效果对于画廊概念来说很合适。作者本人在展示他的悬停效果时就使用了一个画廊模板。

链接：（https://codepen.io/noeldelgado/pen/pGwFx）

CSS 图像悬停效果集合

Naoya 在这个集合里打包了 15 个 CSS 图像悬停效果。每种效果都有自己的用途，你需要的所有元素都在这里了。

你还能同时强调文本元素和图像，所以这套集合非常适合摄影网站或其他基于视觉体验的项目。

链接：（https://codepen.io/nxworld/pen/ZYNOBZ）

World Places（CSS 3d 悬停）

这个效果的内容是，用户在其上悬停时会翻转图像。这种动画是很流行的，在演示和动画视频中相当常见。这种图像悬停效果很简洁，所以备受用户喜爱。

你既可以为元素的每个部分单独设置动画，也可以直接拿来使用。动画很流畅，能鼓励用户与网站进行更多交互。

链接：（https://codepen.io/akhil_001/pen/zoQdaO）

Simple Tile 悬停效果

Chris Deacy 在制作可以高度定制的 CSS 图像悬停效果时想出了一些很好的主意。如果你腻味了市面上的类似方案，并且想尝试一些可以让任何种类的内容都动起来的动画，那么这个效果对你来说就很合适。

链接：（https://codepen.io/chrisdothtml/pen/OVmgwK）

Creative Menu 悬停效果 #

菜单是网站上互动性最强的部分之一，因此值得网站管理员的关注。为了让它以最简单的方式弹出来，请使用 CSS 图像悬停效果，比如说 Abdel Rhman 创建的这个效果就很不错。该效果基于 CSS3，可在所有类型的接口上使用。

链接：（https://codepen.io/abdelRhman345/pen/PXMmdv）

Attract 悬停效果

这种 CSS 图像悬停效果非常适合某些类型的页面和网站。如果你的站点要在一个单独的部分中展示团队风采，那么你绝对想要尝试一下这种效果。

它的每个元素都有动态效果，用在页面的其他部分也很合适。Louis Hoebregts 在构建它时只使用了 HTML5 和 CSS3，因此不必担心它的响应速度。

链接：（https://codepen.io/Mamboleoo/pen/XgBvrJ）

Animation 悬停效果

Nicola Pressi 在制作这个动画悬停效果时想出了一些很好的点子。它适合自由职业者，也可以用来展示自己过去的职业经历。

这种 CSS 图像悬停效果非常适合首页上的欢迎消息，或者用来在登录部分添加个性化效果。对于在线商店来说，它可以用来强调一个邀约或限时促销活动。

链接：（https://codepen.io/ibanez182/pen/rOmYKq）

Glowing Icon 悬停效果

发光图标是由 Diego Lopes 创建的简单悬停效果。这个效果最适合设计精炼且色调较深的网站。这些效果可以为你的网站增添个性，而不会影响内容的简洁性，也不会拖累加载时间。

链接：（https://codepen.io/dig-lopes/pen/WLVGda）

Social Meida Icons 悬停效果

在线上营销推广活动中，你肯定要在社交媒体上推广内容。但是，人们在访问网站时往往会忽略那些社交媒体按钮，因为它们没有得到合适的强调。

所以你应该使用悬停效果来引导用户点击这些按钮。来自 Ephraim Sangma 的这个效果应该能完美适合你的需求，因此请尝试一下。

链接：（https://codepen.io/ephs23/pen/NeQZGx）

使用:afterPsuedo 元素的 CSS3 悬停效果

在市面上的 CSS 图像悬停效果中，像 Larry Geam 做的这个效果非常适合组织菜单选项的图标。根据你选择的菜单类型，项目组织起来可能会非常麻烦。这种悬停效果使你可以用颜色代码来修改菜单的各个部分。

链接：（https://codepen.io/ephs23/pen/NeQZGx）

Twisty Thing——IE10+iPad+跨浏览器——拖动指针扭曲立方体

这种悬停效果具有强大的跨浏览器支持，并且可以在 iPad 和几乎所有常用的浏览器上使用。这是更新版本的链接：链接：（https://codepen.io/dehash/pen/mBnsG）

3D Thumb 图像悬停效果

这种悬停效果基于伪阴影效果并且基于 CSS3，此外就没有什么要说的了。它最适合那些需要互动的简单元素。

链接：（https://codepen.io/pirrera/details/tKFhI）

Uncomfortable: Photo Modal（仅 CSS）

这是 CSS 图像悬停效果中的佼佼者，最早是从 CodePen Houston 的一次演讲中诞生的资产。现在的版本是从最早的设计改编而成，现已向公众开放。

链接：（https://codepen.io/shshaw/details/LBZyyM）

Kitties!（悬停图像）

这个效果的作者做了一件了不起的事情：Ana Tudor 在制作效果代码时录下了自己的工作过程，从而鼓励人们创建自己的悬停效果。你可以在此处查看相关视频链接：（https://youtu.be/KF7fRl5uB-8）。

链接：（https://codepen.io/thebabydino/details/OEVgRx）

Inspirational hover in portrait image

Lab21 带来的这款悬停效果适合用来展示人像照片。该效果是使用自定义 CSS 变量构建的。

链接：（https://codepen.io/lab21/details/QQvPrX）

Perspective Tilty Images

Henry Desroches 创建了这种悬停效果，但并没打算把它当成产品来发布。实际上这是一个实验，一开始是为了习惯 CSS 中的过渡效果函数，但最后的成品效果太好了，所以人们开始在网站上使用它。

链接：（https://codepen.io/xdesro/details/mBmgNj）

Venetian Blinds

所有人都喜欢威尼斯式百叶窗，那么为什么不将它们转变为悬停效果呢？Dimitra 创建的这个 CSS 图像悬停效果就做到了这一点，你可以在代码里设置列数，并根据需要定制它。

链接：（https://codepen.io/mimikos/details/JyYoEe）

Image Hover Effect

Dimitra Vasilopoulou 在基础的图像悬停效果上更进一步，创建了这种动态网格效果。如果你是 Greensock 的粉丝，这个悬停效果就是你的完美之选。

链接：（https://codepen.io/mimikos/details/yXZxKK）

CSS 渐变悬停效果

有人说混合模式悬停效果不能用 CSS 实现，他们应该看看 Jon Daiello 创建的这个悬停效果。见过它后，你就能知道这个概念是确实可行的了。

链接：（https://codepen.io/jondaiello/details/WGZNZv）

SVG clip-path 悬停效果

Noel Delgado 重建了人们在 CJ Gammon 产品组合中看到的网格悬停效果，此外还添加了 SVG 剪辑路径和 CSS 过渡效果。

链接：（https://codepen.io/noeldelgado/details/PZJGLx）

One div 悬停动画

某些悬停效果在内容不太多的网站上效果很好。Cassidy Williams 设计了她的 CSS 图像悬停效果，可用于充斥大量空白内容的小型网站。当然，任何人都可以用它来为自己的站点添加一些精巧的动画效果。

链接：（https://codepen.io/cassidoo/pen/RZOWQb）

Hover to reveal part of background image

这只是一个演示，你可以学习如何将 div 函数与背景结合在一起来实现这种效果。你也可以让它固定下来或四处移动。

链接：（https://codepen.io/suez/pen/PwKZwO）

Jeremie Boulay 制作的 CSS 悬停效果

如果你看腻了人们在自己的网站上使用的各种 CSS 图像悬停效果，那么 Jeremie Boulay 的这个作品会为你节省很多时间。这种悬停效果更具未来感，其中包括一个在悬停时旋转的 3D 图像幻影。

在今天的互联网上，这种悬停效果背后涌现的创造力是非常值得称赞的，因为所有人都在寻找创新的途径来脱颖而出。

链接：（https://codepen.io/Jeremboo/pen/WwbjvL）

Border 悬停效果

这种悬停效果最适合用于导航菜单、行为召唤按钮和类似的元素。你可以根据自己的需要来定制效果。

链接：（https://codepen.io/dig-lopes/pen/XovjNL）

Image with reflection and proximity effect on hover

这种图像悬停效果可以在各种网站类型上都实现出色的内容可视化方案。它可以很好地协调元素，让悬停效果更为整洁。总体来说它非常流畅和快速，给网站带来了专业的感觉。

链接：（https://codepen.io/TiagoLopes/pen/vZBMWB）

Rumble on Hover

Kyle Foster 在创建这个效果时尝试了不同的色彩类型和伪元素。这个效果基于一个悬停时的动画，作者还创作了不少类似的优秀效果。

链接：（https://codepen.io/hkfoster/details/bxBlI）

Shaking Shapes

Laura Montgomery 尝试用一些基本的 CSS 动画，加上品牌 Logo 的晃动创建了 Shaking Shapes 悬停效果。其主要特点是元素在悬停时会震动，并且效果很好。

链接：（https://codepen.io/LauraMontgomery/details/xoyozp）

CSS Grow 悬停效果

Adam Morgan 基于一种非常简单的原理创建了这种悬停效果：用户将元素悬停在元素上时，元素也会变大。

链接：（https://codepen.io/AdamCCFC/details/WvzBKq）

用于悬停效果的 CSS 库

如果你要创建自己的 CSS 图像悬停效果并添加到自己的网站上，你还可以使用下面这些 CSS 库，这里就一并介绍。

Image Hover

这是一个基于 CSS 的完整图像悬停库，包含 44 个效果。这些都是基础效果，包括淡入淡出、推动、显示转模糊、折叠或百叶窗等。值得探索的内容还有很多，你还可以为自己的元素找出合适的效果。

链接：（http://imagehover.io）

Image Caption Hover Animation

这个库包括 4 个字幕动画，当用户将鼠标悬停在项目上时会激活这些动画。所有动画均基于 CSS3，可用于大多数浏览器中。

链接：（http://hasinhayder.github.io/ImageCaptionHoverAnimation/）

iHover

iHover 包含很多 CSS3 悬停效果，其中有 20 个圆形效果和 15 个方形效果。为了使用这个 CSS 库中包含的效果，你需要编写一些 HTML 标记代码行，并将它们包含在文件中。

链接：（http://gudh.github.io/ihover/dist/）

Aero – CSS3 悬停效果

Aero 没什么特别的。它包含了一些基于 CSS3 的基础悬停效果，并且可以在所有类型的网站上正常运行。

链接：（https://codecanyon.net/item/aero-css3-hover-effects/12472316）

imagehover.css

如果你需要可扩展的悬停效果，这个库就是为你量身定制的。在一个只有 19KB 大小的库中，有 40 多种 CSS 图像悬停效果可供选择。

链接：（http://www.imagehover.io/）

Hover.css

Hover.css 包含很多可以应用于网站上的按钮、链接、徽标、图像和其他项目的效果。你可以直接将它们应用到你自己的元素上，也可以先做一些修改，或者将它们用作新元素的起点。

链接：（http://ianlunn.github.io/Hover/）

关于这些 CSS 图像悬停效果的总结

所有 Web 设计人员都应该有一套完整的 CSS 图像悬停效果集合，这样就能在开发新项目时方便取用它们。它们通过动画元素来扩展设计的深度，并鼓励用户的交互操作。

本文介绍的许多效果的一大优点在于，它们很容易自定义以适应你的需求。请务必根据你的个人风格来添加改动，哪怕只是很小的调整或者改动一两个值也行，这样就能给网站的访问者带来独一无二的感受和体验了。

如果你喜欢这类关于 CSS 图像悬停效果的文章，还可以阅读以下内容：

• Great CSS Page Transitions That You Can Use Today on Your Website（https://wpdatatables.com/css-page-transitions/）

• Sublime Text Plugins and Packages You Should Check Out（https://wpdatatables.com/sublime-text-plugins/）

• The Best WordPress Alternatives to Consider Using（https://wpdatatables.com/wordpress-alternatives/）

• 116 Cool CSS Text Effects（https://www.designyourway.net/blog/web-and-mobile-design/yes-you-can-actually-make-these-text-effects-in-css/）

原文链接：https://wpdatatables.com/css-image-hover-effects