<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. 扩展 WPF 动画类

    原文:扩展 WPF 动画类 扩展 WPF 动画类                                                                     Charles ...

  2. 【php增删改查实例】第十九节 - session的使用: 让服务器知道你是谁？

    因为HTTP请求是一种无状态的请求,所谓无状态,就是服务器不会记录下你本次请求的信息.http它是基于请求 - 相应模式的一种数据传输协议.就是说,你发送一个请求,我服务器给你一个响应,这件事情就算完 ...

  3. 4358: permu

    4358: permu 链接 分析: 不删除的莫队+可撤销的并查集. 每次询问先固定左端点到一个块内,然后将这些右端点从小到大排序,然后询问的过程中,右端点不断往右走,左端点可能会撤销,但是移动区间不 ...

  4. C#实现.Net对邮件进行DKIM签名和验证，支持附件，发送邮件签名后直接投递到对方服务器（无需己方邮件服务器）

    项目地址 https://github.com/xiangyuecn/DKIM-Smtp-csharp 主要支持 对邮件进行DKIM签名,支持带附件 对整个邮件内容(.eml文件)的DKIM签名进行验 ...

  5. c#基础系列2---深入理解 String

    "大菜":源于自己刚踏入猿途混沌时起,自我感觉不是一般的菜,因而得名"大菜",于自身共勉. 扩展阅读:深入理解值类型和引用类型 基本概念 string(严格来说 ...

  6. ExtJS框架基础：事件模型及其常用功能

    前言 工作中用ExtJS有一段时间了,Ext丰富的UI组件大大的提高了开发B/S应用的效率.虽然近期工作中天天都用到ExtJS,但很少对ExtJS框架原理性的东西进行过深入学习,这两天花了些时间学习了 ...

  7. 个人项目Week1

    一.项目时间规划与实际用时 PSP2.1 Personal Software Process Stages 预计时间/h 实际时间/h Planning 计划     · Estimate · 估计这 ...

  8. Linux内核分析作业第七周

    一. 预处理.编译.链接 gcc hello.c -o hello. gcc编译源代码生成最终可执行的二进制程序,GCC后台隐含执行了四个阶段步骤. 预处理 → 编译 → 汇编 → 链接 预处理:编译 ...

  9. JAVA常用工具类汇总

    一.功能方法目录清单: 1.getString(String sSource)的功能是判断参数是否为空,为空返回"",否则返回其值: 2.getString(int iSource ...

  10. 软件工程项目之摄影App（总结）

    软件工程项目之摄影App 心得体会: dyh:这次的项目很难做,本来想在里面添加动画效果的,但是找了很多例子都没看明白,能力还是不足够把,还有一个就是数据库在安卓课程里面刚刚涉及到,所以也还没能做出数 ...