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

<!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. 有趣的linux命令

    安装工具 debian ＝> apt-get (In Debian like OS) red hat＝> yum -y (In Red Hat like OS) mac ＝> bre ...

  2. zw版【转发·台湾nvp系列Delphi例程】HALCON DivImage1

    zw版[转发·台湾nvp系列Delphi例程]HALCON DivImage1 procedure TForm1.Button1Click(Sender: TObject);var    img0, ...

  3. 三、Java基础---------关于继承、构造函数、静态代码块执行顺序示例讲解

    在上节博客中曾提到过类的继承,这篇文章主要是介绍类的继承.构造函数以及静态代码块的执行顺序. 首先接着分析在黑马基础测试中的一个关于继承的题目,题目描述如下: 声明类Person,包含2个成员变量:n ...

  4. Swift常量和变量

    常量和变量由一个特定名称来表示,如maxNumber 或者 message.常量所指向的是一个特定类型的值, 如数字10或者字符”hello”.变量的值可以根据需要不断修改,而常量的值是不能够被二次修 ...

  5. c# 操作xml题目

    download! 1.新建一个文本文件,命名为:projects.txt. 2.将后缀名改为projects.xml.  3.用记事本编辑该文件.使用utf-8编码.内容如下: <?xml v ...

  6. android 项目学习随笔三（Fragment ）

    1.在主页面(activity引用Fragment )的布局文件中定义FrameLayout ,加载Fragment  <FrameLayout xmlns:android="http ...

  7. java运算符优先级记忆口诀

    尊重原创:(口诀)转自http://lasombra.iteye.com/blog/991662 今天看到<java编程思想>中的运算符优先级助记口诀,不过"Ulcer Addi ...

  8. JavaScript:九种弹出对话框

    [1.最基本的js弹出对话框窗口代码] 这是最基本的js弹出对话框,其实代码就几句非常简单: <script LANGUAGE="javascript"> <!- ...

  9. cronolog日志切割

    1. 下载安装 cronolog,它的主页 http://cronolog.org . 下载的是源码,安装过程就是 ./configure, make, make install,最后一步可直接把 s ...

  10. Understanding the RelationshipType Enumeration [AX 2012]

    Understanding the RelationshipType Enumeration [AX 2012] 3 out of 3 rated this helpful - Rate this t ...