Magic CSS3 – 创建各种神奇的交互动画效果


Magic CSS3 Animations 动画是一个独特的 CSS3 动画特效包,你可以自由地使用您的 Web 项目中。只需简单的在页面上引入 CSS 样式: magic.css 或者压缩版本 magic.min....
       Magic CSS3 Animations 动画是一个独特的 CSS3 动画特效包,你可以自由地使用您的 Web 项目中。只需简单的在页面上引入 CSS 样式: magic.css 或者压缩版本 magic.min.css 就可以使用了。 这个项目现在GitHub上,包含 bling, perspective, rotate, slide, tin, bomb 等众多特效。





使用方法:   首先引入样式文件:

  1. <link rel="stylesheet" href="yourpath/magic.css">
复制代码

然后给你想要实现动画效果的元素添加类 magictime 以及动画类名,例如:
  1. $('.yourdiv').hover(function () {

  2.   $(this).addClass('magictime puffIn');

  3. });
复制代码

如果你要一定时间后执行动画,可以这样写:
  1. setTimeout(function(){

  2.     $('.yourdiv').addClass('magictime puffIn');

  3. }, 5000);
复制代码

循环执行动画也是可以的:
  1. setInterval(function(){

  2.     $('.yourdiv').toggleClass('magictime puffIn');

  3. }, 3000 );
复制代码

你还可以自定义动画的执行时间,修改时间参数即可:
  1. .magictime {

  2.     -webkit-animation-duration: 1s;

  3.     -moz-animation-duration: 1s;

  4.     -o-animation-duration: 1s;

  5.     animation-duration: 1s;

  6. }
复制代码

如果是针对特定动画效果的修改,则可以这样:
  1. .magictime.magic {

  2.     -webkit-animation-duration: 10s;

  3.     -moz-animation-duration: 10s;

  4.     -o-animation-duration: 10s;

  5.     animation-duration: 10s;

  6. }
复制代码


立即下载      在线演示

本文由HTML5中国网为您提供
关键词:CSS3学习网站、CSS3教程、HTML5

更多 animation 相关资讯

jQuery+CSS3动画框架magic

jQuery+CSS3动画框架magic

