jQuery与CSS3鼠标悬停效果

Web前端79.3K阅读模式

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

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

 

Animated Opening Type (教程)

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

jQuery与CSS3鼠标悬停效果-图片1
查看演示

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

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

jQuery与CSS3鼠标悬停效果-图片2
查看演示

Css3 Hover Effects With Websymbols Tutorial (教程)

jQuery与CSS3鼠标悬停效果-图片3
查看演示

Magnifying Glass For Image Zoom Using Jquery And CSS3

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

jQuery与CSS3鼠标悬停效果-图片4
查看演示

Social Media Icons With CSS3 Hover Effects

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

jQuery与CSS3鼠标悬停效果-图片5
查看演示

Image Highlighting And Preview With Jquery (教程)

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

jQuery与CSS3鼠标悬停效果-图片6
查看演示

CSS3 HOver Effects Style Restaurant Menus (教程)

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

jQuery与CSS3鼠标悬停效果-图片7
查看演示

Original Hover Effects With CSS3 (教程)

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

jQuery与CSS3鼠标悬停效果-图片8
查看演示

Simple Icon Hover Effects (教程)

简单的鼠标悬停效果

jQuery与CSS3鼠标悬停效果-图片9
查看演示

Shape Hover Effect With Svg (教程)

配合SVG实现的悬停动效。

jQuery与CSS3鼠标悬停效果-图片10
查看演示

3D Hover Effect For Thumbnails And Images

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

jQuery与CSS3鼠标悬停效果-图片11
查看演示

Simple Yet Amazing CSS3 Aorder Transition Effects

CSS3 边框过度效果。

jQuery与CSS3鼠标悬停效果-图片12
查看演示

Make A Simple Navigation With Hover Transitions

简单的导航菜单。

jQuery与CSS3鼠标悬停效果-图片13
查看演示

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

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

jQuery与CSS3鼠标悬停效果-图片14
查看演示

Jquery Mouseover Effect Using Parallax Style Tutorial (教程)

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

jQuery与CSS3鼠标悬停效果-图片15
查看演示

Css3 Hover Effect Tutorial With Image Circle (教程)

圆形鼠标hover特效。

jQuery与CSS3鼠标悬停效果-图片16
查看演示

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

CSS3实现按钮旋转教程。

jQuery与CSS3鼠标悬停效果-图片17
查看演示

AnythingZoomer JQuery Plugin

jQuery与CSS3鼠标悬停效果-图片18
查看演示

Annotation Overlay Efect With Css3(教程)

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

jQuery与CSS3鼠标悬停效果-图片19
查看演示

CSS Powered Buttons With Hover Tooltips

CSS实现Tooltips提示效果。

jQuery与CSS3鼠标悬停效果-图片20

查看演示

Useful And Practical JQuery Image ToolTips(教程)

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

jQuery与CSS3鼠标悬停效果-图片21
查看演示

Adipoli JQuery Image Hover Plugin (教程)

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

jQuery与CSS3鼠标悬停效果-图片22
查看演示

Paper Like Unfolding Effect(教程)

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

jQuery与CSS3鼠标悬停效果-图片23
查看演示

Caption Hover Effects(教程)

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

jQuery与CSS3鼠标悬停效果-图片24
查看演示

Flat Folio

jQuery与CSS3鼠标悬停效果-图片25
查看演示

Creative Button Styles

jQuery与CSS3鼠标悬停效果-图片26
查看演示

Text Revel On Hover: Corner Triangle Slide Overlay

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

jQuery与CSS3鼠标悬停效果-图片27
查看演示

Animated Skills Diagram With Raphael(教程)

图表特效

jQuery与CSS3鼠标悬停效果-图片28
查看演示

Realistic Hover Effect

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

jQuery与CSS3鼠标悬停效果-图片29
查看演示

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

动画边框,很不错!

jQuery与CSS3鼠标悬停效果-图片30
查看演示

Slim

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

jQuery与CSS3鼠标悬停效果-图片31
查看演示

CSS Button

jQuery与CSS3鼠标悬停效果-图片32
查看演示

Tiles With Animated

磁贴hover效果。

jQuery与CSS3鼠标悬停效果-图片33
查看演示

本站文章大部分始于原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
  • JQuery
  • CSS3
  • Web前端
评论  7  访客  6  作者  1
    • 美Win网
      美Win网 4

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

        • 知更鸟
          知更鸟

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

        • 阿里书籍
          阿里书籍 5

          都是很好的东西

          • 捕鱼达人
            捕鱼达人 2

            好漂亮,比CSS2强太多

            • asd
              asd 0

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

              • 星际大帝
                星际大帝 2

                会代码的都好屌

                • 尘封尤加
                  尘封尤加 0

                  很有用,学到很多

                匿名

                发表评论

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

                拖动滑块以完成验证