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的执行过程.如何被周期性调用为目标粗略分析下相关方法的执行细节 ...
随机推荐
- Luogu P2286 [HNOI2004]宠物收养场
一道比较简单的直接Treap运用题目,思维难度和代码难度都不是很高. 题意有点长,我们仔细剖析一下题意发现以下几个关键: 任何时候收养站里只可能有人和宠物中的其中一种,或者都没有 如果只有宠物并有人来 ...
- jinja2模块使用教程
模板 要了解jinja2,那么需要先理解模板的概念.模板在Python的web开发中广泛使用,它能够有效的将业务逻辑和页面逻辑分开,使代码可读性增强.并且更加容易理解和维护. 模板简单来说就是一个其中 ...
- 【Java并发.1】简介
继上一本<深入理解Java虚拟机>之后,学习计划里的另一本书<Java并发编程实战>现在开始学习,并记录学习笔记. 第一章主要内容是介绍 并发 的简介.发展.特点. 编写正确的 ...
- Quartz.Net分布式任务管理平台（续）
感谢@Taking园友得建议,我这边确实多做了一步上传,导致后面还需处理同步上传到其他服务器来支持分布式得操作.所有才有了上篇文章得完善. 首先看一下新的项目结构图: 这个图和上篇文章中 ...
- OpenGL学习（1）——创建窗口
这是我的第一篇博客,试着记录学习OpenGL的过程.使用的教程:LearnOpenGL,系统:Deepin 15.9.3,IDE:Qt Creator. 添加头文件 创建窗口用到两个库:GLFW和GL ...
- Redis常用操作-------Hash（哈希表）
1.HDEL key field [field ...] 删除哈希表 key 中的一个或多个指定域,不存在的域将被忽略. 在Redis2.4以下的版本里, HDEL 每次只能删除单个域,如果你需要在一 ...
- 《Linux内核设计与实现》读书笔记 5
第五章系统调用 5．1与内核通信 系统调用在用户空间进程和硬件设备间添加了一个中间层, 作用:为用户空间提供了一种硬件的抽象接口:保证了系统的稳定和安全,避免应用程序不正确使用硬件,窃取其他进程的资源 ...
- LINUX内核分析第八周总结：进程的切换和系统的一般执行过程
一.进程调度与进程切换 1.不同的进程有不同的调度需求 第一种分类: I/O密集型(I/O-bound) 频繁的进行I/O 通常会花费很多时间等待I/O操作的完成 CPU密集型(CPU-bound) ...
- 猫咪记单词Beta版使用说明
猫咪记单词Beta版使用说明 一.项目背景 英语四级考试.六级考试.托福.雅思等英语方面的考试是现在大学生必须面对的问题.同时因为学生对手机的使用越来越频繁,而且仅仅通过书本背诵单词又比较无聊坚持的时 ...
- 安装虚拟环境和Flask
一.Flask 使用前准备 一. 安装及创建虚拟环境 1. 安装虚拟环境 win + R -> cmd -> pip install virtualenv -> 出现 Success ...