用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 公布了,相信看过公布会了解过的朋友都为 ...
随机推荐
- Emgucv安装及使用
Emgucv安装 最近有个客户联系我,希望我能够为他们做一个识别瓷砖花纹的软件.应用场景是这样的:现场会有一个摄像头去拍摄流水线上运输的瓷砖,如果检测这块瓷砖的花纹不符合要求,则需要给PLC或输出板卡 ...
- 使用GeoServer发布shp数据为WMS服务和WFS服务
使用GeoServer发布shp数据为WMS服务和WFS服务 1安装GeoServer 2使用GeoServer上传数据 3使用GeoServer发布数据为WMS和WFS 看完本教程,你将学会安装Ge ...
- GoF设计模式
GOF23种设计模式简介 GoF(“四人帮”,指Gamma, Helm, Johnson & Vlissides, Addison-Wesley四人)提出的23种设计模式可谓经典,由于其定义比 ...
- 使用postman实现半自动化
前些日子项目要上一个活动,其中有一个功能是幸运大转盘,用户可以随机抽奖,奖品有多种满减券及多种商品,但是奖品都是有抽中概率的,且有的商品还设置有库存,所以测试点便是测试抽奖的概率和库存.接下来拆分一下 ...
- Java小记（1）
return 关键字 package mytest; public class Test4 { public static void main(String[] args) { // TODO Aut ...
- mysql新手进阶02
云想衣裳花想容,春风拂槛露华浓. 若非群玉山头见,会向瑶台月下逢. 现在有一教学管理系统,具体的关系模式如下: Student (no, name, sex, birthday, class) Tea ...
- sqlserver错误126解决方法
是不是很尴尬! 华丽的分割线下便是解决方法: 1.打开sqlserver配置管理器. 2.选择sqlserver网络配置,并禁用VIA协议确定保存. 3.在服务里面启动[SQL Server (SQL ...
- 简单的switch嵌套
//添加list数据 1 public static void main(String[] args) { List<String> al = new ArrayList<Strin ...
- FastJson 序列化与反序列化一些说明
最近所属的组需要对接一些征信结构,就涉及到很多中的数据格式,而springmvc中使用的是jackson作为@ResponseBody的依赖jar 但是个人认为fastkson的性能要高于jackso ...
- some Commands OF CONSOLE
不可避免地使用console,一旦与电脑打交道:入口就是help,而很多行就直接过掉了,却不能看到需要的地方,在那里停下来,实际是需要使用more less grep等 在windows中,使用di ...