12款优秀的 jQuery 动画库

时间: 2019-07-10阅读: 133标签: 动画

Textillate.js

介绍:Textillate.js 是一个简单的CSS3文本动画插件。结合了一些非常棒的库,把 CSS3  动画轻松应用到任何文本。只需要在项目中简单地引入 textillate.js 和它的依赖文件到你的项目中,就可以开始建立独特的效果。


Lazy Line Painter

介绍:Lazy Line Painter 这款jQuery插件使用 Raphaël 库来创建路径动画。首先,从 Illustrator 导出您的艺术线条作为一个 SVG 文件,确保他们没有填充,没有封闭路径,线条需要一个开始点和结束点。


Tip Cards Plugin

介绍:提示卡插件让你可以创建的卡片式的布局,与你在谷歌的提示页面看到卡片状的互动效果类似。有几个新的动画选项,让您可以更具自己的喜好进行个性化配置。


jQuery Label Better

介绍:jQuery Label Better 帮助你标记表单输入域,拥有美丽的动画效果,而且不占用空间。在关于这个插件的唯一的是需要做的就是添加一个占位符文本,只有当用户需要它的时候,插件才会显示标签。


S Gallery

介绍:S Gallery 是一个响应的jQuery插件库,结合了 CSS3 动画。它利用了HTML5的全屏 API,并且在很大程度上依赖于对 CSS3  的动画特性和 CSS3 转换,所以它只能工作在支持这些功能的浏览器中使用。


Loda Button

介绍:Loda Button 是一个简单的jQuery插件,当数据从服务器被取出时,呈现按钮图标的动画。 CSS 类 loda-btn & load-icon 用于定义按钮的样式。动画效果使用了 CSS3 动画,过渡和转换。


Minimit Anima

介绍:Minimit Anima 是一个jQuery插件,呈现结合转换和过渡效果动画。它内置有快速动画的执行硬件加速的 CSS3  动画,同时它还有类似 jQuery 动画的 API,带有动画排队功能。


Motio

介绍:Motio 这款款jQuery插件用于创建简单但功能强大的基于精灵的动画和平移。Motio 调用一个表示元素的动画容器,其中动画被传递作为 CSS 背景图像。在基于子画面的动画,容器应该和子画面帧的尺寸一样大。


Mosaic jQuery Plugin

介绍:Mosaic 这款 插件自动生成滑动盒及字幕。它允许滑动和淡入淡出的动画,支持自定义方向。可以预加载框内的图像,只有大学 2kb 非常的轻量。


链接: http://www.fly63.com/article/detial/4140

HTML复杂动画和变形

涉及到的属性:animation-name:动画名称;animation-duration:单次动画总时长;animation-timing-function:时间函数;animation-delay:播放前延时的时长;

css3 过渡和动画

在没有过渡属性的时候,当一个元素的属性值发生变化时,浏览器就会将个这个元素瞬间渲染成新属性值的样式。例如一个定位元素top:0,动态修改成top:100px,这个元素就瞬间跑到100px的位置,有时候我们为了达到某种视觉效果

css3动画 Transition

CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程,而不是立即生效的。比如,将一个元素的颜色从白色改为黑色,通常这个改变是立即生效的

使用CSS实现图片帧动画与曲线运动

在前端开发中,提到动画,我们可以:直接利用DOM实现动画。利用canvas实现动画。利用svg实现动画。直接用一张gif动图。利用图片实现帧动画。所有动画的基本原理都是:在短时间内连续依次展示对应的图片

jQuery中的事件、动画、表单应用

页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。在事件中经常使用术语 触发或 激发,常用click()方法触发

Js封装一个简单的动画函数

动画函数多个目标值之间移动,1、如果是正值,则向大取整 2、如果是负值,则向小取整。清除定时器,是指清除谁的定时器,这里是轮播图,所以清除元素的定时器;创建定时器,清除定时器,页面中就没有定时器

为什么要用css动画替换js动画?

通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在内了在频繁的操作DOM和CSS时,浏览器会不停的执行重排和重绘,在PC版本的浏览器中,因为浏览器可用的内存比较大

用js实现一个无限循环的动画

为什么要说它,源于看到的一道面试题:问题是用js实现一个无限循环的动画。至于时间间隔为什么是1000/60,这是因为大多数屏幕渲染的时间间隔是每秒60帧。既然setInterval可以搞定为啥还要用requestAnimationFrame呢?

HTML5模拟齿轮动画

这是一个基于HTML5的齿轮动画特效,我们将齿轮转动的物理学原理,转换为HTML5代码,在网页上实现了模拟齿轮转动的动画效果。该齿轮动画的最大特点是它由好多个齿轮组成,这对齿轮传动的算法要求就大大提高了

css3实现椭圆轨迹旋转

X轴Y轴在一个矩形内移动;设置动画延时设置Y轴延时为动画时长的一半, 运动轨迹变成菱形;设置三次贝塞尔曲线,为了看起来有立体感添加scale属性,scale动画应该是X轴和Y轴的时间总和

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全