CSS3之碰撞反弹动画无限运动
示例代码如下：
<!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之碰撞反弹动画无限运动的更多相关文章
- 原生js实现一个DIV的碰撞反弹运动，并且添加重力效果
继上一篇... 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果 关键在于边界检测,以及乘以的系数问题,实现代码并不难,如下: <!DOCTYPE html> <html la ...
- 原生js实现一个DIV的碰撞反弹运动
原生js实现一个DIV的碰撞反弹运动: 关键在于DIV的边界检测,进而改变运动方向,即可实现碰撞反弹效果. <!DOCTYPE html> <html lang="en& ...
- CSS3中的3D动画实现(钟摆、魔方)--实现代码
CSS3中的3D动画实现(钟摆.魔方) transition-property 过渡动画属性 all|[attr] transition-duration 过渡时间 transition-delay ...
- css3中的制作动画小总结
系列教程 CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transform 在CSS3中transform主要包括以下几种:旋转rotate. ...
- css3中变形与动画（三）
transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...
- 基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效
本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: < ...
- 解决Unity中模型部件的MeshCollider不随动画一起运动的问题
Unity的3d游戏开发中,经常遇到需要将模型的某一部分(比如武器),单独做碰撞处理的情况. 导入模型后,给武器部分添加MeshCollider,MeshCollider的Mesh通常包含在模型里,如 ...
- 纯CSS3实现打火机火焰动画
HTML5已经越来越流行起来了,尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍.今天给大家介绍10款效果惊艳的HTML5应用,方便大家学习,也将应 ...
- 【CSS3】3D立方体动画
关于CSS3的3D立方体动画 知识点: 1.每个元素有独立的坐标系 2.坐标系随当前元素的改变而发生改变 3.立方体由静态transform参数构成 4.通过给容器添加动画使立方体运动 效果图: &l ...
随机推荐
- 移动端开发之响应式开发和bootstrap基础
响应式开发 (就是利用媒体查询针对不同宽度的设备进行布局和样式的设置,从而设配不同设备的目的) 响应式布局容器响应式需要一个父级作为布局容器,来配合子级元素来实现变化效果 原理:不同屏幕下,通过媒体查 ...
- Oracle解决锁表语句与批量生成解锁语句
--以下几个为相关表SELECT * FROM v$lock;SELECT * FROM v$sqlarea;SELECT * FROM v$session;SELECT * FROM v$proce ...
- Ambari调整日志级别：How to enable debug logging in Ambari Server and Ambari Agent ?
PURPOSE When troubleshooting Ambari issues, it may be necessary to enable debug logging in the Ambar ...
- pyhon opencv mojave 摄像头报错
https://blog.csdn.net/renzibei/article/details/82998933 参考了上面博主的例子,才明白. Mac macOS 10.14 Mojave Xcode ...
- Python进阶(十六)----面向对象之~封装,多态,鸭子模型,super原理(单继承原理,多继承原理)
Python进阶(十六)----面向对象之~封装,多态,鸭子模型,super原理(单继承原理,多继承原理) 一丶封装 , 多态 封装: 将一些东西封装到一个地方,你还可以取出来( ...
- springCloud学习笔记2(服务发现)
本篇代码存放于:https://github.com/FleyX/demo-project/tree/master/springcloud/spring-cloud%E6%9C%8D%E5%8A%A1 ...
- js预编译环节 变量声明提升 函数声明整体提升
预编译四部曲 1.创建AO对象 2.找形参和变量声明,将变量和形参名作为AO属性名,值为undefined 3.将实参和形参统一 4.在函数体里面找函数声明,值赋予函数体 function fn(a) ...
- Spring+Velocity+Mybatis入门（step by step）
一.开发工具 开发过程中使用的操作系统是OS X,关于软件安装的问题请大家移步高效的Mac环境设置. 本文是我对自己学习过程的一个回顾,应该还有不少问题待改进,例如目录的设置.编码习惯和配置文件的处理 ...
- java系统化基础-day01-基础语法知识
1.学前必看 该课程将系统化的讲解java基础,但是该课程并不适合零基础的学员,因为在整个java学习体系中我们是按照实际生产设计, 主体思路是以完成某个业务为主线,用到什么技术就学什么技术,即带着问 ...
- package-lock.json的作用（转载）
package-lock.json 文件的作用 来源 :https://www.cnblogs.com/kugeliu/p/9153775.html npm5之后安装文件之后会多出一个package ...