jQuery与CSS3鼠标悬停效果

2015年7月18日14:41:59 7 8,663

鼠标虽然是很细微的东西,但却是很常用的效果。所以如果把鼠标效果做好是很会吸引人的眼球的。制作动画效果我们可以有很多种方法,但是最常用的是用CSS3来实现,当然如果结合jQuery来完成那么这样的效果就更强大了。

下面整理33个使用jQuery与CSS3实现绚丽的鼠标悬停效果,有些是纯CSS3的,这些效果你完全可以用在你的网页上,让网站获得更好的体验。

 

Animated Opening Type (教程)

漂亮的文字翻开效果,很有意思。

CSS 鼠标hover效果 - 设计达人网
查看演示

Direction-Aware Hover Effect With Css3 And Jquery (教程)

鼠标跟随悬停效果教程,话说以前看到这个很流行呢。

CSS 鼠标hover效果 - 设计达人网
查看演示

Css3 Hover Effects With Websymbols Tutorial (教程)

CSS 鼠标hover效果 - 设计达人网
查看演示

Magnifying Glass For Image Zoom Using Jquery And CSS3

通过Jquery 和 CSS3.实现放大镜效果。

CSS 鼠标hover效果 - 设计达人网
查看演示

Social Media Icons With CSS3 Hover Effects

通过CSS3实现3D旋转的社会化媒体图标。

CSS 鼠标hover效果 - 设计达人网
查看演示

Image Highlighting And Preview With Jquery (教程)

图像放大效果,适合文章用。

CSS 鼠标hover效果 - 设计达人网
查看演示

CSS3 HOver Effects Style Restaurant Menus (教程)

使用CSS3实现的hover效果,鼠标结过列表图像时会显示简介。

CSS 鼠标hover效果 - 设计达人网
查看演示

Original Hover Effects With CSS3 (教程)

超过10种鼠标悬停图像动画效果,酷、弦!

CSS 鼠标hover效果 - 设计达人网
查看演示

Simple Icon Hover Effects (教程)

简单的鼠标悬停效果

CSS 鼠标hover效果 - 设计达人网
查看演示

Shape Hover Effect With Svg (教程)

配合SVG实现的悬停动效。

CSS 鼠标hover效果 - 设计达人网
查看演示

3D Hover Effect For Thumbnails And Images

一个3D感的hover特效,连阴影也实现了。

CSS 鼠标hover效果 - 设计达人网
查看演示

Simple Yet Amazing CSS3 Aorder Transition Effects

CSS3 边框过度效果。

CSS 鼠标hover效果 - 设计达人网
查看演示

Make A Simple Navigation With Hover Transitions

简单的导航菜单。

CSS 鼠标hover效果 - 设计达人网
查看演示

Examples Of Pseudo-Elements Animtions And Transitions(教程)

看似很复杂的动效,但效果很弦。

CSS 鼠标hover效果 - 设计达人网
查看演示

Jquery Mouseover Effect Using Parallax Style Tutorial (教程)

这个教程可以实现带视差感的特效。

CSS 鼠标hover效果 - 设计达人网
查看演示

Css3 Hover Effect Tutorial With Image Circle (教程)

圆形鼠标hover特效。

CSS 鼠标hover效果 - 设计达人网
查看演示

Make A Swinging Hover Effect With CSS3 Animations (教程)

CSS3实现按钮旋转教程。

CSS 鼠标hover效果 - 设计达人网
查看演示

AnythingZoomer JQuery Plugin

CSS 鼠标hover效果 - 设计达人网
查看演示

Annotation Overlay Efect With Css3(教程)

好看的提示、注释效果!如果用于介绍、注释的话,这个效果很实用哦。

CSS 鼠标hover效果 - 设计达人网
查看演示

CSS Powered Buttons With Hover Tooltips

CSS实现Tooltips提示效果。

CSS 鼠标hover效果 - 设计达人网

查看演示

Useful And Practical JQuery Image ToolTips(教程)

用jQuery实现鼠标hover跟随图像。

CSS 鼠标hover效果 - 设计达人网
查看演示

Adipoli JQuery Image Hover Plugin (教程)

漂亮的图像悬停过度效果,多种风格。

CSS 鼠标hover效果 - 设计达人网
查看演示

Paper Like Unfolding Effect(教程)

像打开贺卡、书本一样的效果。

CSS 鼠标hover效果 - 设计达人网
查看演示

Caption Hover Effects(教程)

比较实用的鼠标悬停效果,多种样式。

CSS 鼠标hover效果 - 设计达人网
查看演示

Flat Folio

CSS 鼠标hover效果 - 设计达人网
查看演示

Creative Button Styles

CSS 鼠标hover效果 - 设计达人网
查看演示

Text Revel On Hover: Corner Triangle Slide Overlay

鼠标经过图像时,右下角的三角形会自动填满图像,并展示简介。

CSS 鼠标hover效果 - 设计达人网
查看演示

Animated Skills Diagram With Raphael(教程)

图表特效

CSS 鼠标hover效果 - 设计达人网
查看演示

Realistic Hover Effect

按钮hover效果,还带有阴影哦!

CSS 鼠标hover效果 - 设计达人网
查看演示

Creating A Border Animation Effect With SVG And CSS(教程)

动画边框,很不错!

CSS 鼠标hover效果 - 设计达人网
查看演示

Slim

如果你的Logo类似这样子,可以把这个动画效果加上去。

CSS 鼠标hover效果 - 设计达人网
查看演示

CSS Button

CSS 鼠标hover效果 - 设计达人网
查看演示

Tiles With Animated

磁贴hover效果。

CSS 鼠标hover效果 - 设计达人网
查看演示

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:7   其中:访客  6   博主  1

    • 美Win网 4

      我现在就想取消我主题上鼠标悬停显示的提示文字啊,但是不知道怎么去啊,求鸟哥指教。

        • 知更鸟 Admin

          @美Win网 这个需要修改模板,把title属性去掉
          http://zmingcx.com/link-title-attribute.html

        • 阿里书籍 6

          都是很好的东西

          • 捕鱼达人 2

            好漂亮,比CSS2强太多

            • asd 0

              :evil: :evil: :evil: :evil: :evil: :evil: 斯蒂芬斯蒂芬

              • 星际大帝 2

                会代码的都好屌

                • 尘封尤加 0

                  很有用,学到很多