用js+css3做一个小球投篮的动画（easing）
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.3.min.js"></script>
</head>
<body>
<style>
@keyframes mycolor{
10%{
background:green;
}
20%{
background:red;
}
50%{
background:blue;
}
80%{
background:yellow;
}
}
#test{
width:30px;
height:30px;
transition:all ease 2s 0.2s;
background:#0094ff;
}
#test:hover{
width:1000px;
animation:mycolor 2s;
}
#water,#water1{
position:absolute;
width:10px;
height:10px;
border-radius:5px;
background:red;
top:400px;
left:100px;
cursor:pointer;
}
@keyframes myaction{
80%{
top:0px;
left:30px;
}
100%{
top:10px;
left:10px;
}
} </style>
<div id="test"> </div>
<div id="water1"></div>
<div id="water"></div> <script>
var i = 0;
$("#water").click(function () {
$(this).css("animation", "myaction 1s");
setTimeout(function () {
$("#water").removeAttr("style");
}, 1000);
});
</script>
</body>
</html>
这里测试了 CSS3中的新的特性animation,实现了一个简单的移动动画，可以通过这种方式，做出不同的效果，这里只是抛砖引玉。
下面是用JQUERY的esing行为实现的一个，效果更好。
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.easing.1.3.js"></script>
</head>
<style>
#lanzi{
width:30px;
height:30px;
background:blue;
}
#qiu{
width:20px;
height:20px;
border-radius:20px;
position:absolute;
top:500px;
left:700px;
background:red;
}
</style>
<body>
<div id="lanzi"></div>
<div id="qiu"></div>
<script>
$(function () {
$("#qiu").click(function () {
$("#qiu").animate({
top: [0, 'linear'],
left: [10, 'easeInExpo']
}, 1000).animate({
top:10,left:10
},100);
});
});
</script>
</body>
</html>
jQuery默认动画
支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery内置的动画效果，使用代码如下：
$(element).slideUp({
duration: 1000,
easing: method,
complete: callback
});
参数duration：定义动画运动时间，毫秒，其实就是速度，时间越短，运动速度越快。
参数easing：指定动画效果，Easing js提供多种动画效果，有匀速运动、变加速运动、缓冲波动效果，它们 是：
linear，swing，jswing，easeInQuad，easeOutQuad，easeInOutQuad，easeInCubic， easeOutCubic，easeInOutCubic，
easeInQuart，easeOutQuart，easeInOutQuart， easeInQuint，easeOutQuint，easeInOutQuint，easeInSine，easeOutSine，
easeInOutSine，easeInExpo，easeOutExpo，easeInOutExpo，easeInCirc， easeOutCirc，easeInOutCirc，easeInElastic，
easeOutElastic，easeInOutElastic， easeInBack，easeOutBack，easeInOutBack，easeInBounce，easeOutBounce，easeInOutBounce.
easing的下载地点：
http://gsgd.co.uk/sandbox/jquery/easing/
1. linear2. swing3. easeInQuad4. easeOutQuad5. easeInOutQuad6. easeInCubic
7. easeOutCubic8. easeInOutCubic9. easeInQuart10. easeOutQuart11. easeInOutQuart12. easeInQuint
13. easeOutQuint14. easeInOutQuint15. easeInExpo16. easeOutExpo17. easeInOutExpo18. easeInSine
19. easeOutSine20. easeInOutSine21. easeInCirc22. easeOutCirc23. easeInOutCirc24. easeInElastic
25. easeOutElastic26. easeInOutElastic27. easeInBack28. easeOutBack29. easeInOutBack30. easeInBounce
31. easeOutBounce32. easeInOutBounce
<!DOCTYPE html>
<html>
<head> </head>
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.easing.1.3.js"></script>
<style>
#lanzi{
background:blue;
width:30px;
height:30px;
}
#qiu{
background:red;
width:20px;
height:20px;
border-radius:10px;
position:absolute;
top:400px;
left:500px;
}
</style>
<body>
<div id="lanzi"></div>
<div id="qiu"></div>
<script>
$("#qiu").click(function () {
$(this).clone().appendTo('body').animate({
top: [10, "easeOutCirc"],
left: [10, "linear"]
}, 1000, function () { $(this).fadeOut(5000) })
})
</script>
</body>
</html>
用js+css3做一个小球投篮的动画（easing）的更多相关文章
- .Net MVC&&datatables.js&&bootstrap做一个界面的CRUD有多简单
我们在项目开发中,做得最多的可能就是CRUD,那么我们如何在ASP.NET MVC中来做CRUD呢?如果说只是单纯实现功能,那自然是再简单不过了,可是我们要考虑如何来做得比较好维护比较好扩展,如何做得 ...
- (Demo分享)利用JavaScript（JS）做一个可输入分钟的倒计时钟功能
利用JavaScript(JS)实现一个可输入分钟的倒计时钟功能本文章为 Tz张无忌 原创文章,转载请注明来源,谢谢合作! 网络各种利用JavaScript做倒计时的Demo对新手很不友好,这里我亲手 ...
- 用 CSS3 做一个流星雨动画
昨天 UI 提交过来一个登录页的设计稿,要求背景有一个流星雨动画,做完之后觉得挺有趣,分享一下~ 一.流星动画 首先创建一个 div 作为画布 <div id="stars" ...
- 用css3做一个求婚小动画
概述 本案例主要是运用到了css3的animation.keyframes.transform等属性,熟悉了,就可以做更多的其他动画效果,这几个属性功能非常强大. 详细 代码下载:http://www ...
- react.js+easyui 做一个简单的商品表
效果图: import React from 'react'; import { Form, FormField, Layout,DataList,LayoutPanel,Panel, Lab ...
- 用css3做一个正方体
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 用JS 循环做一个表格
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 如何用纯 CSS 创作一个小球上台阶的动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/PBGJwL 可交互视频 ...
- [Material Design] 教你做一个Material风格、动画的button(MaterialButton)
原创作品,转载请注明出处:http://blog.csdn.net/qiujuer/article/details/39831451 前段时间Android L 公布了,相信看过公布会了解过的朋友都为 ...
随机推荐
- PHP.47-TP框架商城应用实例-后台22-权限管理-角色和管理员的关系
角色和管理员的关系 角色功能 管理员功能 角色与管理的关联要通过管理-角色表进行{多对多} /********* 管理-角色表 *********/ drop if exists p39_admin_ ...
- jsp内置的对象【jsp可用数据容器】
jsp的内置对象用法:可以存放数据进去,本身页面可以调用,发生页面请求时,请求目标可以调用 理解:jsp就是一个大容器,有请求,响应等内置对象,会话需要从请求容器中提取 请求中内置session,发出 ...
- 北京Uber优步司机奖励政策（1月5日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- 一个例子说明substr(), mb_substr() 和 mb_strcut()之间的区别
例子来自PHP官方文档,我只是翻译下. http://www.php.net/manual/zh/function.mb-strcut.php header( 'Content-Type:text/h ...
- Ruby & Rails学习资料
------------------教程------------- Ruby风格指南(代码规范) https://github.com/bbatsov/ruby-style-guide 笨方法學 Ru ...
- UPA深度性能报告解读
WeTest 导读 UPA作为腾讯WeTest与Unity官方联合打造的客户端性能分析工具,为开发者提供了极大的便利和效能提升.产出的分析报告内容详尽,但您是否真的读懂了报告?是否了解每项数据的含义? ...
- Selenium（Python） ddt读取MySQL数据驱动
import unittestfrom time import sleep from ddt import ddt, datafrom pymysql import connectfrom selen ...
- 一句话描述 Java 设计模式
Java 设计模式 设计模式是对应于不同的应用目的的. 适配:将特定功能接口适配需求方 桥接:面向两个接口,无关接口的实现: 抽象化与实现化解耦,使得二者可以独立变化:例:笔与图形,笔可以画图 ...
- [Clr via C#读书笔记]Cp11事件
Cp11事件 类型之所以提供事件通知功能,是因为类型维护了一个已登记方法的列表,事件发生后,类型将通知列表登记的所有方法: 事件模型建立在委托的基础上.委托是调用回调方法的一种类型安全的方式. 设计事 ...
- SpringCloud IDEA 教学 (三) Eureka Client
写在前头 本篇继续介绍基于Eureka的SpringCloud微服务搭建,回顾一下搭建过程, 第一步:建立一个服务注册中心: 第二步:建立微服务并注入到注册中心: 第三步:建立client端来访问微服 ...