jquery控制css3动画 列表,10款jQuery/CSS3动画应用 超实用

本文作者html5tricks,转载请注明出处

这次我们要带来10款最新的jQuery/CSS3动画应用,这里有不少

1、jQuery/CSS3书本翻页动画特效 多功能选项支持

这是一款基于jQuery和CSS3的书本翻页动画特效,该书本翻页插件的外观非常华丽喜庆,非常适合产品活动或者育儿网站使用。我们可以点击左右翻页按钮进行翻页,也可以使用鼠标拖拽页脚来实现翻页动画。这是个jQuery插件,因此兼容性还不错。

85e70fdb191d039cf2b28cc2448269e1.png

2、jQuery纵向分类下拉菜单导航

今天我们要来分享一款jQuery纵向分类菜单,这款jQuery菜单是下拉菜单,鼠标滑过菜单项时即可展开相应的子菜单,并伴随很酷的淡入淡出和滑块动画效果。当鼠标滑过菜单项时,菜单项的背景颜色也会有渐变的效果。

4bd24254d51f87eddeab5710422692b3.png

3、纯CSS3实现自行车动画特效

这是一款用纯CSS3实现的自行车动画,自行车的各个部位都是用CSS3绘制而成,外观非常逼真,很有坐上去骑一把的冲动。更有意思的是,由于CSS3动画的运用,这辆自行车是动态的,它可以模拟真实的自行车运动的动画,包括轮胎的转动和齿轮的传动。

00841618eddd9b02d77d6053c23fc6e7.png

4、基于Bootstrap的CSS3下拉菜单 菜单3D立体效果

Bootstrap是Twitter推出的一个用于前端开发的开源工具包,基于Bootstrap框架,我们可以方便地制作漂亮的UI界面。今天要分享的这款CSS3下拉菜单就是基于Bootstrap的,下拉子菜单的外观也非常不错,同时菜单也具有3D立体的视觉效果。

1b09c4f8df3e505cb4a441ae363e19be.png

5、jQuery缩略图动态缩放焦点图

今天我们要来分享一款

2b5b50448464be03ba59852e58825742.png

6、Metro扁平化风格的jQuery UI组件

今天要介绍一款Metro扁平化风格的UI组件,Metro扁平化的风格显得比较清新简洁,却不失大气。这几款UI组件就是Metro风格。组件包括图片分组、按钮、图片滑块、菜单、Tooltip提示框等。每一款都非常实用,你一定会爱上Metro扁平化的。

4fe5cc58d381f2ded03c53a15570e1e6.png

7、CSS3倒计时时钟动画

现在分享的这款CSS3应用是一个倒计时插件,这款倒计时插件的外观还是比较简单大气的,加上阴影,有着3D立体的视觉效果。倒计时标有天、时、分、秒,我们可以很清晰的看出时钟的走动。我们可以将它制作成挂件放到自己的个人博客上去,来实现活动开始的倒计时功能。

467a49f6f8918fa0a8276fee7c6494bf.png

8、jQuery图片左右水平滚动插件

这次我们再来分享一款jQuery图片插件,首先你可以自己定义图片的总数已经分组的数量,插件会帮助你将图片按指定的分组切分图片,你可以点击左右切换按钮来按分组切换图片,利用jQuery,图片可以非常流畅地进行左右水平滚动插件。

a4f40c7a25b747111d564325103cceaa.png

9、纯CSS3 3D浮动按钮

这次我们来分享一款效果很酷的纯CSS3 3D浮动按钮,按钮是一个3D立体的悬浮圆形,按钮上面可以是文字和爱心图案,按钮底部还有阴影效果,显得很立体。另外,当把鼠标滑过按钮时,按钮就会下陷,就像在水面上下沉一样。

7e70fd0e313e4e4bec640edd583edc8c.png

10、CSS3多样式小图标按钮 带分享按钮

今天我们要来分享一款样式非常丰富的CSS3按钮目录下查看。

47d5bb07f45a1bcc8da422444a166c9b.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值