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的执行过程.如何被周期性调用为目标粗略分析下相关方法的执行细节 ...
随机推荐
- vue2.0中使用sass
第一部分:Sass语言 Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量.嵌套规则.mixins.导入等css没有但开发语言(如Java.C#.Ruby等)有的一些特性 ...
- 开发手记：Linux下更改Oracle表空间大小
问题:同事反馈我们的测试环境数据库执行SQL和编译PKG非常慢,猜测可能是我们的测试环境数据库的表空间满了,但是我不知道数据库DBA的用户和密码. 步骤1:查看表空间占用情况 SELECT UPPER ...
- [UWP 自定义控件]了解模板化控件(8)：ItemsControl
1. 模仿ItemsControl 顾名思义,ItemsControl是展示一组数据的控件,它是UWP UI系统中最重要的控件之一,和展示单一数据的ContentControl构成了UWP UI的绝大 ...
- Jmeter(二十八)_Docker+Jmeter+Gitlab+Jenkins+Ant(容器化的接口自动化持续集成平台)
这套接口自动化持续集成环境已经部署差不多了,现在说说我的设计思路 1:利用Docker容器化Gitlab,Jenkins,Jmeter,Ant,链接如下 Docker_容器化gitlab Docker ...
- Matlab入门笔记(1)
1.简单练习题: cos(((1+2+3+4+5)^3/5)^0.5) sin(pi^0.5)+log(tan(1)) 2^(3.5*1.7) exp(sin(10)) 2.实数,复数,行向量,列向量 ...
- Codeforces Round #503 (by SIS, Div. 2)-C. Elections
枚举每个获胜的可能的票数+按照花费排序 #include<iostream> #include<stdio.h> #include<string.h> #inclu ...
- swap函数
#include<iostream> using namespace std; void swap(int& a,int& b){ int t=a; a=b; b=t; } ...
- Flask、Celery、RabbitMQ学习计划
Flask (9.16-9.23) 相关组件了解 (9.16-17) WSGI:Werkzeug 数据库:SQLAlchemy *重点查看 urls和视图 (9.18-19) session和co ...
- NEWBE CRALWER 产品需求文档
1.产品概述 本产品是学霸软件系统的爬虫部分,由NEWBE团队负责.主要任务是从网上爬取出相关数据后提供给C705组使用. 2.产品的发展经历 2.1 产品的发展经历 本产品从2014.10.29开始 ...
- 实验五 TCP传输及加密
实验内容: 1.运行教材上TCP代码,结对进行,一人服务器,一人客户端: 2.利用加解密代码包,编译运行代码,一人加密,一人解密: 3.集成代码,一人加密后通过TCP发送: 注:加密使用AES或者DE ...