HTML for android 移动小球
<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 移动小球的更多相关文章
- 用Xamarin 实现园友的 ：Android浮动小球与开机自启动
原文:用Xamarin 实现园友的 :Android浮动小球与开机自启动 前两天看园子里有筒子写了个 Android浮动小球与开机自启动 , 感觉这种被 360 玩烂的功能原来是如此的简单啊... ...
- Android浮动小球与开机自启动
看着手机上的360浮动小球,不评价其具体的功能与实用性,至少在UI设计与交互方面是个不小的创新. 如图片左上角所示,球中还会显示当前手机的运行状况,向下拉动还会有弹射来达到加速.清理等目的. 那好,先 ...
- C#使用Xamarin开发Android应用程序 -- 系列文章
Xamarin开发Android应用程序 利用Xamaria构建Android应用-公交发车信息屏 Xamarin版的C# SVG路径解析器 C#使用Xamarin开发可移植移动应用(1.入门与Xam ...
- android脚步---跟随手指动的小球
这次的学习主要是在包里面除自动生成的mainactivity.java之外,再新建一个class, DrawView,在mainactivity里面调用DrawView. 在DrawView里面主要是 ...
- 在Android上仿百度贴吧客户端Loading图标小球
封面 前言 使用百度贴吧客户端的时候发发现加载的小动画挺有意思的,于是自己动手写写看.想学习自定义View以及自定义动画的小伙伴一定不要错过哦. 读者朋友需要有最基本的canvas绘图功底,比如画笔P ...
- Android开发——跟随手指的小球实现
今天要实现的是一个跟随手指的小球,说白了就是让小球按着手指滑动的轨迹运动,实现起来还是比较容易的. 用到的类是drawView,我们先自定义一个DrawView组件. DrawView.java: ...
- Android仿360悬浮小球自定义view实现
转载请标明出处:http://www.jianshu.com/u/a5ad093cffe8 效果图如下: 图片.png 图片.png 实现当前这种类似的效果 (360小球 悬浮桌面差不错类似).第 ...
- Unity3D学习笔记——Android重力感应控制小球
一:准备资源 两张贴图:地图和小球贴图. 二:导入资源 在Assets下建立resources文件夹,然后将贴图导入. 三:建立场景游戏对象 1.建立灯光: 2.创建一个相机,配置默认. 3.建立一个 ...
- 虾扯蛋：Android View动画 Animation不完全解析
本文结合一些周知的概念和源码片段,对View动画的工作原理进行挖掘和分析.以下不是对源码一丝不苟的分析过程,只是以搞清楚Animation的执行过程.如何被周期性调用为目标粗略分析下相关方法的执行细节 ...
随机推荐
- JS-JS代码插入位置
一.HTML 页面的 <head> 部分中 由于 HTML 文档是由浏览器从上到下依次载入的,将 JavaScript 代码放置于<head></head> 标签之 ...
- iisapp -a命令出现 :此脚本不能与WScript工作
今天一个同事向我反馈,使用iis的命令时出现了如标题的问题. 通过百度,找到如下信息: iisapp实际上是存放在C:\windows \system32目录下的一个VBS脚本,全名为iisapp.v ...
- 4358: permu
4358: permu 链接 分析: 不删除的莫队+可撤销的并查集. 每次询问先固定左端点到一个块内,然后将这些右端点从小到大排序,然后询问的过程中,右端点不断往右走,左端点可能会撤销,但是移动区间不 ...
- 关于node.js的进程管理
如果是单纯的运行一个node进程,那会比较简单,例如: node ./example.js 但是一般来说,当我们运行一个node进程之后,我们可能希望对这个进程进行更多的管理,例如,当node程序是一 ...
- for...else 小记
for ......: ...... else: ...... 在 for 循环中,若没有执行 break ,正常结束,则会执行 else 中的语句. 若执行了 break , 则 不会 执行 els ...
- Redis+TwemProxy(nutcracker)集群方案部署记录
Twemproxy 又称nutcracker ,是一个memcache.Redis协议的轻量级代理,一个用于sharding 的中间件.有了Twemproxy,客户端不直接访问Redis服务器,而是通 ...
- 牛客多校第二场A run（基础DP）
链接:https://www.nowcoder.com/acm/contest/140/A来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 131072K,其他语言2621 ...
- Echo团队便利记事本项目终审报告
一.团队成员简介 http://www.cnblogs.com/echo-buaa/p/3991968.html 二.团队项目的目标,预期的典型用户,预期的功能描述,预期的用户数量在哪里? 项目的目标 ...
- WEEK 7：团队项目的感想
经过了几个星期的团队协作,我们的“爬虫”有了很大的完善,我作为团队中的主DEV,在这个过程中一边工作一边阅读,也有了不少的收获. Brooks的<没有银弹>告诉我们,在软件领域,没有什么绝 ...
- struts引入s标签
<%@ taglib prefix="s" uri="/struts-tags"%>