<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. 实现Repeater控件的记录单选

    有朋友问及,在Repeater控件中第一列放置一个RadioButton,实现对记录的单选. 下面Insus.NET想举个例子来实现与说明. 为Repeater控件准备数据: 在ASPX网页上,写好R ...

  2. C# 如何物理删除有主外键约束的记录?存储过程实现

    十年河东,十年河西,莫欺少年穷 本篇主旨是如何物理删除有主外键约束的记录!那么,我们从主外键走起! 下面新建三张有主外键约束的表,分别为:系/学院表,专业班表,学生表,如下: CREATE TABLE ...

  3. Flutter - TabBar导航栏切换后，状态丢失

    上一篇讲到了 Flutter - BottomNavigationBar底部导航栏切换后,状态丢失 里面提到了TabBar,这儿专门再写一下吧,具体怎么操作,来不让TabBar的状态丢失.毕竟大家99 ...

  4. Ceph分布式存储-原理介绍及简单部署

    1)Ceph简单概述Ceph是一个分布式存储系统,诞生于2004年,最早致力于开发下一代高性能分布式文件系统的项目.Ceph源码下载:http://ceph.com/download/.随着云计算的发 ...

  5. linux下syslog-ng日志集中管理服务部署记录

    syslog是Linux系统默认的日志守护进程,默认的syslog配置文件是/etc/syslog.conf文件.syslog守护进程是可配置的,它允许人们为每一种类型的系统信息精确地指定一个存放地点 ...

  6. javascript DOM操作中的insertAdjacentHTML方法

    插入HTML内容与文本内容以前用的是innerHTML与innerText方法,今天看到insertAdjacentHTML和 insertAdjacentText两个API,特地学习一下: inse ...

  7. PHP从入门到精通(四)

    PHP数组中的常用函数汇总 为了更直观的讲解各函数的作用和用法,方便大家的理解,首先,我们来定义一个数组.下面各函数的操作将以本数组为例: $arr = array(1,2,3,4,5,6," ...

  8. sql-server安装

    ubuntu安装sql-server https://docs.microsoft.com/zh-cn/sql/linux/quickstart-install-connect-ubuntu?view ...

  9. Buy the Ticket HDU 1133

    传送门 [http://acm.hdu.edu.cn/showproblem.php?pid=1133] 题目描述和分析 代码 #include<iostream> #include< ...

  10. JAVA面对对象(四)——抽象类

    抽象类的作用类似“模板”,可以根据它的格式来修改.创建新的类:但是不能直接由抽象类创建对象只能通过抽象类派生出新的类,再由它来创建对象:抽象类的使用同样是单继承,即一个子类只能继承一个抽象类 抽象类的 ...