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 ...
随机推荐
- linux安装mysql后报错启动不了Starting MySQL. ERROR! The server quit without updating PID file (/var/lib/mysql/localhost.localdomain.pid).
今天安装完Mysql后,开启发生了错误: 2.打开错误信息文件,查看错误原因是:Plugin 'FEDERATED' is disabled. /usr/sbin/mysqld: Table 'mys ...
- java枚举enum总结大全
1.注意点 (1)枚举中的构造方法必须是private的. (2)枚举中可以定义抽象方法和一般方法,但枚举对象必须实现所有抽象方法. (3)枚举对象必须放在第一行. package classTwo0 ...
- mysql数据库的安装和连接测试并给root用户赋密码
一.mysql数据库的安装 Windows下MySQL的配置 以 MySQL 5.1 免安装版为例, 下载 mysql-noinstall-5.1.69-win32.zip ( 官方下载页: http ...
- (转)微服务_.NET Core Consul服务发现与治理
原文地址:https://www.cnblogs.com/waynechan/p/9354909.html Consul官网:https://www.consul.io Consul下载地址:http ...
- Appscan漏洞之已解密的登录请求
本次针对 Appscan漏洞 已解密的登录请求 进行总结,如下: 1.1.攻击原理 未加密的敏感信息(如登录凭证,用户名.密码.电子邮件地址.社会安全号等)发送到服务器时,任何以明文传给服务器的信息都 ...
- Appscan漏洞之会话标识未更新
本次针对 Appscan漏洞 会话标识未更新 进行总结,如下: 1. 会话标识未更新 1.1.攻击原理 在认证用户或者以其他方式建立新用户会话时,如果不使任何现有会话标识失效,攻击者就有机会窃取已认证 ...
- Python illustrating Downhill simplex method for minimizing the user-supplied scalar function的代码
学习过程,把代码过程较好的代码段做个记录,如下的代码段是关于Python illustrating Downhill simplex method for minimizing the user-su ...
- 修改Nodejs内置的npm默认配置路径方法
Nodejs 内置的npm默认会把模块安装在c盘的用户AppData目录下(吐槽一下:不明白为啥现在的软件都喜欢把资源装在这里) C盘这么小,肯定是不行的,下面一步步修改到D盘 1.打开cmd命令行, ...
- k8s之pod与Pod控制器
k8s中最为重要的基础资源,pod,pod controller,service pod controller类型有多种需要向控制器赋值之后使用: kubectl命令使用 kubectk get no ...
- golang中逗号ok模式_转
,ok,第一个参数是一个值或者nil,第二个参数是true/false或者一个错误error.在一个需要赋值的if条件语句中,使用这种模式去检测第二个参数值会让代码显得优雅简洁.这种模式在go语言编码 ...