新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】
新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】
作为最流行的 JavaScript 开发框架，jQuery 在现在的 Web 开发项目中扮演着重要角色，它简化了 HTML 文档遍历，事件处理，动画以及 Ajax 交互，而 CSS3 作为 CSS 的下一个版本，增加了圆角、旋转、阴影等强大的特性，甚至还可以实现需要 JavaScript 才能实现的复杂动画效果。这篇文章特别收集了2012年新鲜出炉的30个精美 jQuery & CSS3 效果，帮助 Web 开发人员快速实现可用性和用户体验更佳的功能，让访问者对网站留下非常好的印象。记得分享和推荐哦。
精美 jQuery 效果及教程
01. Jquery Custom Content Scroller
基于 jQuery 实现的非常精致的自定义内容滑动条。
02. Sideways Jquery Full Screen Image Gallery
非常漂亮的 jQuery 全屏相册，移动鼠标即可在缩略图和照片之间切换。
03. Jquery Cursor Following Menu
鼠标跟随的菜单，挺有创意的，不过没用习惯的话肯能会觉得不好用。
04. Jquery Animated Responsive Image Grid
基于 jQuery 实现的动态的响应时图片格子，提供了三种不同的效果演示。
05. Jquery Chop Slider
效果不错的 jQuery 碎片滑动效果，有非常详细的制作教程。
06. Magnifying glass for image zoom using Jquery and CSS3
基于 jQuery 和 CSS3 实现的放大镜效果。
07. Responsive jQuery Image and Content Slider
另外一款响应式（Responsive） jQuery 图片和内容滑动效果。
08. Flyout Image Slider
基于 jQuery 和 CSS3 实现的图片飞出效果，挺特别的。
09. Portfolio Flipping Slider Using jQuery & CSS3
基于 jQuer 和 CSS3 实现的图片翻转效果。
10. Create a simple jQuery hover call-to-action box
基于 jQuery 实现的一个简单的悬浮行为召唤（call-to-action）功能。
11. Auto Moving Jquery
非常特别的二级菜单效果，值得借鉴一下，有详细的教程。
12. New Search Form Using Jquery
基于 jQuery 和 CSS3 实现的非常精美的搜索框效果。
精美 CSS3 效果及教程
01. Circle Hover Effects
基于 CSS3 Transition 实现的圆圈悬浮变换效果，有七种精美效果演示。
02. Parallax Effect
集成了视差滚动（Parallax Scrolling）特效的幻灯片。
03. Grab Dribble Feed
利用 Dribbble Api 实现的抓取 Dribble 内容的精美效果。
04. Modern Light box With CSS3
使用 CSS3 实现的现代 Light box 效果。
05. Image With Bounce Effect
基于 CSS3 实现的图片反弹（Bounce Effect）显示效果。
06. CSS3 Book Generator
结合 jQuery 和 CSS3 实现的在线图书制作工具。
07. Camera API
08. CSS3 Parallax scrolling slider
又一个应用了视差滚动（Parallax scrolling）效果的滑块功能。
09. Flipping Circle with CSS3
基于 CSS3 实现的圆圈翻转效果。
10. Swatch Book
11. Image Accordion
基于 CSS3 和 jQuery 实现的图片手风琴（Accordion）效果。
12. Designing MAC Book & IMAC Using CSS3
13. Annotation Overlay Effect
非常有用的遮罩注释（Annotation Overlay）效果。
14. Jquery Triple Panel Image Slider
太漂亮了！基于 jQuery 和 CSS3 实现的三层面板图片滑动效果，超有立体感。
15. Apple Login Form
基于 CSS3 实现的苹果风格的登录表单。
16. Product Showcase with CSS3
使用 CSS3 实现的绚丽的产品展示效果，非常有用！
17. CSS3 Coded Responsive Ready, Social Media Buttons
纯 CSS3 制作的非常精美的社交媒体按钮。
18. CSS3 Animation Experiment
压轴的是基于 CSS3 的动画实验，实现了一个虚拟的 DJ 音乐控制台。
您可能还喜欢
新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】的更多相关文章
- 今年新鲜出炉的30个流行Android库，你一定需要
作者|Michal Bialas 2017年快过去了,你年初的定的目标都快完成了吗?总结过去三个月内发布的 最新的30 个 Android 库和项目.你一定需要,建议收藏!让你事半功倍 1.Mater ...
- 23套新鲜出炉的网站和手机界面 PSD 素材
Web 用户界面,移动用户界面和线框套件对设计师很有用,因为这些套件让他们使用快速和有效的方式复制用户界面.这些类型的工具包提供了一个基本的用户界面元素,用于它们需要制作的网站或软件模型. 在这篇文章 ...
- 22套新鲜出炉的 Web & Mobile PSD 用户界面素材
在这篇文章中,我们展示的是自由和清新的 UI 设计素材套件.这些线框图和 UI 设计工具包让设计师在设计用户界面原型的时候能够非常便利. Web 用户界面,移动用户界面和线框套件对设计师很有用,因为这 ...
- 分享25个新鲜出炉的 Photoshop 高级教程
网络上众多优秀的 Photoshop 实例教程是提高 Photoshop 技能的最佳学习途径.今天,我向大家分享25个新鲜出炉的 Photoshop 高级教程,提高你的设计技巧,制作时尚的图片效果.这 ...
- PS教程：20个新鲜出炉的 Photoshop 中级教程
Photoshop 实例教程是提高 Photoshop 技能的最佳学习途径.今天,我向大家分享最新20个 Photoshop 进阶教程,提高你的图片处理技巧,制作时尚的效果.这些教程可以帮助把你的想法 ...
- 推荐35个新鲜出炉的响应式 Web 设计实例
响应式设计的准则在于根据用户使用的屏幕的分辨率来改变网站的的布局.因此,视频或图像的大小和文本的数量,可以被视为是一个明显的变化.让你即使从智能手机浏览一个网站的时候能轻松地看到网站上的重要内容.今天 ...
- 15个新鲜出炉的 Photoshop 文本效果教程
文本效果可能是 Photoshop 图形设计中最常用和最通用的技术之一.最重要的是你可以使用任何效果,风格或纹理来产生有趣的排版,越多人尝试过它并制作了一些精彩的教程.所以这篇文章旨在为您提供全面的 ...
- 20个新鲜出炉的网站模板【HTML & PSD】
这里给大家分享20 个新鲜出炉的免费网站模板.这些设计元素将成为你下一个项目的重要素材,可以帮你节省很多的时间.与往常一样,我们经常漫游网络,寻找最好的资源, HTML.CSS 和 PSD 等等,记得 ...
- 20套新鲜出炉的免费 PSD 格式的图标《免费下载》
在网页设计中,设计师专注于每一个领域的设计,包括颜色选择.图标.创造力.混色等.正确的选择图标可以使他们的设计脱颖而出,看起来令人震惊.在 Web 设计领域,图标发挥非常重要的作用,因为美丽的和创造性 ...
随机推荐
- DisJSet:食物链(POJ 1182)
动物王国的食物链 这一题有两种思路,先介绍第一种: 题目是中文的,我就不翻译了,也很好理解,就是一个A-B-C-A的一个循环的食物链,给定一些条件,问你哪些条件是错的 这一题,是一道比较 ...
- MySQL 查询最大最小值优化
1. 假设你使用了Innodb存储引擎2. 假设你在innodb设定了主键(聚集索引) 3. 因为聚集索引页面之间是通过双向链表链接,页按照主键的顺序排序 每个页中的记录也是通过双向链表维护.聚集索引 ...
- github优秀开源项目大全-iOS
github优秀开源项目大全-iOS APR 25TH, 2014 前言 本文旨在搜集github上优秀的开源项目 本文搜集的项目都是用于iOS开发 本文会持续更新… 完整客户端 ioctocat g ...
- Oracle 11g 卸载
1.关闭oracle所有的服务.可以在windows的服务管理器中关闭: 2.打开注册表:regedit 打开路径: HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlS ...
- VIM Tutorials----（updating）
This is my first English tutorial; I hope I can help you to learn VIM. Any question send email to me ...
- 面向服务的体系结构(SOA)——（1）目标与核心概念
什么是SOA? 常常听到人们拿OOP和SOA一起来说事,诸如SOA是否可以代替面向对象(OOP)或者两者比哪个更加有优势?直接回答有难度举个例子可能显得答案更容易理解.小孩子问你该认真写作业呢?还是高 ...
- phpcmsv9 幻灯片管理模块_UTF8
幻灯片管理模块简介: .可创建多个位置,一个网站多个幻灯处调用互不影响. .独立模块,不修改系统内核,不用担心升级问题. .标签调用灵活. 安装: .复制本目录下面的phpcms目录到你的V9根目录下 ...
- 什么是AIDL（转）
跨进程访问的服务称为AIDL(Android Interface Definition Language)服务. AIDL:Android Interface Definition Language, ...
- C/C++函数使用
1 memset 将s所指向的某一块内存中的前n个 字节的内容全部设置为ch指定的ASCII值, 块的大小由第三个参数指定,这个函数通常为新申请的内存做初始化工作, 其返回值为指向s的指针. 函数介绍 ...
- MATLAB信号与系统分析（四）——离散信号与系统的复频域分析及MATLAB实现
一.系统的z变换和反变换 1.利用部分分式展开求解逆Z变换: 2.例子 3.Z变换的MATLAB函数 clear all f=sym('cos(a*k)'); F=ztrans(f) F=sym('z ...