15种以上的Javascript&令人惊叹的悬停动画的CSS库

的作用 悬停动画 远远超出了仅仅作为装饰的范围。所以在这篇文章中’我们已经收集了15个用于悬停动画的Javascript库,您可以用它来指导网络访问者’ attention.

Puffin.js

悬停图像的新方法。

Puffin.js

Freezeframe.js

Frozenframe.js是一个暂停动画的库。gifs 并使其能够在鼠标悬停/鼠标单击/触摸事件或触发/释放功能上进行动画处理。

Freezeframe.js

悬停效果

Javascript库在悬停时绘制图像并设置动画。

悬停效果

悬停3d

jQuery的 悬停3d是用于创建3d悬停效果的简单悬停脚本。这是我探索的实验 的CSS3 3d 于2015年在Codepen 3D悬停平面效果上进行了转换。这个想法是使用CSS3变换将元素转换为3d空间,并使用translateZ来使元素隔开,并检测鼠标移动以更改变换值

悬停3d

滑动悬停

将方向感知动画应用于图像标题。

滑动悬停

Imagehover.css

Imagehover.css是精心制作的CSS库,可让您轻松实现可缩放的图像悬停效果。从CSS库中的40多种悬停效果类中进行选择,其最小大小仅为19KB。

Imagehover.css

Tilt.js

微小的60 + fps 视差 jQuery的的倾斜悬停效果。

Tilt.js

悬停按钮

动画CSS / SCSS按钮。

悬停按钮

悬停

iHover是使用纯CSS悬停效果的集合,灵感来自Sass支持的codrops文章。

悬停

伊兹密尔

伊兹密尔是一个迷你CSS库,可让您快速创建漂亮的图像悬停元素。包含大量样式类和自定义属性,Izmir允许您完全控制和几乎无限的可能性。只需加载 的CSS库 在您的项目中,添加元素标记以及您选择的样式类,以自定义构建完美的图像悬停效果。

伊兹密尔

斯旺德

将鼠标悬停在魔杖上,并使用魔术咒语复制漂亮的CSS。

斯旺德

莫卡辛

莫卡辛是字幕的悬停效果的响应集合。

莫卡辛

方向显示

方向指示内容通过元素上的悬停或选项卡显示。

方向显示

简单悬停

简单悬停是一个小型画廊,像展示柜,具有不同的信息卡悬停变体。

简单悬停

引导映像悬停

具有或不具有引导程序的图像悬停效果。

引导映像悬停

徘徊

一系列CSS3支持的悬停效果,可应用于链接,按钮,徽标, SVG,特色图片等。轻松应用于您自己的元素,修改或仅用于启发。在CSS,Sass和LESS中可用。

徘徊

2 Comments

  1. 尼斯帖子。感谢分享。

  2. 有趣!

发表评论

请客气。我们对此表示赞赏。您的电子邮件地址将不会被发布,并且必填字段已被标记

该网站使用Akismet减少垃圾邮件。 了解如何处理您的评论数据.