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

html-css014

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加载指示器特效

1、实践代码:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312">

<title>CSS实现表格阴影</title>

</head>

<body>

<table width=300 height=215 align=left bordercolor="#FF9966" bgcolor=#f3f3f3

style="filter:progid:DXImageTransform.Microsoft.Shadow

(Color=#666666,Direction=120,strength=5)">

<tr>

<td width="230" bgcolor="#FF9966" align="center">

这是一个表格阴影特效,用CSS实现的。</a>

</td>

</tr>

</table>

</body>

</html>

2、用纯CSS代码实现的表格阴影代码,这里仍然是用到了filter属性,至于阴影阴影透明义或偏移角度可以自选调整,仅提供一种思路。

使用box-shadow属性

语法

box-shadow: h-shadow v-shadow blur spread color inset

注意:boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

值 说明

h-shadow 必需的。水平阴影的位置。允许负值

v-shadow 必需的。垂直阴影的位置。允许负值

blur 可选。模糊距离

spread 可选。阴影的大小

color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表

inset 可选。从外层的阴影(开始时)改变阴影内侧阴影