<html>

<head>

<title>球</title>

 <style type="text/css">

 .test{

	width:100px;

	height:100px;

	position:absolute;

	top:0px;

	left:0px;

	background:red;

	border-radius:50px;

	transition: left 5s ease-out 5s,

	background-color 5s ease 0s;

	-moz-transition:left 5s ease-out 5s,

	background-color 5s ease 0s;

	-webkit-transition:left 5s ease-out 5s,

	background-color 5s ease 0s;

	-o-transition:left 5s ease-out 5s,

	background-color 5s ease 0s;

	}

 .second-position{

	left:50%;

	background-color:yellow;

 }

.ball{

	width:20px;

	height:20px;

	position:absolute;

	top:0px;

	left:0px;

	background:blue;

	border-radius:50px;

	animation:bouncyball 3s ease-in-out;

	-moz-animation:bouncyball 12s ease-in-out;

	-webkit-animation:bouncyball 23s ease-in-out;

	}

 @keyframes bouncyball{

	0%{bottom:100%;left:0px;}

	12.5%{bottom:0px;left:12.5px;}

	25%{bottom:50%;left:25%;}

	50.5%{bottom:0px;left:12.5px;}

	55%{bottom:24%;left:50%;}

	62.5%{bottom:0px;left:12.5px;}

	75%{bottom:12.5;left:75%;}

	80.5%{bottom:0px;left:12.5px;}

	100%{bottom:2%;left:100%;}

	 }

 @-moz-keyframes bouncyball{

		0%{bottom:100%;left:0px;}

	12.5%{bottom:0px;left:12.5px;}

	25%{bottom:50%;left:25%;}

	50.5%{bottom:0px;left:12.5px;}

	55%{bottom:24%;left:50%;}

	62.5%{bottom:0px;left:12.5px;}

	75%{bottom:12.5;left:75%;}

	80.5%{bottom:0px;left:12.5px;}

	100%{bottom:2%;left:100%;}

	 }

 @-webkit-keyframes bouncyball{

		0%{bottom:100%;left:0px;}

	12.5%{bottom:0px;left:12.5px;}

	25%{bottom:50%;left:25%;}

	50.5%{bottom:0px;left:12.5px;}

	55%{bottom:24%;left:50%;}

	62.5%{bottom:0px;left:12.5px;}

	75%{bottom:12.5;left:75%;}

	80.5%{bottom:0px;left:12.5px;}

	100%{bottom:2%;left:100%;}

 }

 </style>

</head>

<body>

<div class="test"></div>

<script>

	document.getElementsByClassName('test')[0].classList.add('second-position');

</script>

<div class="ball"></div>

</body>

</html>

HTML for android 移动小球的更多相关文章

  1. 用Xamarin 实现园友的 ：Android浮动小球与开机自启动

    原文:用Xamarin 实现园友的 :Android浮动小球与开机自启动 前两天看园子里有筒子写了个 Android浮动小球与开机自启动  , 感觉这种被 360 玩烂的功能原来是如此的简单啊... ...

  2. Android浮动小球与开机自启动

    看着手机上的360浮动小球,不评价其具体的功能与实用性,至少在UI设计与交互方面是个不小的创新. 如图片左上角所示,球中还会显示当前手机的运行状况,向下拉动还会有弹射来达到加速.清理等目的. 那好,先 ...

  3. C#使用Xamarin开发Android应用程序 -- 系列文章

    Xamarin开发Android应用程序 利用Xamaria构建Android应用-公交发车信息屏 Xamarin版的C# SVG路径解析器 C#使用Xamarin开发可移植移动应用(1.入门与Xam ...

  4. android脚步---跟随手指动的小球

    这次的学习主要是在包里面除自动生成的mainactivity.java之外,再新建一个class, DrawView,在mainactivity里面调用DrawView. 在DrawView里面主要是 ...

  5. 在Android上仿百度贴吧客户端Loading图标小球

    封面 前言 使用百度贴吧客户端的时候发发现加载的小动画挺有意思的,于是自己动手写写看.想学习自定义View以及自定义动画的小伙伴一定不要错过哦. 读者朋友需要有最基本的canvas绘图功底,比如画笔P ...

  6. Android开发——跟随手指的小球实现

      今天要实现的是一个跟随手指的小球,说白了就是让小球按着手指滑动的轨迹运动,实现起来还是比较容易的. 用到的类是drawView,我们先自定义一个DrawView组件. DrawView.java: ...

  7. Android仿360悬浮小球自定义view实现

    转载请标明出处:http://www.jianshu.com/u/a5ad093cffe8 效果图如下: 图片.png   图片.png 实现当前这种类似的效果 (360小球 悬浮桌面差不错类似).第 ...

  8. Unity3D学习笔记——Android重力感应控制小球

    一:准备资源 两张贴图:地图和小球贴图. 二:导入资源 在Assets下建立resources文件夹,然后将贴图导入. 三:建立场景游戏对象 1.建立灯光: 2.创建一个相机,配置默认. 3.建立一个 ...

  9. 虾扯蛋：Android View动画 Animation不完全解析

    本文结合一些周知的概念和源码片段,对View动画的工作原理进行挖掘和分析.以下不是对源码一丝不苟的分析过程,只是以搞清楚Animation的执行过程.如何被周期性调用为目标粗略分析下相关方法的执行细节 ...

