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

2020 年 4 月 21 日

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

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

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

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

CSS 图像悬停效果的作用

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

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

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

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

CSS 图像悬停效果

Button Hover Animation

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

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

链接:(h ttps://codepen.io/bhautikbharadava/pen/OdPzdW

按键悬停效果集合

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

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

链接:( https://codepen.io/davidicus/pen/emgQKJ

Direction-awate 3D 悬停效果(概念)

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

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

链接:(h ttps://codepen.io/noeldelgado/pen/pGwFx

CSS 图像悬停效果集合

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

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

链接:(h ttps://codepen.io/nxworld/pen/ZYNOBZ

World Places(CSS 3d 悬停)

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

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

链接:(h ttps://codepen.io/akhil_001/pen/zoQdaO

Simple Tile 悬停效果

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

链接:(h ttps://codepen.io/chrisdothtml/pen/OVmgwK

Creative Menu 悬停效果#

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

链接:(h ttps://codepen.io/abdelRhman345/pen/PXMmdv

Attract 悬停效果

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

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

链接:(h ttps://codepen.io/Mamboleoo/pen/XgBvrJ

Animation 悬停效果

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

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

链接:(h ttps://codepen.io/ibanez182/pen/rOmYKq

Glowing Icon 悬停效果

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

链接:(h ttps://codepen.io/dig-lopes/pen/WLVGda

Social Meida Icons 悬停效果

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

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

链接:(h ttps://codepen.io/ephs23/pen/NeQZGx

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

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

链接:(h ttps://codepen.io/ephs23/pen/NeQZGx

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

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

3D Thumb 图像悬停效果

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

链接:(h ttps://codepen.io/pirrera/details/tKFhI

Uncomfortable: Photo Modal(仅 CSS)

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

链接:(h ttps://codepen.io/shshaw/details/LBZyyM

Kitties!(悬停图像)

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

链接:(h ttps://codepen.io/thebabydino/details/OEVgRx

Inspirational hover in portrait image

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

链接:(h ttps://codepen.io/lab21/details/QQvPrX

Perspective Tilty Images

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

链接:(h ttps://codepen.io/xdesro/details/mBmgNj

Venetian Blinds

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

链接:(h ttps://codepen.io/mimikos/details/JyYoEe

Image Hover Effect

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

链接:(h ttps://codepen.io/mimikos/details/yXZxKK

CSS 渐变悬停效果

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

链接:(h ttps://codepen.io/jondaiello/details/WGZNZv

SVG clip-path 悬停效果

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

链接:(h ttps://codepen.io/noeldelgado/details/PZJGLx

One div 悬停动画

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

链接:(h ttps://codepen.io/cassidoo/pen/RZOWQb

Hover to reveal part of background image

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

链接:(h ttps://codepen.io/suez/pen/PwKZwO

Jeremie Boulay 制作的 CSS 悬停效果

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

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

链接:(h ttps://codepen.io/Jeremboo/pen/WwbjvL

Border 悬停效果

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

链接:(h ttps://codepen.io/dig-lopes/pen/XovjNL

Image with reflection and proximity effect on hover

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

链接:(h ttps://codepen.io/TiagoLopes/pen/vZBMWB

Rumble on Hover

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

链接:(h ttps://codepen.io/hkfoster/details/bxBlI

Shaking Shapes

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

链接:(h ttps://codepen.io/LauraMontgomery/details/xoyozp

CSS Grow 悬停效果

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

链接:(h ttps://codepen.io/AdamCCFC/details/WvzBKq

用于悬停效果的 CSS 库

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

Image Hover

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

链接:(h ttp://imagehover.io

Image Caption Hover Animation

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

链接:(h ttp://hasinhayder.github.io/ImageCaptionHoverAnimation/

iHover

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

链接:(h ttp://gudh.github.io/ihover/dist/

Aero – CSS3 悬停效果

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

链接:(h ttps://codecanyon.net/item/aero-css3-hover-effects/12472316

imagehover.css

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

链接:(h ttp://www.imagehover.io/

Hover.css

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

链接:(h ttp://ianlunn.github.io/Hover/

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

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

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

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

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

2020 年 4 月 21 日 10:26 928

评论

发布
暂无评论
发现更多内容

关于微服务架构思考

Arthur

疫情之年 下半年区块链应用落地会加速么?

CECBC区块链专委会

区块链 场景应用落地

视频会议专线部署不会?别急,我教你

华为云开发者社区

网络 网关 华为云 高清视频 welink

InnoDB存储引擎简介

Simon

MySQL innodb

Java项目如何分层

老胡爱分享

分层架构 项目

Web 开发必须掌握的三个技术:Token、Cookie、Session

华为云开发者社区

HTTP Token web开发 session Cookie

字符串匹配 - Sunday算法

半亩房顶

数据结构与算法 字符串匹配算法

Python爬取微信公众号文章保存到数据库

wjchenge

SQL的三十而已—SQL30问

大唐小生

sql 技术人生

计算机网络基础(十五)---传输层-TCP协议详解

书旅

计算机网络 网络 协议栈 协议族

企业网站搭建避坑指南

姜奋斗

网站 新手指南 企业 网站搭建 避坑

零代码/无代码 vs 低代码 如何分类?如何区别?到底有什么不同?分析超过20款零代码低代码产品

代码制造者

编程 行业分析 低代码 零代码

C/C++陷阱与套路,当年就是折在这些地儿…

华为云开发者社区

c++ 设计 编辑 程序 陷阱

learn go with tests 学习笔记(四)依赖注入

半亩房顶

golang golang新手

learn go with tests 学习笔记(五)并发

半亩房顶

golang golang新手

learn go with tests 学习笔记(三) 指针和错误

半亩房顶

golang golang新手

《effective-go》 学习笔记

半亩房顶

golang

用户体验(UX)设计≠用户界面(UI)设计

刘华Kenneth

敏捷 设计 UX 用户体验

CDN百科10:快速上手阿里云DCDN全站加速,最新配置与购买优惠教程

巨侠说

CDN 直播 网页加速

读书笔记-张潇雨-个人投资课(全)

lmymirror

读书笔记 投资 分享 理财

learn go with tests 学习笔记(二) 数组与切片

半亩房顶

golang golang新手

learn go with tests 学习笔记(六)进程同步

半亩房顶

golang golang新手

learn go with tests 学习笔记(七)反射

半亩房顶

golang 反射 golang新手

Google Protocol Buffer 学习笔记

半亩房顶

protobuf

Jessie’s产品经理系列1-基础能力篇

架构5班杨娟Jessie

产品经理 能力模型

秒懂云通信:如何使用阿里云号码认证服务(小白指南)

巨侠说

云通信 通信云 号码认证

learn go with tests 学习笔记(一) hello world

半亩房顶

golang golang新手

菊长说丨一文读懂MySQL4种事务隔离级别

华为云开发者社区

MySQL 数据库 事务隔离级别 事务 华为云

人生修炼秘籍

xiaoboey

时间管理 人生修炼 知行合一 熵增 时间复利

Netty之旅:你想要的NIO知识点,这里都有!

一枝花算不算浪漫

Netty nio

政策加持迎来区块链技术应用“红利期”

CECBC区块链专委会

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