40款经典前端特效插件---分享

html-css09

40款经典前端特效插件---分享,第1张

1.flavr—超级漂亮的jQuery扁平弹出对话框     

2.轻量级触摸响应滑块插件JQuery lightSlider      

3.带37种3D动画特效的跨浏览器CSS3动画框架       

4.jquery整屏滚动插件Scrollify        

5.jquery旋转木马插件SLICK         

6.jquery文字动画插件LetterFX          

7.jquery文本翻转插件Wodry.js       

8.jquery通知插件toastr       

9.jQuery滚动执行动画插件FadeThis      

10.jquery表单验证插件Bootstrap Validator       

11.jCountdown倒计时插件jQuery           

12.iCheck不一样的checkbok         

13.Owl Carousel强大的响应式jQuery焦点图轮播插件   

14.magic-带64种动画效果的CSS3动画库     

15.jQuery实时搜索插件-HideSeek       

16.bootstrap modal对话框             

17.一款模拟CSS3动画的js插件-move.js              

18.可替代CSS3 transition和transform的jQuery插件          

19.基于bootstrap的jQuery多功能模态对话框插件

20.带CSS3过渡效果的js模态窗口插件        

21.支持移动触摸设备的简洁js幻灯片插件

22.jQuery轻量级响应式扁平风格tabs选项卡插件

23.jQuery轻量级响应式Tooltip插件

24.jQuery简单且功能强大的图片剪裁插件

25.带CSS3动画过渡效果的jQuery模态窗口插件

26.中国省市区地址三级联动jQuery插件

27.移动端优先且支持jQuery和Zepto的模态对话框插件

28.jQuery简单实用的tooltip插件

29.带CSS3过渡动画效果的jQuery Tabs选项卡插件

30.x0popup-纯js弹出对话框插件

31.WOW.js-元素在页面滚动时展示CSS3动画JS插件

32.Windows8样式的消息提示框jQuery插件

33.jQuery星级评分插件

34.fsBanner-实用的网站响应式Banner手风琴插件

35.draggabilly-功能强大的拖动拖拽元素插件

36.验证插件vali.js

37.响应式jQuery图片放大镜插件magnificent.js

38.可快速生成各种阴影效果的jQuery插件

39.基于jquery的非常逼真的全屏下雪效果

40.纯文本Loading加载指示器特效

在 CSS3 出现之前,动画都是通过 JavaScript 动态的改变元素的样式属性来完成了,这种方式虽然能够实现动画,但是在性能上存在一些问题。CSS3 的出现,让动画变得更加容易,性能也更加好。

CSS3 中有三个关于动画的样式属性 transform 、 transition 和 animation ;

transform 可以用来设置元素的形状改变,主要有以下几种变形: rotate (旋转)、 scale (缩放)、 skew (扭曲)、 translate (移动)和 matrix (矩阵变形),语法如下:

none 表示不做变换; <transform-function>表示一个或多个变化函数,变化函数由函数名和参数组成,参数包含在 () 里面,用 空格 分开,例如:

所有的变形都是基于基点,基点默认为元素的中心点。用法: transform-origin: (x, y) ,其中 x 和 y 的值可以是百分比、rem 或者是 px 等等,也可以用表示位置的单词来表示例如:x 可以用 left 、 center 、 right ;y 可以用 top 、 center 、 bottom 。

用法: rotate(<angle>) ;表示通过指定的角度对元素进行旋转变形,如果是正数则顺时针旋转,如果是负数则逆时针旋转,例如:

它有三种用法: scale(<number>[, <number>]) 、 scaleX(<number>) 和 scaleY(<number>) ;分别代表水平和垂直方向同时缩放、水平方向的缩放以及垂直方向的缩放,入参代表水平或者垂直方向的缩放比例。缩放比例如果大于1则放大,反之则缩小,如果等于1代表原始大小。

移动也分三种情况: translate(<translation-value>[, <translation-value>]) 、 translateX(<translation-value>) 和 translateY(<translation-value>) ;分别代表水平和垂直的移动、水平方向的移动以及垂直方向同时移动,移动单位是 CSS 中的长度单位: px 、 rem 等

扭曲同样也有三种情况, skew(<angle>[, <angle>]) 、 skewX(<angle>) 和 skewY(<angle>) ;同样也是水平和垂直方向同时扭曲、水平方向的扭曲以及垂直方向的扭曲,单位为角度。

矩阵变形相对来说非常复杂,涉及到数学中的矩阵计算,有兴趣的同学可以研究一下: CSS3 Transform Matrix

transition 是用来设置样式的属性值是如何从从一种状态变平滑过渡到另外一种状态,它有四个属性:

它是用来设置哪些属性的改变会有这种平滑过渡的效果,主要有以下值:

它是用来设置转换过程的持续时间,单位是 s 或者 ms ,默认值为0;

它是来设置过渡效果的速率,它有6种形式的速率:

它是来设置过渡动画开始执行的时间,单位是 s 或者 ms ,默认值为0;

它是 transition-property 、 transition-duration 、 transition-timing-function 、 transition-delay 的简写:

animation 比较类似于 flash 中的 逐帧动画 ,逐帧动画就像电影的播放一样,表现非常细腻并且有非常大的灵活性。然而 transition 只是指定了开始和结束态,整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道,这种逐帧动画是由 关键帧 组成,很多个关键帧连续的播放就组成了动画,在 CSS3 中是由属性 keyframes 来完成逐帧动画的。

它是用来设置动画的名称,可以同时赋值多个动画名称,用 , 隔开:

它是用来设置动画的持续时间,单位为 s ,默认值为 0 :

和 transition-timing-function 类似:

它是来设置动画的开始时间,单位是 s 或者 ms ,默认值为0:

它是来设置动画循环的次数,默认为 1 , infinite 为无限次数的循环:

它是来设置动画播放的方向,默认值为 normal 表示向前播放, alternate 代表动画播放在第偶数次向前播放,第奇数次向反方向播放:

它主要是来控制动画的播放状态: running 代表播放,而 paused 代表停止播放, running 为默认值:

它是 animation-name 、 animation-duration 、 animation-timing-function 、 animation-delay 、 animation-iteration-count 、 animation-direction 的简写:

关于 CSS3 的动画的三个属性 transform 、 transition 、 animation 我们都介绍完了,让我们回顾一下。 transform 我们可以理解为元素的几何变形,它是有规律可寻的,这种变形并不会产生动画效果仅仅是原有形状的改变; transition 和 animation 它们很像 flash 中的 补间动画 逐帧动画 ; transition 是从一个状态变化到另外一种状态,当变化有了平滑的效果后就产生了动画,它是一个公式化的变化,在比较规则的动画效果中我们可以使用,例如:旋转的风车、行驶的汽车、颜色的渐变等等; animation 的动画效果更加灵活,可以实现像影片一样的复杂无规则的动画。