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 ...
随机推荐
- ubuntu系统下防火墙简单使用
apt-get install ufw 安装防火墙sudo ufw enable|disable|status 开启/关闭/查看防火墙状态sudo ufw allow 22/ ...
- JAVA-AbstractQueuedSynchronizer-AQS
import lombok.extern.slf4j.Slf4j; import java.util.concurrent.CountDownLatch; import java.util.concu ...
- WPF 的命令的自动刷新时机——当你 CanExecute 会返回 true 但命令依旧不可用时可能是这些原因
原文:WPF 的命令的自动刷新时机--当你 CanExecute 会返回 true 但命令依旧不可用时可能是这些原因 在 WPF 中,你可以使用 Command="{Binding Walt ...
- C#高效编程
一. 使用readonly而不是const const是编译时常量,readonly是运行时常量.如果引用了一个库中的const常量,则在更新了程序集,但应用程序没有重新编译时,运行结果会出错 如程序 ...
- 使用@Async注解创建多线程，自定义线程池
说明 使用@Async注解创建多线程非常的方便,还可以通过配置,实现线程池.比直接使用线程池简单太多.而且在使用上跟普通方法没什么区别,加上个@Async注解即可实现异步调用. 用法 AsyncTas ...
- Content Security Policy (CSP)内容安全策略
CSP简介 Content Security Policy(CSP),内容(网页)安全策略,为了缓解潜在的跨站脚本问题(XSS攻击),浏览器的扩展程序系统引入了内容安全策略(CSP)这个概念. CSP ...
- 拓展 - Webrtc 的回声抵消(aec、aecm)算法简介
webrtc 的回声抵消(aec.aecm)算法简介 原文链接:丢失.不好意思 webrtc 的回声抵消(aec.aecm)算法主要包括以下几个重要模块:1.回声时延估计 2.NLMS( ...
- vue 数据更新问题
在uni-app构建选项卡时,方法中改变的数组数据 无法更新v-if中的布尔值 在函数中打印出来是修改成功了,但在页面中并没有进行响应 布局如下: <swiper :current=" ...
- js正则表达式(七)
一.正则表达式对象的创建方法一:使用构造函数的形式: var pattern = new RegExp('正则表达式','修饰符'); var pattern = new RegExp('hello' ...
- 正则表达式修饰符 i、g、m、s、U、x、a、D、e 等。
正则表达式中常用的模式修正符有i.g.m.s.U.x.a.D.e 等. 它们之间可以组合搭配使用. i 不区分(ignore)大小写: 例如: /abc/i 可以匹配 abc.aBC.Abc g 全局 ...