效果预览

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

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 个元素:

<div class="box"></div>

居中显示:

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;
}

大功告成!

前端每日实战:85# 视频演示如何用纯 CSS 创作一个小球反弹的动画的更多相关文章

  1. 前端每日实战:52# 视频演示如何用纯 CSS 创作一个小球绕着圆环盘旋的动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gKxyWo 可交互视频 此视频是可 ...

  2. 如何用纯 CSS 创作一个小球反弹的动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OwWROO 可交互视频 ...

  3. 前端每日实战:23# 视频演示如何用纯 CSS 创作一个菜单反色填充特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 此视频是 ...

  4. 前端每日实战:46# 视频演示如何用纯 CSS 创作一个在容器中反弹的小球

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jKVbyE 可交互视频教程 此视频 ...

  5. 前端每日实战:145# 视频演示如何用纯 CSS 创作一个电源开关控件

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/PdMyJd 可交互视频 此视频是可 ...

  6. 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...

  7. 前端每日实战:158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pxLbjv 可交互视频 此视频是可 ...

  8. 前端每日实战:122# 视频演示如何用纯 CSS 创作一个苹果系统的相册图标

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/zJKwbO 可交互视频 此视频是可 ...

  9. 前端每日实战:156# 视频演示如何用纯 CSS 创作一个飞机舷窗风格的 toggle 控件

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jeaOrw 可交互视频 此视频是可 ...

随机推荐

  1. 吴裕雄--天生自然C语言开发:运算符

    #include <stdio.h> int main() { ; ; int c ; c = a + b; printf("Line 1 - c 的值是 %d\n", ...

  2. E - Apple Tree(树状数组+DFS序)

    There is an apple tree outside of kaka's house. Every autumn, a lot of apples will grow in the tree. ...

  3. D. Salary Changing(找中位数)

    题:https://codeforces.com/contest/1251/problem/D 题意:给你n个单位需要满足达到的区间,再给个s,s是要分配给n的单位的量,当然∑l<=s,问经过分 ...

  4. 高级I/O

    1.阻塞问题的几种解决模型 1.1 非阻塞模型:类似于死循环,需要适当加休眠,防止cpu占用太高:效率较低 1.2 线程异步:效率最高的一种解决方案 1.3 I/O多路转接与复用  select(低) ...

  5. 算法之匹配:KMP

    public static int getIndexOf(String str1, String str2) { if (str1 == null || str2 == null || str1.le ...

  6. REMODE解析

    版权声明:本文为博主原创文章,未经博主允许不得转载. 纯视觉的三维重建(不考虑用结构光的那一类)常用的有两大类方法:一类是SfM,缺点是计算量比较大,做不到实时运行:另一类是KinectFusion为 ...

  7. deepin 更改默认网卡名称为eth和wlan

    deepin 更改默认的网卡名称为eth和无线网卡名wlan vim /etc/default/grub 在 GRUB_CMDLINE_LINUX_DEFAULT="sqlash quiet ...

  8. OpenCV 图像平滑处理

    #include "opencv2/imgproc/imgproc.hpp" #include "opencv2/highgui/highgui.hpp" us ...

  9. Protein interaction|insight QUANTA|SYBYL COMPOSER|MODELLER|SWISS_MODEL|WHAT IF|3D-JIGSAW|CPH-ModelGPCRs|Membrane protein|

    生命组学 蛋白质之间的互作可以有以下应用: Eg:改变蛋白质基因,从而组改变结构,削弱蛋白质之间的相互作用. Eg:数据模拟出蛋白质的靶点,即结合腔,将此数据存入结合化合物的dataset,用于制药 ...

  10. win10安装MAYA失败,怎么强力卸载删除注册表并重新安装

    一些搞设计的朋友在win10系统下安装MAYA失败或提示已安装,也有时候想重新安装MAYA的时候会出现本电脑windows系统已安装MAYA,你要是不留意直接安装MAYA,只会安装MAYA的附件或者直 ...