效果预览

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

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

可交互视频教程

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

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

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

源代码下载

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

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

代码解读

定义 dom,容器中包含左拍、小球和右拍:

<div class="court">
<div class="left-paddle"></div>
<div class="ball"></div>
<div class="right-paddle"></div>
</div>

居中显示:

body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(silver, dimgray);
}

调整盒模型:

* {
box-sizing: border-box;
}

画出球案:

.court {
width: 20em;
height: 20em;
color: white;
border: 1em solid currentColor;
}

画出左拍:

.court {
position: relative;
} .left-paddle
width: 1em;
height: calc(50% - 1em);
background-color: currentColor;
position: absolute;
top: 1em;
left: 1em;
}

让左拍动起来:

.left-paddle {
animation: left-moving 1s linear infinite alternate;
} @keyframes left-moving {
to {
transform: translateY(100%);
}
}

类似地,画出右拍:

.right-paddle
width: 1em;
height: calc(50% - 1em);
background-color: currentColor;
position: absolute;
top: 1em;
left: 1em;
bottom: 1em;
right: 1em;
}

类似地,让右拍动起来:

.right-paddle {
animation: right-moving 1s linear infinite alternate;
} @keyframes right-moving {
to {
transform: translateY(-100%);
}
}

画出小球:

.ball {
width: 100%;
height: 1em;
border-left: 1em solid currentColor;
position: absolute;
left: 2em;
top: calc(50% - 1.5em);
}

让小球动起来:

.ball {
animation: bounce 1s linear infinite alternate;
} @keyframes bounce {
to {
left: calc(100% - 3em);
}
}

最后,重构一下左右拍的代码,合并共有属性:

.left-paddle,
.right-paddle {
width: 1em;
height: calc(50% - 1em);
background-color: currentColor;
position: absolute;
animation: 1s linear infinite alternate;
} .left-paddle {
top: 1em;
left: 1em;
animation-name: left-moving;
} .right-paddle {
bottom: 1em;
right: 1em;
animation-name: right-moving;
}

大功告成!

前端每日实战:31# 视频演示如何利用 CSS 的动画原理,创作一个乒乓球对打动画的更多相关文章

  1. 如何利用 CSS 的动画原理,创作一个乒乓球对打动画

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

  2. 31.用 CSS 的动画原理,创作一个乒乓球对打动画

    原文地址:https://segmentfault.com/a/1190000015002553 感想:纯属动画 HTML代码: <div class="court"> ...

  3. 前端每日实战:36# 视频演示如何利用 CSS 动画原理,在页面上表现日蚀现象

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

  4. 前端每日实战:141# 视频演示如何用 CSS 的 Grid 布局创作一枚小狗邮票

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

  5. 前端每日实战:142# 视频演示如何用 CSS 的 Grid 布局创作一枚小鸡邮票

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

  6. 前端每日实战:116# 视频演示如何用 CSS 和原生 JS 开发一个监控网络连接状态的页面

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

  7. 前端每日实战:144# 视频演示如何用 D3 和 GSAP 创作一个集体舞动画

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

  8. 前端每日实战:125# 视频演示如何用纯 CSS 创作一个失落的人独自行走的动画

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

  9. 前端每日实战:134# 视频演示如何用 CSS 和 GSAP 创作一个树枝发芽的 loader

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

随机推荐

  1. RHEL安装神器EPEL

    什么是EPEL? EPEL的全称叫 Extra Packages for Enterprise Linux .EPEL是由 Fedora 社区打造,为 RHEL 及衍生发行版如 CentOS.Scie ...

  2. 《走出软件作坊》//TODO

    目录 简介 结束语 简介 作者吕建伟(@阿朱),研发管理专家,原京东技术学院院长,中国互联网技术联盟发起人,历任首席架构师.技术总监以及CTO等职位.目前已接受用友集团董事长王文京邀请,加入用友组建研 ...

  3. css后续篇

    5.盒模型 在css中,box model这一术语是用来设计和布局时使用的,在网页中显示一些方方正正的盒子,这种盒子就叫盒模型 盒模型有两种: 标准模型和IE模型(了解) 盒模型属性 width : ...

  4. Android drawable 加载效果

    <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:ones ...

  5. java replaceall 用法:处理特殊字符

    public class TryDotRegEx { public static void main(String[] args) { // TODO Auto-generated method st ...

  6. Ubuntu navicat 连接mysql:access denied for user 'root'@'localhost'

    真是醉了,Ubuntu装了navicat后,准备在桌面建立图标不成,结果直接打开后连接mysql都不行,真坑,奈何远程连接就成,这就尬了,今天终于解决了 问题 我也百度了好几个方案,奈何解决不了,最后 ...

  7. 收集到的技术相关网址——python

    1.Python中常用数据库访问接口模块 专用数据库连接模块——MySQL.SQLite.PostgreSQL.Oracle.IBM DB2.Infomix.Interbase.Sybase.SQL ...

  8. 用数组实现栈(C++)

    #include <iostream> //栈的数组实现 using namespace std; #define MAXSIZE 10; template<class T> ...

  9. python开发之Pandas

    正确的对DataFrame reverse运算 data.reindex(index=data.index[::-]) or simply: data.iloc[::-] will reverse y ...

  10. mysql中not exists的简单理解

    http://www.cnblogs.com/glory-jzx/archive/2012/07/19/2599215.html http://sunxiaqw.blog.163.com/blog/s ...