用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 公布了,相信看过公布会了解过的朋友都为 ...
随机推荐
- 20145226夏艺华《网络对抗》第一次实验拓展：shellcode注入+return-to-libc
20145226夏艺华<网络对抗>第一次实验拓展:shellcode注入+return-to-libc shellcode注入实践 编写shellcode 编写shellcode已经在之前 ...
- python中将datetime对象转化为时间戳
从mongodb中读取出来的记录中,时间存储在datetime对象里,返回给客户端的却要求是时间戳格式,因此需要将对应的datetime时间转化为时间戳,从stackoverflow上找到同样的问题和 ...
- 北京Uber优步司机奖励政策（12月9日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- HDU 5972 Regular Number
Regular Number http://acm.hdu.edu.cn/showproblem.php?pid=5972 题意: 给定一个字符串,求多少子串满足,子串的第i位,只能是给定的数(小于等 ...
- springboot与activemq的使用
1.springboot和activemq的使用相对来说比较方便了,我在网上看了很多其他的资料,但是自己写出来总是有点问题所以,这里重点描述一下遇到的一些问题. 2.至于activemq的搭建和spr ...
- 创龙DSP6748学习之RS485收发
1. 先看下原理图,第一个问题,RS485其实就是使用的串口USART1,同时485的输出脚之间接120欧姆的电阻. 遇到个问题,为什么有两个使能引脚?还有RS485_A和RS485_B为什么分别接上 ...
- Linker加载so失败问题分析
WeTest 导读 近期测试反馈一个问题,在旧版本微视基础上覆盖安装新版本的微视APP,首次打开拍摄页录制视频合成时高概率出现crash. 那么我们直奔主题,看看日志: 另外复现的日志中还出现如下信息 ...
- 「日常训练」Kefa and Park（Codeforces Round #321 Div. 2 C）
题意与分析(CodeForces 580C) 给你一棵树,然后每个叶子节点会有一家餐馆:你讨厌猫(waht?怎么会有人讨厌猫),就不会走有连续超过m个节点有猫的路.然后问你最多去几家饭店. 这题我写的 ...
- logstash-input-jdbc and logstash-ouput-jdbc
要求通过logstash从oracle中获取数据,然后相应的直接传入mysql中去. 基本测试成功的配置文件如下: input { stdin { } jdbc { jdbc_connection_s ...
- ant-design学习准备_1
在学习ant-desin过程中,发现很多知识都不清楚,从现在开始,每天将自己学习到的知识进行一个总结记录,前端大佬勿扰勿喷.先介绍几个基础概念和一些常用命令: 1.什么是脚手架 我们经常在各个博客论坛 ...