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

<!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. springmvc处理ajax请求

    1.controller将数据封装成json格式返回页面 @RequestMapping("/dataList") public void datalist(CsoftCunsto ...

  2. 【py网页】urllib模块，urlopen

    Python urllib 库提供了一个从指定的 URL 地址获取网页数据,然后对其进行分析处理,获取想要的数据. 下面是在 Python Shell 里的 urllib 的使用情况: 01 Pyth ...

  3. SQL Server数据库的三种恢复模式：简单恢复模式、完整恢复模式和大容量日志恢复模式（转载）

    SQL Server数据库有三种恢复模式:简单恢复模式.完整恢复模式和大容量日志恢复模式: 1.Simple 简单恢复模式, Simple模式的旧称叫”Checkpoint with truncate ...

  4. OpenStack 的windows镜像的开启办法

    创建虚拟机 使用我们的管理平台的windows主机创建流程,创建一台主机.在vnc中能看到主机进入到系统中 需要点击按钮sendctrl进入输入密码阶段. 输入我们的镜像的默认密码:5@mdjkw 打 ...

  5. 验证（Javascript和正则表达式）

    昨天写了验证(C#和正则表达式),今天又写了个js版的验证.现在贴出来,为了方便自己查阅,同时也希望能给需要的人帮助和一些启发.由于今天才开始接触js,所以可能会有一些错漏,希望大家能批评指正. va ...

  6. Notepad++编辑Pyhton文件的自动缩进的问题（图文）

    转自:http://www.xuebuyuan.com/1102224.html 这个问题一直困扰我很久,Python对缩进很敏感,一般建议缩进用空格,而 Notepad++的自动缩进是用的TAB,g ...

  7. Maven invalid task...

    执行maven构建项目报错: Invalid task '‐DgroupId=*': you must specify a valid lifecycle phase, or a goal in th ...

  8. [BIM]BIM中IFD介绍

    第三大支柱IFD - 确定交换的信息和你要的信息是同一个东西 IFD的全称是International Framework for Dictionaries,中文可以叫“国际字典框架”,和前两者IFC ...

  9. quick lua 使用spine骨骼动画

    看下下面两个文件 <spine/SkeletonRenderer.h><spine/SkeletonAnimation.h> 1.lua中创建方法: sp.SkeletonAn ...

  10. Xcode中设置按钮在十分钟之内禁用

    btn.enabled=NO;` NSTimer * notificationTimer = [NSTimer scheduledTimerWithTimeInterval:10*60.0 targe ...