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

您可能感兴趣的相关文章

使用方法:

  首先引入样式文件:

<link rel="stylesheet" href="yourpath/magic.css">

  然后给你想要实现动画效果的元素添加类 magictime 以及动画类名,例如:

$('.yourdiv').hover(function () {
$(this).addClass('magictime puffIn');
});

  如果你要一定时间后执行动画,可以这样写:

setTimeout(function(){
$('.yourdiv').addClass('magictime puffIn');
}, 5000);

  循环执行动画也是可以的:

setInterval(function(){
$('.yourdiv').toggleClass('magictime puffIn');
}, 3000 );

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

.magictime {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
}

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

.magictime.magic {
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
-o-animation-duration: 10s;
animation-duration: 10s;
}

  

立即下载      在线演示

本文链接:Magic CSS3 – 创建各种神奇的交互动画效果

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

Magic CSS3 – 创建各种神奇的交互动画效果的更多相关文章

  1. 纯css3圆形从中心向四周扩散动画效果

    查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to { ...

  2. 用CSS3制作50个超棒动画效果教程

    这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动.为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如Safari和Chrome这类基于WebKit内核的浏览器 ...

  3. 用css3实现摩天轮旋转的动画效果

    用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则.@keyframes 规则用于创建动画.在 @keyf ...

  4. 简单css实现input提示交互动画效果

    通过基础CSS实现输入提示交互动画效果,并兼容各浏览器! 1.效果展示 2.css代码 h4 { margin: 30px 0; } input { margin:; font-size: 16px; ...

  5. 一款纯css3实现的机器人看书动画效果

    今天要给大家介绍一款纯css3实现的机器人看书动画效果.整个画面完全由css3实现的绘制,没有使用任何图片元素.机器人的眼睛使用了动画元素.我们一起看下效果图: 在线预览   源码下载 实现的代码. ...

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

    来源:GBin1.com 使用CSS3实现的不同图片加载动画效果,支持响应式,非常适合针对瀑布流布局图片动态加载特效进行增强! HTML <ul class="grid effect- ...

  7. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

  8. css3实现的3中loading动画效果

    一.css3中animation动画各种属性详解: animation Value:     [<animation-name> || <animation-duration> ...

  9. 用css3和canvas实现的蜂窝动画效果

    近期工作时研究了一下css3动画和js动画.主要是工作中为了增强页面的趣味性,大家都有意无意的加入了非常多动画效果.当然大部分都是css3动画效果.能够gpu加速,这会降低移动端的性能需求. 今天主要 ...

随机推荐

  1. 利用HtmlAgilityPack库进行HTML数据抓取

    主要介绍基于XPATH的文本分析方式的实现,代码如下: using System; using System.Collections.Generic; using System.Linq; using ...

  2. 介绍Oedis - Redis OH/RM

    作死造轮子 Oedis是近段时间为了解决日志型数据如何与Entity Framework的查询整合的问题写的一个Redis的OH /RM.虽然Redis出来蛮久了,各路高手也都提出了实践方案,但是或许 ...

  3. 页面动态加入<script>标签并执行代码

    在页面中动态追加html片段的时候,有时候动态添加的代码会含有<script>标签,比如用了一些模板引擎,或者你的代码有些复杂的时候.然而我们用DOM提供的innerHTML方式来添加代码 ...

  4. 使用Guava提供的filter过滤集合

    正常情况下,我们声明一个List需要如下代码 List<String> list = new ArrayList<>(); list.add("AAA"); ...

  5. Git学习笔记(1)——安装,配置,创建库,文件添加到库

    初次接触git,为了记忆深刻,把学习的简单流程记录下来. 本文记录了Git在Ubuntu上的安装,配置,以及创建版本库和往库中添加文件的过程. 1.Git的安装:(Ubuntu-Linux非常友好的安 ...

  6. Redis主从复制问题和扩容问题的解决思路

    转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/106.html?1455867541 一.解决主从复制问题 当使用Redi ...

  7. 大叔也说Xamarin~Android篇~原生登陆与WebView的网站如何共享Session

    回到目录 事情是这样的,我们最近开了一个APP,主要使用xamarin做了一个登陆,它与服务器API进行数据通讯,当用户名密码正确去,跳转到新的activity,并在webview控件中打开服务端的H ...

  8. Http Header里的Content-Type

    之前一直分不清楚post请求里Content-Type方式,如application/x-www-form-urlencoded.multipart/form-data.本文会介绍Content-Ty ...

  9. PHP基础 创建

    注意:1.网页文件放在wamp中的www文件下: 2.www文件下不能出现中文: 网页浏览的方法: 1.没有建立站点:localhost/文件所在位置 2.建立站点: (1)站点-新建站点-打开对话框 ...

  10. struts2学习笔记之十二:struts2对异常的自动处理

    在UserAction类中引发异常,但是不处理 package com.djoker.struts2; import java.util.Date; import org.apache.struts2 ...