如下代码实现方块在限定区域内不停弹跳。

<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:myfirst 5s linear 2s infinite alternate;

/* Firefox: */

-moz-animation:myfirst 5s linear 2s infinite alternate;

/* Safari and Chrome: */

-webkit-animation:myfirst 5s linear 2s infinite alternate;

/* Opera: */

-o-animation:myfirst 5s linear 2s infinite alternate;

}

@keyframes myfirst

{

0%   {background:red; left:0px; top:0px;}

25%  {background:yellow; left:200px; top:0px;}

50%  {background:blue; left:200px; top:200px;}

75%  {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

@-moz-keyframes myfirst /* Firefox */

{

0%   {background:red; left:0px; top:0px;}

25%  {background:yellow; left:200px; top:0px;}

50%  {background:blue; left:200px; top:200px;}

75%  {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

0%   {background:red; left:0px; top:0px;}

25%  {background:yellow; left:200px; top:0px;}

50%  {background:blue; left:200px; top:200px;}

75%  {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

@-o-keyframes myfirst /* Opera */

{

0%   {background:red; left:0px; top:0px;}

25%  {background:yellow; left:200px; top:0px;}

50%  {background:blue; left:200px; top:200px;}

75%  {background:green; left:0px; top:200px;}

100% {background:red; left:0px; top:0px;}

}

</style>

</head>

<body>

<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

<div></div>

</body>

</html>

CSS3弹力球的更多相关文章

  1. js版弹力球实例

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>弹 ...

  2. pygame写的弹力球

    这是pygame写的弹力球 运行效果: ======================================================== 代码部分: ================= ...

  3. 简单的运动学，用canvas写弹力球

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 跟之前的随笔一样,因为本人仍是菜鸟一只,所以用到的技术比较简单,不适合大神观看...... 学canvas学了有一个多礼拜了,觉得canv ...

  4. pygame系列_弹力球

    这是pygame写的弹力球 运行效果: ======================================================== 代码部分: ================= ...

  5. js课程 6-15 js简单弹力球如何实现

    js课程 6-15 js简单弹力球如何实现 一.总结 一句话总结:a.通过document的documentElement属性获取可是区域的高: b.通过增值变为负的实现到底部后反弹 1.docume ...

  6. JS实现弹性势能效果(弹力球效果[实现插件封装])

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. 跟我一起学编程—《Scratch编程》第22课：颠弹力球

    1. 能够熟练绘制角色和背景造型 2. 能够熟练控制角色角度.速度等 3. 能够熟练使用变量 4. 能够熟练使用循环.选择等指令控制程序 任务描述: 1. 绘制弹力小球.托板角色,背景造型. 2. 游 ...

  8. 原生js弹力球

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. pygame 弹力球及其变速的实现

    期望: 1.球体接触到框体后反弹 2.设置速度按键,按下后改变球体速度.颜色状态 具体实现: import pygame from pygame.locals import * import sys, ...

随机推荐

  1. 在ASP.NET非MVC环境中（WebForm中）构造MVC的URL参数

    目前项目中有个需求,需要在WebForm中去构造MVC的URL信息,这里写了一个帮助类可以在ASP.NET非MVC环境中(WebForm中)构造MVC的URL信息,主要就是借助当前Http上下文去构造 ...

  2. python字符串列表字典相互转换

    字符串转换成字典 json越来越流行,通过python获取到json格式的字符串后,可以通过eval函数转换成dict格式: >>> a='{"name":&qu ...

  3. MySQL存储引擎中的MyISAM和InnoDB区别详解

    在使用MySQL的过程中对MyISAM和InnoDB这两个概念存在了些疑问,到底两者引擎有何分别一直是存在我心中的疑问.为了解开这个谜题,搜寻了网络,找到了如下信息: MyISAM是MySQL的默认数 ...

  4. 不定参数的传递VA_LIST的用法

    VA_LIST的用法:(1)首先在函数里定义一具VA_LIST型的变量,这个变量是指向参数的指针: (2)然后用VA_START宏初始化变量刚定义的VA_LIST变量,使其指向第一个可 变参数的地址: ...

  5. 20145227 《Java程序设计》第4周学习总结

    20145227 <Java程序设计>第4周学习总结 教材学习内容总结 第六章 继承与多态 6.1 何谓继承 1.继承共同行为 多个类中存在相同属性和行为时,将这些内容抽取到单独一个类中, ...

  6. css 前景色与背景色

    前景色:color:#990000; 背景色:background-color:red; 可以用来设置文字的前景色与背景色 <!-- 作者:纤锐出处:http://www.cnblogs.com ...

  7. 关于plsql表如何创建自增长列

    1首先在sequence中创建新序列 在oracle中sequence就是所谓的序列号,每次取的时候它会自动增加,一般用在需要按序列号排序的地方. 这是语句创建 create sequence ide ...

  8. JDBC的批量处理数据

    主要用到的方法有: preparedStatement.executeBatch();//积攒的数据执行 preparedStatement.clearBatch();//积攒的清除掉 prepare ...

  9. Linux学习之八——利用变量

    一.变量的使用 用$放在变量前面进行使用,例如: echo $PATH 为了和别的字符隔开,可以用{}和"",例如 echo ${PATH}nic echo "$PATH ...

  10. poj2269 Friends

    计算表达式. 只有3种运算符:*,+,- , *优先级高于后两者,后两者优先级相同. 有两种符号:{},(). 利用递归和堆栈即可解决. 首先遇到左括号开始入栈直到遇到右括号,遇到右括号时对括号内的数 ...