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 ...
随机推荐
- ECharts折线图堆叠设置为不堆叠的方法
下图是ECharts折线图堆叠的官方源码,设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可. option = { title: { text: '折线图堆叠 ...
- modbus协议使用小记
下载了libmodbus库,交叉编译后运行,总是接收回复时不正确.原因不明. 由于使用到modbus的需求比较简单,所以选择直接拼出modbus的请求报文,然后用串口直接发送和接收的方式, 拼modb ...
- float与position间的区别
float与position间的区别: 个人理解为:脱离文档流不一定脱离文本流:但脱离文本流,则也脱离文档流.[如有更好的理解还望评论区一起探讨,共同学习进步]一.float 浮动(脱离文档流, ...
- Vue学习之npm常用命令及参数小结（十四）
NPM几个常用命令和参数的意思: npm install packagename 安装模块如不指定版本号 默认会安装最新的版本 npm install packagename 0.0.1 安装指定版本 ...
- Vue学习之Webpack基本使用小结（十三）
一.新建dist 文件夹: 二.新建src文件夹: 在其下面创建 css .js .images文件夹及 index.html.main.js(这是项目Js的主入口) 三.html中简单创建一个列表: ...
- honeydctl命令
# honeydctl Honeyd 1.5c Management Console Copyright (c) 2004 Niels Provos. All rights reserved. See ...
- php文字转语音
使用百度接口 https://ai.baidu.com/docs#/TTS-Online-PHP-SDK/top 使用PHP SDK开发骤如下: 1.在官方网站下载php SDK压缩包. 2.将下载的 ...
- GDI显示图像时设定窗口大小为图像大小
先前已经能基于GDI显示png图像,但是窗口大小和图像尺寸并不一致.注意到opencv中的imshow的窗口和图像尺寸一致,这里进行设置. 原理 CreateWindow阶段并不能确定窗口大小,但是在 ...
- restframework框架写api中的个人理解以及碰到的问题
1.明确处理对象,在restframework的处理过程当中,如果是针对model写视图的话,queryset是要待展示的对象集,serializer_class是对每一个对象的所要使用的处理方式. ...
- H3C 802.11网络的基本元素