Magic CSS3 – 创建各种神奇的交互动画效果
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 – 创建各种神奇的交互动画效果的更多相关文章
- 纯css3圆形从中心向四周扩散动画效果
查看效果:http://hovertree.com/texiao/css3/37/ 先来个简单的示例,例如: @keyframes hovertreemove{from {top:30px;}to { ...
- 用CSS3制作50个超棒动画效果教程
这50个CSS动画集合可以让你通过使用JavaScript函数来让动画更生动.为了能够预览到这些惊人的CSS3技术带来的动画特效,请大家使用如Safari和Chrome这类基于WebKit内核的浏览器 ...
- 用css3实现摩天轮旋转的动画效果
用css3实现摩天轮旋转的动画效果 1.CSS3 @keyframes 规则如需在 CSS3 中创建动画,您需要学习 @keyframes 规则.@keyframes 规则用于创建动画.在 @keyf ...
- 简单css实现input提示交互动画效果
通过基础CSS实现输入提示交互动画效果,并兼容各浏览器! 1.效果展示 2.css代码 h4 { margin: 30px 0; } input { margin:; font-size: 16px; ...
- 一款纯css3实现的机器人看书动画效果
今天要给大家介绍一款纯css3实现的机器人看书动画效果.整个画面完全由css3实现的绘制,没有使用任何图片元素.机器人的眼睛使用了动画元素.我们一起看下效果图: 在线预览 源码下载 实现的代码. ...
- CSS3实现的图片加载动画效果
来源:GBin1.com 使用CSS3实现的不同图片加载动画效果,支持响应式,非常适合针对瀑布流布局图片动态加载特效进行增强! HTML <ul class="grid effect- ...
- 详解用CSS3制作圆形滚动进度条动画效果
主 题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...
- css3实现的3中loading动画效果
一.css3中animation动画各种属性详解: animation Value: [<animation-name> || <animation-duration> ...
- 用css3和canvas实现的蜂窝动画效果
近期工作时研究了一下css3动画和js动画.主要是工作中为了增强页面的趣味性,大家都有意无意的加入了非常多动画效果.当然大部分都是css3动画效果.能够gpu加速,这会降低移动端的性能需求. 今天主要 ...
随机推荐
- #include <stdarg.h>
名称描述相容 // 作用描述 va_start使va_list指向起始的参数 va_arg检索参数C89 va_end释放va_list va_copy拷贝va_list的内容 实例解析: #inc ...
- oracle数据库常用查询
一.数据库信息 1.数据库时间 select to_char(sysdate, 'yyyy-mm-dd hh24:mi:ss') AS dbtime from dual; 2.主机OS类型 SELEC ...
- yuecheng 笑话
http://115.28.189.219:9898/stock/manager_articles/fundamentals 要闻 http://115.28.189.219:9898/stock/m ...
- Sensor(ORIENTATION)
package com.example.sensor01; import java.util.List; import android.hardware.Sensor; import android. ...
- LUN/PV/VG/LV
存储中的几个概念,参考一些网络资料重新画个图梳理下,如下: LUN:lun是针对存储设备(如磁盘阵列)的逻辑概念,物理上可能就是几块硬盘.那么主机的HBA 卡看到的存储上的存储资源就靠主要两个东西定位 ...
- Java多线程17:中断机制
概述 之前讲解Thread类中方法的时候,interrupt().interrupted().isInterrupted()三个方法没有讲得很清楚,只是提了一下.现在把这三个方法同一放到这里来讲,因为 ...
- 依赖倒置原则(Dependency Inversion Principle)
很多软件工程师都多少在处理 "Bad Design"时有一些痛苦的经历.如果发现这些 "Bad Design" 的始作俑者就是我们自己时,那感觉就更糟糕了.那么 ...
- Android Studio 1.0.1 + Genymotion安卓模拟器打造高效安卓开发环境
我们开发安卓大多是使用Eclipse和安卓SDK中自带的安卓模拟器.当然,Google早就推出了自己的安卓开发环境——Android studio,在不久前,Google发布了Android Stud ...
- Word发布博客测试
/// <summary> /// Main相当于Windows服务的Start方法 主要负责初始化的工作 /// </summary> /// <param name= ...
- css实现左栏固定右栏自适应,高度自适应的布局
收集css中的基础知识,所以这并不是什么新鲜的技术,只是作为备忘~本文的内容如题所示,是一个简单的布局,用于左右两栏布局的页面,左侧是固定宽度,右侧占据剩余的宽度.在垂直方向,始终以高度最大的一栏为基 ...