作者
WPDTStaff 译者
王强 策划
李俊辰 有了CSS的图像悬停特效，你就能毫不费力地在任何网站上实现漂亮的交互界面。悬停效果可能是Web设计中最常用的元素，主要是因为它很容易实现，还能显著改善用户体验。
如果你不够小心谨慎的话，复杂的非CSS动画会明显拖慢你的网站速度，所以CSS悬停效果在几乎所有情况下都是更好的选择。它们不仅可以快速应用于你的网站，还可以快速加载，为你的页面添加的开销也是最少的。
这篇文章是由wpDataTables（排行第一的WordPress表格插件）的工作人员撰写的，我们汇总了一份可在你的网站上使用的CSS图像悬停效果的列表，还提供了一些关于这个主题的基本信息。
CSS图像悬停效果的作用交互内容是所有现代网站的重要组成部分，因为它可以保持用户的参与度，并鼓励他们花更多的时间浏览站点。在网站上包含交互元素也会使用户体验更加直观，因为它们会提示用户，告诉他们可以在页面上做什么事情。
但这里有一个关键问题，那就是使用不当的动画会降低网站的速度。这里就轮到CSS图像悬停效果出场做救星了。
图像悬停效果可以在不降低网站速度的情况下增加网站元素的交互性。悬停效果很优雅，也不会打乱网页设计；无论你添加多少效果，网站都可以流畅运行。
我们收集了一些最出色的CSS图像悬停效果，每个效果都给出了几句话的描述，来帮助你选择最适合你的项目的效果。这方面值得探索的内容还有很多，本文提供的列表会是一个很好的起点。
CSS图像悬停效果 ButtonHoverAnimation首先介绍的是按键悬停动画，也就是在指针悬停时创建一个动画轮廓。该效果由BhautikBharadavato开发，用来强调那些行为召唤（call-toaction）按键。
它很流畅，代码非常简单，可以缩短加载时间，还能轻松自定义。
