用纯 CSS 创作一个小球反弹的动画

效果预览

在线演示

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。

https://codepen.io/comehope/pen/OwWROO

可交互视频

此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/cnKwKA3

源代码下载

本地下载

每日前端实战系列的全部源代码请从 github 下载：

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom，只有 1 个元素：

&lt;div class="box"&gt;&lt;/div&gt;

居中显示：

body {margin: 0;height: 100vh;display: flex;align-items: center;justify-content: center;background: linear-gradient(#666, #333);
}

定义容器尺寸：

.box {width: 30em;height: 20em;font-size: 10px;background-color: steelblue;border: 0.5em solid #222;
}

用伪元素画出小球：

.box {position: relative;
}.box::before {content: '';position: absolute;width: 2em;height: 2em;background-color: silver;border-radius: 50%;box-shadow: inset -0.3em -0.3em 0.5em rgba(0, 0, 0, 0.6);
}

定义沿 x 轴即横向移动的动画效果：

@keyframes moveX {from {left: 0;}to {left: calc(30em - 2em);}
}

定义沿 y 轴即纵向移动的动画效果：

@keyframes moveY {from {top: 0;}to {top: calc(20em - 2em);}
}

最后，把动画效果应用到小球上：

.box::before {animation: moveX 2s linear infinite alternate,moveY 2.5s linear infinite alternate;
}

大功告成！

原文地址：https://segmentfault.com/a/1190000015713438

用纯 CSS 创作一个小球反弹的动画相关推荐

如何用纯 CSS 创作一个小球上台阶的动画
如何用纯 CSS 创作一个小球上台阶的动画效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/come ...
如何用纯 CSS 创作一个小球上台阶的动画 1
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/PBGJwL 可交互视频 ...
39.纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效
39.纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效原文地址:https://segmentfault.com/a/1190000015126240 HTML code: <div cl ...
4. 纯 CSS 创作一个金属光泽 3D 按钮特效
4. 纯 CSS 创作一个金属光泽 3D 按钮特效原文地址:https://segmentfault.com/a/1190000014599280 HTML代码: <div class=&qu ...
7.纯 CSS 创作一个 3D 文字跑马灯特效
7.纯 CSS 创作一个 3D 文字跑马灯特效原文地址:https://segmentfault.com/a/1190000014663038 感想:简单的从右到左动画 HTML代码: <di ...
如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览在线演示按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程此视 ...
如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览在线演示按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程此视 ...
如何用纯 CSS 创作一个冒着热气的咖啡杯
效果预览在线演示按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/xjXxoz 可交互视频教程此视 ...
如何用纯 CSS 创作一个渐变色动画边框
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教 ...