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

Magic CSS3 Animations 动画是一个独特的 CSS3 动画特效包,你可以自由地使用您的 Web 项目中。只需简单的在页面上引入 ...
       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