示例

HTML

<div class="fall"><div class="walls"><div class="wall"><div class="top"></div><div class="bottom"></div><div class="left"></div><div class="right"></div><div class="ceil"></div></div><div class="wall"><div class="top"></div><div class="bottom"></div><div class="left"></div><div class="right"></div><div class="ceil"></div></div><div class="wall"><div class="top"></div><div class="bottom"></div><div class="left"></div><div class="right"></div><div class="ceil"></div></div><div class="wall"><div class="top"></div><div class="bottom"></div><div class="left"></div><div class="right"></div><div class="ceil"></div></div><div class="wall"><div class="top"></div><div class="bottom"></div><div class="left"></div><div class="right"></div><div class="ceil"></div></div><div class="wall"><div class="top"></div><div class="bottom"></div><div class="left"></div><div class="right"></div><div class="ceil"></div></div><div class="wall"><div class="top"></div><div class="bottom"></div><div class="left"></div><div class="right"></div><div class="ceil"></div></div><div class="wall"><div class="top"></div><div class="bottom"></div><div class="left"></div><div class="right"></div><div class="ceil"></div></div><div class="wall"><div class="top"></div><div class="bottom"></div><div class="left"></div><div class="right"></div><div class="ceil"></div></div><div class="wall"><div class="top"></div><div class="bottom"></div><div class="left"></div><div class="right"></div><div class="ceil"></div></div></div><div class="ballArm"><div class="ball"></div></div>
</div>

CSS

