用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 公布了,相信看过公布会了解过的朋友都为 ...
随机推荐
- react路由按需加载方法
使用router4之后以前的按需加载方法require.ensure 是不好使了. 所以我们改用react-loadable插件做按需加载. 第一步: yarn add react-loadable ...
- 问题集 - console.log在IE下不可用
js中添加如下一段代码即可. if(!window.console){ window.console = {}; } if(!window.console.log){ window.console.l ...
- Ruby基础教程 1-10
类结构 1.数值类结构 Fixnum到Bignum会自动转换 2.常用数值表示 3. ans=10.divmod(3) ans[0]是商 ans[1]是余数 4.实例方法roun ...
- debian8+lnmp1.2一键安装+WordPress3.9
下载并安装LNMP一键安装包 wget -c http://soft.vpser.net/lnmp/lnmp1.2-full.tar.gz && tar zxf lnmp1.2-ful ...
- selenium,unittest——驾照科目一网上答题自动化
需求很简单,所有题目全选A,然后点提交出分,校验是否到达出分这步 遇到的坑有这几个,一个是assertIn哪个是校验哪个是文本要分清,还有code的编码统一到Unicode,最后就是xpath定位各个 ...
- TPO-14 C2 Prepare for a career in journalism
TPO-14 C2 Prepare for a career in journalism 第 1 段 1.Listen to a conversation between a student and ...
- Unity Android设备的输入
Unity Android设备的输入 1依据屏幕位置输入 有的时候也许是为了整个有些风格的干净,减少屏幕上的UI图标,以至于摒弃了虚拟按键这种常用的输入方式.为了替代虚拟按键的输入方式而选择了依据点击 ...
- Python基础简介
一.目前各种语言的应用:java, 可以把特别小的项目做大,并且开源库比较多,C: 用在最底层,例如编写操作系统,运行速率快,开发效率低,C++:常坐游戏引擎Python:AI(人工智能) 简单.明确 ...
- STM32串口通信UART使用
STM32串口通信UART使用 uart使用的过程为: 1. 使能GPIO口和UART对应的总线时钟 2. 配置GPIO口的输出模式 3. 配置uart口相关的基本信息 4. 使能uart口的相关的中 ...
- URAL 1519 Formula 1（插头DP，入门题）
Description Background Regardless of the fact, that Vologda could not get rights to hold the Winter ...