<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. mysql操作命令梳理（5）-执行sql语句查询即mysql状态说明

    在日常mysql运维中,经常要查询当前mysql下正在执行的sql语句及其他在跑的mysql相关线程,这就用到mysql processlist这个命令了.mysql> show process ...

  2. maven依赖的描述

    maven的坐标和依赖 坐标和依赖,主要涉及的就是pom文件的头部和<dependencies>标签部分(1)pom文件的头部 这里头部不是指pom文件的开头<project> ...

  3. Linux基础实践

    Linux基础实践 1.1 应用安装 要求:掌握软件源的维护方法,配置系统使用软件源镜像.掌握通过软件源来查找,安装,卸载,更新软件的方法 备份原地址列表文件:sudo cp /etc/apt/sou ...

  4. 20135327郭皓--Linux内核分析第九周 期中总结

    Linux内核分析第九周 期中总结 一.知识概要 1. 计算机是如何工作的 存储程序计算机工作模型:冯诺依曼体系结构 X86汇编基础 会变一个简单的C程序分析其汇编指令执行过程 2. 操作系统是如何工 ...

  5. 《linux内核设计与分析》内核模块编程

    内核模块编程 一.准备工作 虚拟机:VMware Workstation 12操作系统:ubuntu当前内核版本:linux-headers-4.4.0-22-generic 二.有关于内核模块的知识 ...

  6. java 值传递 数组传递

    在java中,不允许程序员选择值传递还是地址传递各个参数,基本类型总是按值传递.对于对象来说,是将对象的引用也就是副本传递给了方法,在方法中只有对对象进行修改才能影响该对象的值,操作对象的引用时是无法 ...

  7. CAS的应用场景

    国外应用(需FQ尝试): 来自CAS官网推荐的Demo http://casserver.herokuapp.com/cas/login https://casserver.herokuapp.com ...

  8. Appium学习笔记2_Android获取元素篇

    在利用Appium做自动化测试时,最重要的一步就是获取对应的元素值,根据元素来对对象进行对应的操作,如果获得对象元素呢? Appium Server Console其实提供了一个界面对话框" ...

  9. ASP.NET MVC4学习笔记

    一.MVC简介

  10. 使用kindeditor来替换ecshop的fckeditor编辑器，让ecshop可以批量上传图片

    老杨原创 kindeditor此编辑器可以让ecshop批量上传图片,可以插入代码,可以全屏编辑,可以插入地图.视频,进行更多word操作,设置字体. 步骤一:进入kindeditor的官网,http ...