*, *::before, *::after {padding: 0;margin: 0 auto;box-sizing: border-box;
}$size: 20px;
$speed: 15s;body {background-color: #111;color: #fff;min-height: 100vh;display: flex;justify-content: center;align-items: center;perspective: 800px;overflow: hidden;
}.fall {position: relative;transform-style: preserve-3d;animation: fallRotate $speed*2.8 infinite linear;@keyframes fallRotate {to { transform: rotateY(360deg); }}
}.wall {position: absolute;width: $size * 4;height: $size * 4;transform-style: preserve-3d;background-image: linear-gradient(#0007, #000c);animation: move $speed infinite linear;&:nth-child(odd) {left: $size * -0.5;transform: translate(-50%, 50%) rotateY(90deg) rotateX(45deg) translatez($size * -1) translateY($size * -11);}&:nth-child(even) {left: $size * 0.5;transform: translate(-50%, 50%) rotateY(-90deg) rotateX(45deg) translatez($size * -1) translateY($size * -11);}@for $i from 0 to 10 {&:nth-child(#{$i + 1}) {animation-delay: $speed / -10 * ($i + 1);background-color: hsla($i * 36, 75%, 75%, 1);}}bottom: $size * -10.5;@keyframes move {from { bottom: $size * -60.5; }to { bottom: $size * 40.5; }}& > div {position: absolute;background-color: inherit;}.ceil {width: $size * 4;height: $size * 4;background-image: linear-gradient(#fff7, #fff0);animation: wallCeil $speed infinite linear;animation-delay: inherit;overflow: hidden;&::after {content: '';position: absolute;width: 100%; height: 100%;background-image: radial-gradient(#000, #0000 50%);animation: shadow $speed infinite linear;animation-delay: inherit;@keyframes shadow {0%, 48%, 53%, 100% {opacity: 0;transform: translateY($size * 4) scale(2);}50% {                    opacity: 0.25;transform: translateY($size * 0.2) scale(0.5);}}}}.top {width: $size * 4;transform: rotateX(90deg);transform-origin: top;background-image: linear-gradient(#0007, #fff7);animation: wallHeight $speed infinite linear;animation-delay: inherit;}.bottom {bottom: 0;width: $size * 4;transform: rotateX(-90deg);transform-origin: bottom;background-image: linear-gradient(#fff0, #000c);animation: wallHeight $speed infinite linear;animation-delay: inherit;}.left {bottom: 0;height: $size * 4;transform: rotateY(-90deg);transform-origin: left;background-image: linear-gradient(to bottom left, #fff3, #000c);animation: wallWidth $speed infinite linear;animation-delay: inherit;}.right {bottom: 0; right: 0;height: $size * 4;transform: rotateY(90deg);transform-origin: right;background-image: linear-gradient(to bottom right, #fff3, #000c);animation: wallWidth $speed infinite linear;animation-delay: inherit;}@keyframes wallCeil {0%, 49.75%, 55%, 100% { transform: translateZ($size * 1); }50% { transform: translateZ($size * 0.5); }}@keyframes wallHeight {0%, 49.75%, 55%, 100% { height: $size * 1; }50% { height: $size * 0.5; }}@keyframes wallWidth {0%, 49.75%, 55%, 100% { width: $size * 1; }50% { width: $size * 0.5; }}}.ballArm {position: absolute;bottom: $size * -10.5;width: $size;height: $size * 12;transform-origin: bottom;transform-style: preserve-3d;animation: armRotate $speed/10 infinite linear alternate;@keyframes armRotate {from { transform: translateX(-50%) rotate(-45deg); }to { transform: translateX(-50%) rotate(45deg); }}
}.ball {position: absolute;width: $size;height: $size;border-radius: 10%;transform-style: preserve-3d;animation: ballRotateZ $speed/10 infinite linear alternate;@keyframes ballRotateZ {from { transform: rotate(45deg); }to { transform: rotate(-45deg); }}&::after {content: '';position: absolute;width: $size;height: $size;background-image: radial-gradient(circle at top, #fff, #222);border-radius: 50%;animation: ballRotateY $speed*2.8 infinite linear;@keyframes ballRotateY {from { transform: rotateY(0deg); }to { transform: rotateY(-360deg); }}}
}

坠落弹球（Bouncing off the walls）相关推荐

纯js制作的弹球游戏
纯js的弹球游戏,撞壁自动返回,按钮放置暂停移动,移开开始移动 1  5 <!DOCTYP ...
弹球游戏python代码含记分模式_python编写弹球游戏的实现代码
用Blender制作一个兵乓球小游戏,要编写Python代码需要安装pygame 包没有面对困难的勇气,也就没有享受快乐的权利. python 怎么写双人弹球游戏最难过的事不是别人又得罪你了,而是你自 ...
霸气侧漏HTML5--之--canvas(1) api + 弹球例子
html5也许最有吸引力的新功能是canvas 漆.基本可以足够强大后,以取代flash页面的效果.下面来介绍canvas要使用: HTML5 Canvas的基本图形都是以路径为基础的.通常使用Con ...
python小游戏编程实例-Python实现的弹球小游戏示例
本文实例讲述了Python实现的弹球小游戏.分享给大家供大家参考,具体如下: 弹球 1. Ball 类 draw负责移动Ball 碰撞检测,反弹,Ball检测Paddle 2.Paddle类 draw ...
codeforces D MUH and Cube Walls(kmp)
先分别计算a,b数组的差分,得到两个数组,文本数组和模式数组,然后使用kmp统计模式数组在文本数组出现个数.对于b数组长度为1时,结果就是数组a的长度. 代码参考: OJ/codeforces/471 ...
题目1159：坠落的蚂蚁
题目描述: 一根长度为1米的木棒上有若干只蚂蚁在爬动.它们的速度为每秒一厘米或静止不动,方向只有两种,向左或者向右.如果两只蚂蚁碰头,则它们立即交换速度并继续爬动.三只蚂蚁碰头,则两边的蚂蚁交换速度, ...
2018区块链生存指南：要做飞行的猪、摔不坏的弹球、未来的种子
我们要有落地的场景,要有实实在在的应用,才有起飞的能力. 飞猪.弹球.种子分别代表了:实力.心态和成长性. 这三点在2018年,对于区块链的从业者来说,非常重要. 01 | 御风而行 or 风停重跌 ...
CSS3实现带阴影的弹球
实现div上下跳动时,底部阴影随着变化 <!DOCTYPE html> <html lang="en"> <head><meta char ...
python绘制球体_趣学Python之弹球游戏第一阶段--画个红球
最近在看一本叫<趣学Python--教孩子学编程>的书,非常适合我这种从来不写代码的人. 今天开始照着书本,学写人生第一个游戏:弹球. 目前这些代码只是个开始,仅仅有一个窗口和一个红球罢了 ...
男子商场抱起小女孩致其坠落警方：嫌疑人被刑拘
中新网客户端1月27日电近日,"广东某商场一男子和小女孩坠落"消息引发关注.佛山市公安局南海分局官方微博26日发布两则通报称,经初步调查,嫌疑人自称因经济压力大产生轻生念头,遂抱 ...

坠落弹球（Bouncing off the walls）

坠落弹球（Bouncing off the walls）

示例

HTML

CSS

坠落弹球（Bouncing off the walls）相关推荐

最新文章

热门文章