随机推荐

  1. eclipse取消自动输入提示

    在设置Eclipse自动提示后,按a-z都会显示提示,但是我们需要键入Enter才会输入,而默认的所有都键入,非常弱智,可采用下面方法设置. 1,先找到相关的插件: window -> show ...

  2. Nginx---应用场景小结

    Nginx介绍   Nginx一是一款轻量级的.高性能的HTTP.反向代理服务器,具有很高的稳定性.支持热部署.模块扩展也非常容易.Nginx采取了分阶段资源分配技术,处理静态文件和无缓存的反向代理加 ...

  3. CSS 边框(border)实例

    CSS 边框(border)实例:元素的边框 (border) 是围绕元素内容和内边距的一条或多条线. CSS border 属性允许你规定元素边框的样式.宽度和颜色. CSS 边框属性属性 描述bo ...

  4. CentOS7中安装redis5.0

    1. 环境介绍 CentOS7 (未安装Development Tools) 2. 下载Redis5.0-rc3 wget -O redis-5.0-rc3.tar.gz https://github ...

  5. nginx负载均衡（5种方式）、rewrite重写规则及多server反代配置梳理

    Nginx除了可以用作web服务器外,他还可以用来做高性能的反向代理服务器,它能提供稳定高效的负载均衡解决方案.nginx可以用轮询.IP哈希.URL哈希等方式调度后端服务器,同时也能提供健康检查功能 ...

  6. Centos下PPTP环境部署记录

    PPTP(点到点隧道协议)是一种用于让远程用户拨号连接到本地的ISP,通过因特网安全远程访问公司资源的新型技术.它能将PPP(点到点协议)帧封装成IP数据包,以便能够在基于IP的互联网上进行传输.PP ...

  7. 牛客训练赛25-A-因数个数

    题目链接https://www.nowcoder.com/acm/contest/158/A 无语...这题很迷啊,原谅我的菜,刚开始想用预处理欧拉筛和前缀和,可是这题太血崩了,这样一样要遍历,1-e ...

  8. Week2 关于代码规范的一些认识

    代码规范 我觉得代码规范是有必要的,而对于以下的四个观点我要提出自己的反驳: 这些规范都是官僚制度下产生的浪费大家的编程时间.影响人们开发效率, 浪费时间的东西 首先应该明白,什么是“编码规范”?它不 ...

  9. BUAAMOOC项目M2 postmortem

    设想和目标 1.我们的软件要解决什么问题?是否定义的很清楚?是否对典型用户和典型场景有清晰的描述? 我们的软件是基于北航MOOC网站做的Android手机客户端,用于便捷的在学校里通过手机做到随时随地 ...

  10. <<浪潮之巅>>阅读笔记二

    好的文章总是慢慢吸引着你去阅读,这本书的作者是吴军博士,让我很钦佩的是他还是一个很著名的程序员.其实我感觉理科生在写作方面的能力是很欠缺的,我们经常做到了有观点,但是做不到和别人表达清楚你的观点想法, ...