<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. R绘图 第十二篇：散点图（高级）

    散点图用于描述两个连续性变量间的关系,三个变量之间的关系可以通过3D图形或气泡来展示,多个变量之间的两两关系可以通过散点图矩阵来展示. 一,添加了最佳拟合曲线的散点图 使用基础函数plot(x,y)来 ...

  2. MVC使用Redis实现分布式锁

    使用场景 在做Web项目的时候,有很多特殊的场景要使用到锁 比如说抢红包,资源分配,订单支付等场景 就拿抢红包来说,如果一个红包有5份,同时100个人抢如果没有用到锁的话 100个人同时并发都抢成功, ...

  3. Linux Namespace : PID

    PID namespace 用来隔离进程的 PID 空间,使得不同 PID namespace 里的进程 PID 可以重复且互不影响.PID namesapce 对容器类应用特别重要, 可以实现容器内 ...

  4. 【亲测有效】无法定位链接器！请检查 tools\link.ini 中的配置是否正确的解决方案

    在进行易语言静态编译的时候,出现了如下错误: 正在进行名称连接...正在统计需要编译的子程序正在编译...正在生成主程序入口代码程序代码编译成功等待用户输入欲编译到的文件名正在进行名称连接...开始静 ...

  5. @Pointcut的用法

    在Spring 2.0中,Pointcut的定义包括两个部分:Pointcut表示式(expression)和Pointcut签名(signature).让我们先看看execution表示式的格式: ...

  6. python2.6升级到3.3.0 以及依赖库在迁移时的处理

    线上服务器python版本默认是2.6,由于业务程序要求,需要将python升级到3.3.0, 操作记录如下: Cenots6.8默认安装的是2.6版本,要更新升级需安装下gcc: [root@ope ...

  7. Gerrit上分支操作记录（创建分支、删除分支）

    Git分支对于一个项目的代码管理而言,是十分重要的!许多久用git的朋友可能已经掌握的很牢固了,但对于一些初涉git的童鞋来说,可能还不是很熟悉.在此,我将自己的一些操作经历做一梳理,希望能帮助到有用 ...

  8. #个人博客作业Week1——浏览教材后提出的六个问题及软件与软件工程的提出。

    1.通常,我们阅读软件比编写软件花费的时间更多.正因为编写软件比阅读软件要容易,因此代码的可读性显得尤为重要.那么我们在写程序时应该如何避免多余的,带有误导性的注释,写出一个利于帮助别人读懂程序的注释 ...

  9. Linux内核分析第三章读书笔记

    第三章 进程管理 3.1 进程 进程就是处于执行期的程序 进程就是正在执行的程序代码的实时结果 线程:在进程中活动的对象.每个线程都拥有一个独立的程序计数器.进程栈和一组进程寄存器. 内核调度的对象是 ...

  10. Leetcode 546. Remove Boxes

    题目链接: https://leetcode.com/problems/remove-boxes/description/ 问题描述 若干个有序排列的box和它们的颜色,每次可以移除若干个连续的颜色相 ...