前端每日实战:31# 视频演示如何利用 CSS 的动画原理,创作一个乒乓球对打动画
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
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 的动画原理,创作一个乒乓球对打动画的更多相关文章
- 如何利用 CSS 的动画原理,创作一个乒乓球对打动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/rvgLzK 可交互视频教 ...
- 31.用 CSS 的动画原理,创作一个乒乓球对打动画
原文地址:https://segmentfault.com/a/1190000015002553 感想:纯属动画 HTML代码: <div class="court"> ...
- 前端每日实战:36# 视频演示如何利用 CSS 动画原理,在页面上表现日蚀现象
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OELvrK 可交互视频教程 此视频 ...
- 前端每日实战:141# 视频演示如何用 CSS 的 Grid 布局创作一枚小狗邮票
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/BOeEYV 可交互视频 此视频是可 ...
- 前端每日实战:142# 视频演示如何用 CSS 的 Grid 布局创作一枚小鸡邮票
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mGZbmQ 可交互视频 此视频是可 ...
- 前端每日实战:116# 视频演示如何用 CSS 和原生 JS 开发一个监控网络连接状态的页面
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oPjWvw 可交互视频 此视频是可 ...
- 前端每日实战:144# 视频演示如何用 D3 和 GSAP 创作一个集体舞动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gdVObN 可交互视频 此视频是可 ...
- 前端每日实战:125# 视频演示如何用纯 CSS 创作一个失落的人独自行走的动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MqpOdR/ 可交互视频 此视频是 ...
- 前端每日实战:134# 视频演示如何用 CSS 和 GSAP 创作一个树枝发芽的 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/LJmpXZ 可交互视频 此视频是可 ...
随机推荐
- 吴裕雄--天生自然python机器学习:Logistic回归
假设现在有一些数据点,我们用 一条直线对这些点进行拟合(该线称为最佳拟合直线),这个拟合过程就称作回归.利用Logistic回归进行分类的主要思想是:根据现有数据对分类边界线建立回归公式,以此进行分类 ...
- window 彻底删除mysql
1. 运行regedit.exe,找到HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Services\MySQL 文件夹,将其删除: 2. 找到HKEY_LOCAL_ ...
- FireWall2
配置防火墙步骤: 1.给接口配置ip,开 service-manage 服务 2.把接口画在zone区域 3.配置策略 4.服务器一定要开启服务 1. interface GigabitEtherne ...
- KVC解析
• 阅读 valueForKey (总体规划,先找相关方法,再找相关变量) 1.先是找相关方法,如果方法找不到 2.那么去判断 1 2 3 + (BOOL)accessInstanceVariab ...
- Linux_更改主机名
老师上linux课截图必须改主机名字,每个人一个代号,所以就写篇这个咯 查看主机名 [root@localhost.localdomain Desktop]# hostname localhost.l ...
- spring boot原理分析启动依赖中parent帮我们干了什么
主要内容: 1:分析spring-boot-starter-parent 这个依赖 通过前面几篇文章的学习,我们感受到了spring boot的魅力.最明显的感觉就是pom.xml文件.代码少了很多. ...
- vue项目实例-常用标签
感谢:https://www.jianshu.com/p/5d9b341d650f 总结: 1.<router-link to=''>主要实现跳转链接功能,属性to='/'即是跳转到pat ...
- SpringMVC学习笔记二:参数接受
该项目用来介绍SpringMVC对参数接受的方法: 项目目录树:在前一个项目上修改添加 新添加了Student类和Group类,用来测试整体参数接受 Student.java package com. ...
- Nginx的四层和七层代理
理论部分: 所谓四层负载均衡,也就是主要通过报文中的目标地址和端口,再加上负载均衡设备设置的服务器选择方式,决定最终选择的内部服务器,它一般走的是tcp,udp协议 所谓七层负载均衡,也称为“内 ...
- c++ 如何清除上一次的输出?
#include <iostream.h>#include <stdlib.h>int main(){cout<<"PBY PBY PBY PBY PBY ...