在网页设计中,即使是最小的影响也可以改变整体用户体验 。 这可以是毛刺效果 , 弹跳效果 ,甚至是简单的声音效果 。 如今, 在网页设计中经常使用的这些效果之一就是悬停或鼠标悬停效果。 当您将鼠标移到某个元素上时,可以看到这种过渡效果,该元素可以滑出,更改颜色或设置动画 。
鼠标悬停效果背后的想法是减少用户查看更多详细信息,访问关键信息或查看网站上不同视图 所付出的努力 。 良好的悬停效果可以节省空间,以尽可能聪明的方式显示更多信息。
因此,为了给读者提供一些有关这种有趣效果的示例 ,我整理了20个具有鼠标悬停效果的创意网站示例。 只需向下滚动, 打开网站,玩转并亲眼看看悬浮效果看起来有多神奇。
这是一个极富创意的网站,具有黑白主页,当您将光标移到几何形状上时,它们会显示出不同的几何形状 。
![像素](https://i-blog.csdnimg.cn/blog_migrate/19d36eb96ed5569f3b4253519912ff5a.png)
Haus是一家热爱技术和幽默的互动公司的网站。 将鼠标悬停在屏幕上的卡通人物上,观察它们如何跳跃和奔跑。
![豪斯](https://i-blog.csdnimg.cn/blog_migrate/50719e3e0536da7ac253a42b61b9c0a2.png)
Canva是用于创建各种基于文本的图像的服务 。 他们的首页上有深色的模糊背景,但是当您将光标悬停在其上时,您会看到该区域正在清理并在背景中显示图像 ,就像橡皮擦工具一样。
![canva网站](https://i-blog.csdnimg.cn/blog_migrate/8ecd70efd2446d57017c52212f0f10ed.png)
这是Mainworks创意媒体制作工作室的投资组合网站。 将鼠标悬停在鼠标上或单击在线上的点以查看其项目 。
![主体工程](https://i-blog.csdnimg.cn/blog_migrate/0dcb6fa5c178d32f19a260419f65bb5b.png)
这是塞德里克·佩雷拉(Cedric Pereira)柔和色调的作品集网站。 当您滚动浏览首页上的类别时,它们会更改颜色和图像 。 另外,当您将鼠标悬停在图像上时, 其边界也会移动 。
![埃德里克·佩雷拉](https://i-blog.csdnimg.cn/blog_migrate/7ce33a47c082648ad6179acc8b0bcc25.png)
Bullmonk是一个商业管理网站, 其主页上有一个简单的SVG动画 。 只需将鼠标悬停在网格矩形上,即可查看如何在其中形成Kong 。
![公牛](https://i-blog.csdnimg.cn/blog_migrate/9c2be2095b4d1cce2f4c5ca46eb6446c.png)
InSymbiosis 为生物制药行业提供了加快药物开发计划的替代策略 。 移动鼠标以查看与文本,按钮和背景元素的真棒微交互 。
![共生](https://i-blog.csdnimg.cn/blog_migrate/58b389d09c4b548edeef5a50e0256316.png)
OUI R是一个多学科设计工作室,致力于基于创意视觉创意来创建产品。 当您将鼠标光标放在图像上时,它们会显示信息,并使用鼠标scol移至下一张图像 。
![ouirstudio](https://i-blog.csdnimg.cn/blog_migrate/46a9a215926b8d52dd085e3830ccddf9.png)
Minnim的互动式首页上有彩色线条圆圈 ,随着鼠标悬停移动。 您可以使用鼠标生成带有徽标的新循环项目 。
![明尼姆](https://i-blog.csdnimg.cn/blog_migrate/b137a5f74786915b32af22d1b95521fd.png)
Full Bundle是一家创新的数字代理商。 他们的主页分为两列: 蓝色三角形的逻辑和红色正方形的创造力 。 当您将鼠标悬停在这些元素上时,它们会以非常流畅的方式反弹 。
![全包](https://i-blog.csdnimg.cn/blog_migrate/828a1b6823ae8f943255212bbb914f43.png)
FS Untitled 邀请访问者为字体选择名称 。 主页显示单击的单元格,该单元格会导致该特定字体的演示 。
![fs-无标题](https://i-blog.csdnimg.cn/blog_migrate/4588b9db01dddffe8cc9c5867a335895.png)
Trainrobber是一家AR和VR机构 ,为品牌提供开创性的沉浸式体验。 当您将鼠标悬停在主页上时,不同的元素会像彩色彩色西方电影一样水平移动 。 类别也随着鼠标悬停而动起来。
![强盗](https://i-blog.csdnimg.cn/blog_migrate/73e6cf2efa31a111960e2a013b1bd99e.png)
Sakura是一家总部位于日本的公司,专注于人际网络。 您只需单击一下鼠标,即可将背景中的点连接起来 。
![樱花](https://i-blog.csdnimg.cn/blog_migrate/a3a3891d2a36fb08594be0b2c931c3ea.png)
Fan Studio是一个卡通网站,可以创建手机游戏和应用。 为了产生运动感,背景与鼠标光标一起移动 。
![范工作室](https://i-blog.csdnimg.cn/blog_migrate/16062f5da987f6ef1e4284c2b5dbf17d.jpeg)
这是一个品牌和设计工作室网站 ,可帮助客户实现在线形象。 他们有一个带有白色背景和圆圈的主页。 但是,当您单击菜单按钮时,图像就会出现在圆圈中 。
![工作室旋转](https://i-blog.csdnimg.cn/blog_migrate/0390438e39516abd0ca7064ab7291b4c.png)
TheMcBrideCompany的主页上有一张美丽的风景照片,照片模糊不清。 当您将光标移到背景上时 ,光标周围的一小部分变得清晰。 看起来棒极了 。
![溴化物](https://i-blog.csdnimg.cn/blog_migrate/94d3131a30dbd28695243d4c8bc73532.png)
Clever Franke是一家互动设计公司,结合了策略,设计和技术来开发创新的产品和服务 。 主页上的标题是自动生成的,看起来像魔术。 当您将光标移到字母上时,它们会移位 ,但会在一秒钟后退。
![聪明的弗兰克](https://i-blog.csdnimg.cn/blog_migrate/1f105609711b04850845d8f5b53a68fd.png)
邮件设计中心的网站具有独特的设计。 他们的主页上有生动活泼的标题和多边形几何图形 。 当您将鼠标悬停在这些标题上时,它们会变大并开始变形 。
![信息设计](https://i-blog.csdnimg.cn/blog_migrate/45eeb2ae2e6b0ae4a094be11ba7a691f.png)
“刚编码”具有令人惊叹的黑暗背景,点形成了画布 。 当您将鼠标悬停在此画布上时,它看起来就像是活着的,因为它开始移动并改变视角 。
![刚编码](https://i-blog.csdnimg.cn/blog_migrate/ea8f09a0e4620ce4c87e096d14e7af27.jpeg)
这是一家数字代理商屡获殊荣的网站,它使用正在申请专利的技术来为iOS和android设备构建网站和应用 。 主页看起来像天空 ,当鼠标悬停时,似乎选择了飞行方向 。
![动力学应用](https://i-blog.csdnimg.cn/blog_migrate/f56b5729951a70a3f7d3b8b14f51d597.png)
翻译自: https://www.hongkiat.com/blog/websites-creative-mouse-over-effects/