用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 公布了,相信看过公布会了解过的朋友都为 ...
随机推荐
- nodejs multer
nodejs上传文件multer var multer = require('multer') var storage = multer.diskStorage({ destination: func ...
- elk6.3.2在线安装中文分词工具IK
1.进入ES目录并执行安装(注意版本号改成你需要的版本) cd /usr/share/elasticsearch ./bin/elasticsearch-plugin install https:// ...
- JavaScript---通过正则表达式验证表单输入
验证输入的name只能是数字或字母或下划线 js <script type="text/javascript"> function submitOn(){ var f ...
- GDAL2.1.1库在Ubuntu14.04下编译时遇到的问题处理方法
不用作任何调整,直接在Linux下编译GDAL2.1.1源码的步骤是: $ ./configure $ make $ make install 非常简单,这样也能正常生成gdal动态库.静态库,如果想 ...
- JDBC事务机制
package com.jdbc.test; import java.sql.*; /** * 数据库的引擎必须是innodb */ public class Demo02 { PreparedSta ...
- 【JSON类】使用说明
理解键名路径 键名路径(keyPath)用于定位json的键,比如:{book: {title:”中国人”} },键名路径 book.title 表定位到book下的title键. 对于值是数组类型的 ...
- 【template、import、include】微信小程序：模板(template)、引用(import、include)说明
模板(template): 定义模板 <template name="[String]"> <!-- 模板代码 --> <view> <t ...
- 聊一聊 Flex 中的 flex-grow、flex-shrink、flex-basis
在使用 flex 布局的时候难以理解的是 flex-grow.flex-shrink.flex-basis 几个属性的用法,下面通过几个例子来演示. flex-basis flex-basis 用于设 ...
- poj 3468 (区间修改 区间查询)
A Simple Problem with Integers Time Limit: 5000MS Memory Limit: 131072K Total Submissions:147133 ...
- UVa 455 - Periodic Strings - ( C++ ) - 解题报告
1.题目大意 求一个长度不超过80的字符串的最小周期. 2.思路 非常简单,基本就是根据周期的定义做出来的,几乎不需要过脑. 3.应该注意的地方 (1) 最后输出的方式要注意,不然很容易就PE了.不过 ...