`
zzc1684
  • 浏览: 1222562 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

丰富您设计的10个CSS3效果库

阅读更多

Magic CSS3 Animations

Magic CSS3 Animations是一个CSS3动画包,拥有一些特效可以你的Web项目中免费使用。拥有像金光闪闪,角度,旋转,炸 弹等特殊效果。使用简单,大部分的动画是跨浏览器兼容。



Animate.css

Animate.css是一个现成的CSS3的动画特效库。这个库拥有60个不同的动画效果。Once animate.min.css is included into your <head> document, you just need to add the animated class plus the name of the needed animation. Example with the Flash animation, the element class would be: class="animated flash".



Liffect

liffect是一个在线的列表动画生成工具,能够帮助你针对一个ul列表来生成动画效果,你可能会经常的看到如下的动画类型:

 

  • fadeIn
  • zoomIn
  • zoomOut
  • slideTop
  • slideDown
  • pageTop
  • pageRight
  • ...

 

所有的以上动画特效,都可以使用liffect轻松的生成。这个工具依赖jQuery和CSS3的动画来生成以上所有的特效。最重要的是能够根据你的特效选择自动生成HTML,CSS和javascript代码。而且提供了其它的选项来有效的控制动画,例如,延迟,CSS前缀等等。相信你能更加精细的控制动画的效果。

 
Effeckt.css

EFFECKT.CSS是一个集合了众多新鲜而又实用的的CSS/jQuery动画效果,这些都适用于网站或是移动APP的网页,比如一些AJAX弹出框动画、菜单动画、图片标题展示等等,这些特效动画都能给你的网站提升一定用户体验,而且简单实用。
Read the 9 goals of Effeckt.css and watch the project’s 22-second video on YouTube to get a glimpse of Effeckt.css’s might bring int the future.

 


Animatable

该工具用于创建CSS3动画,创建的动画可以在任何平台或设备(包括Android、BlackBerry、iOS 和WebOS等)中的现代浏览器中运行。即便你不熟悉CSS,该工具也能帮助你创建多场景的CSS3动画。


Fancy Input

Fancy Input 这款 jQuery  插件不只是关注外观,同时在交互方面通过 CSS3 特性让文本输入域变得更有趣,更有吸引力。

 



Morf.js

Morf.js 提供了一组 JavaScript 方法用于加速 CSS3 的各种转换效果,支持的方法都在上图中,无需编写 CSS3 代码。

 


Easing Functions

Easing functions is something different from the reset. It's a generator to create different easing transition. You can specifies the speed of animation progresses to make it more realistic. You will get a CSS version too if it's possible to make it with CSS, otherwise, you will get a javascript version.


Hover.css

Hover.css 是一个利用CSS3创建动画鼠标悬停效果的集合。适用于任何Html元素,如按钮,图像等。
所有Hover.css效果利用一个单一的元素(在必要的一些伪元素的帮助),是自包含的,因此您可以轻松地复制和粘贴。



CSS3 Animations Plugin

CSS3 Animations plugin uses the great new features in CSS3 especially Animations. This plugin can animate your site with minimal effort. Just choose the animation effect what you like /you can choosey 35 different animations / and use it in your element in CSS. Animation may take place during a hover on an element of the mouse to display or hide elements but can run as from the beginning. It is up to you when the animation makes.
There are two different versions - Development (72kb in size) and a Minified (45kb in size) version.

分享到:
评论

相关推荐

    18种炫酷CSS3动画效果库Mimic.css

    Mimic.css是一个专为前端开发者设计的CSS3动画效果库,它集合了18种独特的、引人注目的动画效果,旨在提升网页的交互性和视觉吸引力。与知名的animate.css类似,Mimic.css以简洁易用的方式为网页增添动态元素,为...

    又一个CSS3翻书动画效果.rar

    总的来说,CSS3翻书动画是网页设计中的一个创新应用,虽然这个特定的实例可能不尽人意,但通过不断探索和优化,我们可以创造出更加惊艳的视觉效果。对于开发者来说,掌握CSS3的3D变换和动画技术,不仅可以提高作品的...

    纯CSS3用户卡片设计效果

    【纯CSS3用户卡片设计效果】是一种利用现代CSS3特性实现的网页元素设计技术,它无需依赖JavaScript或者其他库,仅通过CSS3就能创造出引人注目的用户体验。在本设计中,用户卡片作为一种常见的UI组件,被赋予了动态的...

    animate.css 是一个 CSS3 动画库,它预设了抖动、闪烁、弹跳等多种动画效果

    Animate.css 是一个强大的开源 CSS3 动画库,它为开发者提供了一系列预先设计好的动画效果,使得在网页设计中添加动态元素变得简单易行。这个库包含了许多有趣的动画,如抖动、闪烁、弹跳等,可以极大地提升用户体验...

    三圆点CSS3 loading加载动画特效库

    总的来说,`three-dots.css`是一个强大且易于使用的CSS3加载动画库,它利用CSS3的动画特性,为开发者提供了丰富的三圆点加载效果,提升了网页的用户体验。无论是在大型项目还是小型应用中,都可以灵活地应用这个库,...

    css3按钮库zardi

    这个库的特点在于其利用CSS3的特性,如渐变、阴影、边框半径和过渡效果,实现了无需依赖图像就能创建出具有立体感和色彩丰富的按钮。下面将详细介绍CSS3在构建这些按钮样式中的关键知识点。 1. 渐变(Gradients):...

    100套css3分页效果

    在网页设计中,分页是一种常见的用户界面元素,用于处理大量数据或内容的展示,使得用户可以方便地浏览和导航。...而cc-100CSS3这个文件名可能是这些分页效果的代码库或示例集合,为深入研究和实践提供了方便。

    纯CSS3鼠标滑过图片效果动画库

    总结来说,纯CSS3鼠标滑过图片效果动画库利用了CSS3的@keyframes、transition、filter、transform以及混合模式等特性,为图片元素添加丰富的交互效果。开发者可以根据项目需求,自由组合这些效果,打造独一无二的...

    5种动画过渡效果的纯CSS3幻灯片特效

    【标题】"5种动画过渡效果的纯CSS3幻灯片特效"介绍了一种利用CSS3技术实现的幻灯片组件,它具有五种不同的动画过渡效果,为网站的动态展示提供了丰富的选择。这种特效完全基于CSS3,不依赖JavaScript库,因此在性能...

    7种酷炫css3图片3d翻转效果

    CSS3(层叠样式表第三版)作为Web设计的一个重要技术,引入了丰富的动画效果和3D转换功能,为网页设计师提供了无尽的创意空间。本篇文章将深入探讨利用CSS3实现的7种酷炫的图片3D翻转效果,包括3D翻转、3D旋转、切片...

    css3切换效果

    综上所述,这个项目很可能是一个关于如何使用CSS3实现各种切换效果的实例或者教学资源,涵盖了从基本的伪类选择器到高级的动画技术,结合了jQuery库和UI组件来增强交互性。通过分析和学习这些文件,我们可以深入了解...

    53种CSS3阴影效果box-shadows.css

    总的来说,"53种CSS3阴影效果box-shadows.css"是一个实用的工具,它简化了添加阴影到网页元素的过程,帮助开发者快速实现专业级别的设计效果,同时鼓励他们探索和实验更多的CSS3阴影可能性。通过深入理解`box-shadow...

    轻量级高性能的CSS3动画库特效.zip

    通过精心设计的CSS3属性和关键帧动画,该库能够实现流畅、高性能的动画效果,同时最小化对CPU和GPU资源的消耗。 在CSS3动画中,关键帧动画(@keyframes)允许开发者定义一个动画从开始到结束的各个阶段,从而创建...

    纯CSS3炫酷checkbox美化库checkboxes.css

    "checkboxes.css"就是一个专注于复选框美化且完全基于CSS3的库,它为设计师提供了丰富的自定义选项,以提升用户体验和界面美观度。 **一、checkboxes.css的核心特性** 1. **纯CSS3实现**:checkboxes.css无需...

    模拟iphone面板折叠的css3折叠效果

    【CSS3库】是网页设计领域的一个重要工具,它提供了丰富的样式和动画功能,使得开发者可以创建出富有表现力和动态效果的网页。在本案例中,“模拟iphone面板折叠的css3折叠效果”是一个利用CSS3特性实现的交互式插件...

    117个css3鼠标经过效果.zip

    在前端开发领域,CSS3(层叠样式表第三版)为网页设计带来了许多创新和增强的..."117个css3鼠标经过效果.zip"提供的实例库,为前端开发者提供了大量灵感和实践素材,帮助他们更好地利用CSS3来设计引人入胜的网页界面。

    纯CSS3创意按钮设计效果

    【CSS3创意按钮设计效果详解】 在Web设计领域,按钮作为用户交互的重要元素,其设计风格和效果直接影响到用户体验。本篇文章将深入探讨如何利用CSS3实现一款创新、多彩且具有动态翻转效果的按钮设计。CSS3是层叠...

    CSS3鼠标经过导航菜单动画效果代码

    CSS3作为CSS(层叠样式表)的最新版本,引入了许多强大的功能,包括丰富的动画效果,使得网页设计更加动态和吸引人。本示例中,我们将深入探讨如何使用CSS3实现鼠标经过导航菜单时的动画效果。 首先,`index.html`...

    CSS3文本框动画输入标签效果.zip

    值得注意的是,虽然CSS3和jQuery提供了丰富的动画效果,但过度使用可能会对性能产生影响,因此在设计时应兼顾效率和美观。此外,考虑到兼容性和可访问性,对于不支持这些技术的浏览器或辅助技术,应当有合适的备选...

    纯CSS3鼠标hover图片3D透视效果

    这个项目展示了如何通过纯CSS3实现复杂的交互效果,无需依赖JavaScript库如jQuery。这不仅减少了页面加载时间,也提高了性能。对于设计师和开发者来说,理解并掌握这些CSS3特性是提升网页设计技能的重要步骤。同时,...

Global site tag (gtag.js) - Google Analytics