示例代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>CSS3 碰撞反弹动画无限运动</title>

     <style type="text/css">

     .container {

         width: 600px;

         height: 400px;

         border: 1px solid #333;

         position: relative;

     }

     .ball {

         position: absolute;

         left: 0;

         top: 0;

         width: 20px;

         height: 20px;

         border-radius: 20px;

         border: 1px solid #999;

         /* alternate：动画先正常运行再反方向运行，并持续交替运行 */

         animation: horizontal 10s linear 0s infinite alternate, vertical 6s linear 0s infinite alternate;

     }

     @keyframes horizontal {

         0% {

             left: 0;

         }

         100% {

             /* 运动最大距离为盒子长度减去球的长度 */

             left: calc(600px - 20px);

         }

     }

     @keyframes vertical {

         0% {

             top: 0;

         }

         100% {

             /* 运动最大距离为盒子高度减去球的高度 */

             top: calc(400px - 20px);

         }

     }

     </style>

 </head>

 <body>

 <div class="container">

     <div class="ball"></div>

 </div>

 </body>

 </html>

该效果可以通过JS随机设置运动时间，衍生出无数小球随机碰撞动画，也能用于雪花飞舞效果。

巧妙的使用css3的animate属性，可以实现各种炫丽效果。

CSS3之碰撞反弹动画无限运动的更多相关文章

  1. 原生js实现一个DIV的碰撞反弹运动，并且添加重力效果

    继上一篇... 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果 关键在于边界检测,以及乘以的系数问题,实现代码并不难,如下: <!DOCTYPE html> <html la ...

  2. 原生js实现一个DIV的碰撞反弹运动

     原生js实现一个DIV的碰撞反弹运动: 关键在于DIV的边界检测,进而改变运动方向,即可实现碰撞反弹效果. <!DOCTYPE html> <html lang="en& ...

  3. CSS3中的3D动画实现(钟摆、魔方)--实现代码

    CSS3中的3D动画实现(钟摆.魔方) transition-property 过渡动画属性  all|[attr] transition-duration 过渡时间 transition-delay ...

  4. css3中的制作动画小总结

    系列教程 CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transform 在CSS3中transform主要包括以下几种:旋转rotate. ...

  5. css3中变形与动画（三）

    transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...

  6. 基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效

    本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: < ...

  7. 解决Unity中模型部件的MeshCollider不随动画一起运动的问题

    Unity的3d游戏开发中,经常遇到需要将模型的某一部分(比如武器),单独做碰撞处理的情况. 导入模型后,给武器部分添加MeshCollider,MeshCollider的Mesh通常包含在模型里,如 ...

  8. 纯CSS3实现打火机火焰动画

    HTML5已经越来越流行起来了,尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍.今天给大家介绍10款效果惊艳的HTML5应用,方便大家学习,也将应 ...

  9. 【CSS3】3D立方体动画

    关于CSS3的3D立方体动画 知识点: 1.每个元素有独立的坐标系 2.坐标系随当前元素的改变而发生改变 3.立方体由静态transform参数构成 4.通过给容器添加动画使立方体运动 效果图: &l ...

随机推荐

  1. java之抽象类介绍

    什么抽象方法和抽象类 抽象方法 在类里面定义的没有方法体且用关键字“abstract”来修饰的方法就是抽象方法,所谓的没有方法体指的是在方法声明的时候没有大括号以及其中的内容,而是直接在声明时在方法名 ...

  2. 部署基于maven的springboot项目到linux服务器上

    目录 本地运行调试 导入数据库: 导入项目: 将项目打包: linux准备: 运行项目: 脚本运行 本地运行调试 导入数据库: 导入数据库的时候使用的是sqlYog导入navcat的脚本:由于两个应用 ...

  3. 2019 新浪 java面试笔试题 （含面试题解析）

      本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.新浪等公司offer,岗位是Java后端开发,因为发展原因最终选择去了新浪,入职一年时间了,也成为了面试官,之 ...

  4. Java之路---Day08

    2019-10-22-22:28:39 目录 1.Static静态类 2.Static内存图 3.Static静态代码块 4.Arrays类 5.Math类 Static静态类 一旦使用static修 ...

  5. python入门基础 02

    目录 1.while 2.字符串格式化 3.运算符 4.编码初始 总结 1.while # while -- 关键字 (死循环) # # if 条件: # 结果 # # while 条件: # 循环体 ...

  6. pandas-10 pd.pivot_table()透视表功能

    pandas-10 pd.pivot_table()透视表功能 和excel一样,pandas也有一个透视表的功能,具体demo如下: import numpy as np import pandas ...

  7. sublime 快速编写代码技巧

    在sublime上装了Emmet插件后,我们就可以利用以下技巧快速编写代码 1.自动生成html头文件 html:5 或!:用于HTML5文档类型 html:xt:用于XHTML过渡文档类型 html ...

  8. mysql的yearweek 和 weekofyear函数

    1.MySQL 的 YEARWEEK 是获取年份和周数的一个函数,函数形式为 YEARWEEK(date[,mode]) 例如 2010-3-14 ,礼拜天 SELECT YEARWEEK('2010 ...

  9. 二十六、聊聊mysql如何实现分布式锁

    分布式锁的功能 分布式锁使用者位于不同的机器中,锁获取成功之后,才可以对共享资源进行操作 锁具有重入的功能:即一个使用者可以多次获取某个锁 获取锁有超时的功能:即在指定的时间内去尝试获取锁,超过了超时 ...

  10. Flask入门很轻松 （二）

    转载请在文章开头附上原文链接地址:https://www.cnblogs.com/Sunzz/p/10959454.html 请求钩子 在客户端和服务器交互的过程中,有些准备工作或扫尾工作需要处理,比 ...