源码下载 在线演示 Magic是一个有许多动画CSS3框架。简单易用,很多动画是跨浏览器兼容的。 代码: <link rel="stylesheet" href="yourpath/magic.css"> $('.

CSS教程-响应布局与平滑过渡

CSS教程-响应布局与平滑过渡

在本教程中,我们将创建一个响应式的全屏页面布局。这个页面是由导航模块+简单的内容面板构造而成的,出发导航条,内容区域会以平滑的方式滚动出现在相应位置。html代码:我们

CSS3制作莲花开放

CSS3制作莲花开放

这个效果我一拿到效果,让我惊叹了一翻,使用纯CSS3代码制作了一个莲花开放的效果,藤藤利用自己所掌握的CSS3知识将Niels Doorn使用js和CSS3制作的莲花开放的案例修改成了

CSS3 动画齿轮

在今天的课程中,我们使用CSS3制作一个动画齿轮效果,效果看起来非常漂亮。其中我使用了CSS3关键帧、动画和转换(旋转),为了得到这个结果,请注意:只有在火狐Firefox浏览器、谷歌Chrom

CSS3 Animation(上)

CSS3 Animation(上)

单从Animation字面上的意思,我们就知道是“动画”的意思。但CSS3中的Animation与HTML5中的Canvas绘制动画又不同,Animation只应用在页面上已存在的DOM元素上,而且他跟Fl

CSS3 Transitions(基础)

CSS3 Transitions(基础)

Step1:Link transitions 开头,我们做一些基础的练习:当指上文字的时候,改变其颜色! 代码如下: .case1 a{ color:#333; -webkit-transition:color 500ms ease-in;}.case1 a:

CSS3 Transitions, Transforms和Animation使用简介与应用展

CSS3 Transitions, Transforms和Animation使用简介与应用展

一、前言兼目录索引 《天龙八部》里的虚竹小和尚之前可以说是和尚的先进人物与代表模范,各类清规戒律谨记与严守。但是,后来呢,花姑娘送到跟前,什么戒律都成了浮云, 禁不住诱惑享

更多 css3动画 相关资讯

用CSS3创建动画价格表

用CSS3创建动画价格表

原文地址:http://webdesignersdesk.com/2010/08/create-animated-price-grid-using-css3/ 译者:蒋宇捷 今天我们将要只使用CSS3来创建一个动画价格表。完全不使用Jquery,

CSS3动画搜索框

CSS3动画搜索框

在线演示 在这篇文章告诉你如何用CSS3创建各种颜色动画搜索框。你可以简单地将代码复制,并用它在您的Web项目。 #searchform { float:left; margin-left:20px; marg

利用 CSS3 的褪色和动画效果制作消息提醒框

利用 CSS3 的褪色和动画效果制作消息提醒框

CSS 盒子样式 现代Web设计技术允许开发者快速实现大多数浏览器支持的动画。我想警告消息是很常见的,因为默认的JavaScript警告框的样式往往(与你自己设计的漂亮样式)很

CSS3创意动画列表项添加、删除效果

CSS3创意动画列表项添加、删除效果

源码下载 在线演示 在今天的教程中,我们将创建用于添加和删除列表中的项目, 使用CSS3实现了一些创意的动画和过渡效果。 代码: <div class="notification und

CSS3实现的图片加载动画效果

CSS3实现的图片加载动画效果

在线演示 使用CSS3实现的不同图片加载动画效果,支持响应式,非常适合针对瀑布流布局图片动态加载特效进行增强! HTML <ul class="grid effect-4" id="grid"> <

使用CSS3的褪色和动画效果构建消息提醒框

使用CSS3的褪色和动画效果构建消息提醒框

现代Web设计技术允许开发者快速实现大多数浏览器支持的动画。我想警告消息是很常见的,因为默认的JavaScript警告框的样式往往(与你自己设计的漂亮样式)很不协调很囧。

使用jQuery和CSS3创建Android导航

使用jQuery和CSS3创建Android导航

当玩Galaxy Tab的花哨Android的导航。点击箭头形象应用程序图标会弹出,这不仅仅是精美的动画图标也垂直旋转的3D风格。今天教程教大家如何使用jQuery和CSS3创建Andr

使用jQuery和CSS3弹出图像滑块

使用jQuery和CSS3弹出图像滑块

源码下载 在线演示 在这篇文章中,我们将分享有关如何创建一个弹出图像滑块。我们进行click事件时使用CSS3过渡来变换动画。此图片滑块不会做幻灯片上显示

CSS3+jQuery的图像画廊Photobox

CSS3+jQuery的图像画廊Photobox

    源码下载 在线演示 CSS3+jQuery的图像画廊Photobox ,一个轻量级的图像画廊模态窗口脚本,它使用CSS3光滑的动画和过渡效果,采用GPU渲染,可以完全控制,可定制CSS

CSS3实现超酷的图像动画变换特效

CSS3实现超酷的图像动画变换特效

  在线演示 在线演示 本地下载   今天我们想要分享一些实验阶段的3D图像变换效果给大家,主要使用了CSS3 3D动画和jQuery。   怎样起作用的?   给定一组图片,我

更多 动画 相关资讯

CSS伪类的动画和过渡效果应用

CSS伪类的动画和过渡效果应用

    本文中的在线演示很好的展示了CSS伪类来处理动画和过渡效果的独特之处,相信感兴趣的朋友肯定会觉得非常有趣的。   浏览器兼容: FirefoxIE10最新版本chrome   

jQuery+CSS3动画框架magic

jQuery+CSS3动画框架magic

源码下载 在线演示 Magic是一个有许多动画CSS3框架。简单易用,很多动画是跨浏览器兼容的。 代码: <link rel="stylesheet" href="yourpath/magic.css"> $('.

一个简单的CSS3文字动画插件textillate

一个简单的CSS3文字动画插件textillate

     Textillate.js 结合了强大的库提供了应用CSS3动画的任何文本的插件。 Textillate.js是可以非常简单固定头,以及令人惊讶的的强大animate.css 各 lettering.js库。

CSS3实现超酷的图像动画变换特效

CSS3实现超酷的图像动画变换特效

  在线演示 在线演示 本地下载   今天我们想要分享一些实验阶段的3D图像变换效果给大家,主要使用了CSS3 3D动画和jQuery。   怎样起作用的?   给定一组图片,我

HTML5+CSS3城市场景动画

HTML5+CSS3城市场景动画

     最近一直在研究HTML5的动画表现,特别是在移动设备上的呈现。今天就为大家分享一个用HTML5+CSS3制作的城市场景动画,动画包含了白天到夜晚的渐变动画以及太阳、云朵、

[视频]纯CSS3腾讯QQ企鹅(附绘制过程)

[视频]纯CSS3腾讯QQ企鹅(附绘制过程)

腾讯Web前端AlloyTeam近日推出了最新开源项目:一个基于HTML5技术的专业级图像处理引擎——AlloyImage(简称AI),以及一个在线Web图像处理平台——AlloyPhoto(简称AP)。

CSS3 Animation(上)

CSS3 Animation(上)

单从Animation字面上的意思,我们就知道是“动画”的意思。但CSS3中的Animation与HTML5中的Canvas绘制动画又不同,Animation只应用在页面上已存在的DOM元素上,而且他跟Fl

CSS3动画效果-animate.css

CSS3动画效果-animate.css

animate.css 是提供炫酷,有趣,跨浏览器css3动画的网站,你可以在高级项目中使用这些效果,为高级浏览器用户提供更好的交互体验。动画效果包括强调突出,滑块,淡入淡出,放大缩

WebKit CSS3 动画基础

前几天在Qzone上看到css3动画,非常神奇,所以也学习了一下。 首先看看效果 http://webdeveloperjuice.com/demos/css/css3effects.html 很悲剧的是css3动画现在只有WebKit内

利用CSS3制作动画效果

概述 在CSS3中新增了几个很好玩的东东:CSS Animation,CSS Transition 和 CSS Transform,顾名思义就是通过CSS来实现动画,过渡和变形。 它们与HTML5中的canvas能绘制动画图形不