示例代码如下：

 <!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. Golang slice和map的申明和初始化

    1 前言 仅供记录使用. 2 代码 /** * @Author: FB * @Description: * @File: SliceMapInit.go * @Version: 1.0.0 * @Da ...

  2. That IP address can't be assigned to.的问题

    That IP address can't be assigned to. 烦恼了很久,现在知道了,解决的办法如下 首先确定端口号是不是开放,阿里云的直接在控制台修改 其次 看看 你的地址是不是输入错 ...

  3. IntelliJ idea鼠标移动到类上显示文档document（javadoc）内容

    IntelliJ idea鼠标移动到类上显示文档document(javadoc)内容 Step 1:设置鼠标移动到类上自动显示Javadoc文档 step2:为jdk下载javadoc Step3: ...

  4. js 时间常用处理方法

    众所周知,JavaScript核心包含Data()构造函数,用来创建表示时间和日期的对象. 今天主要跟大家梳理一下,常用的时间.日期处理方法,方便大家使用和理解 格式化时间 老生常谈,大概会这么写 1 ...

  5. iOS OpenCV资料收集

    OpenCV iOS Title: OpenCV iOS Hello Compatibility: > OpenCV 2.4.3 Author: Charu Hans You will lear ...

  6. SAP Hybris Commerce启用customer coupon的前提条件

    今天在工作中,我发现一个问题:在SAP帮助文档里,backoffice coupon 维护界面有个 Customer Assignment的区域: 而我工作的Hybris服务器上的backoffice ...

  7. leetcode 学习心得 (3)

    源代码地址:https://github.com/hopebo/hopelee 语言:C++ 517. Super Washing Machines You have n super washing ...

  8. 05-jQuery介绍

    本篇主要介绍jQuery的加载.jquery选择器.jquery的样式操作.jQuery的事件.jquery动画等相关知识. 一.jQuery介绍 jQuery是目前使用最广泛的javascript函 ...

  9. MySQL/MariaDB数据库的并发控制

    MySQL/MariaDB数据库的并发控制 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.并发控制概述 1>.什么是并发控制 MySQL是一个服务器级别的数据库,它通常 ...

  10. Tomcat+Nginx+Memcached综合案例

    Tomcat+Nginx+Memcached综合案例 说明 通过Nginx解析静态页面并将动态负载均衡调度给后面的多个Tomcat,Tomcat解析java动态程序. 由于http是无状态的协议,你访 ...