前端每日实战:85# 视频演示如何用纯 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 个元素:
<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 创作一个小球反弹的动画的更多相关文章
- 前端每日实战:52# 视频演示如何用纯 CSS 创作一个小球绕着圆环盘旋的动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gKxyWo 可交互视频 此视频是可 ...
- 如何用纯 CSS 创作一个小球反弹的动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OwWROO 可交互视频 ...
- 前端每日实战:23# 视频演示如何用纯 CSS 创作一个菜单反色填充特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 此视频是 ...
- 前端每日实战:46# 视频演示如何用纯 CSS 创作一个在容器中反弹的小球
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jKVbyE 可交互视频教程 此视频 ...
- 前端每日实战:145# 视频演示如何用纯 CSS 创作一个电源开关控件
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/PdMyJd 可交互视频 此视频是可 ...
- 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...
- 前端每日实战:158# 视频演示如何用纯 CSS 创作一个雨伞 toggle 控件
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/pxLbjv 可交互视频 此视频是可 ...
- 前端每日实战:122# 视频演示如何用纯 CSS 创作一个苹果系统的相册图标
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/zJKwbO 可交互视频 此视频是可 ...
- 前端每日实战:156# 视频演示如何用纯 CSS 创作一个飞机舷窗风格的 toggle 控件
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jeaOrw 可交互视频 此视频是可 ...
随机推荐
- 26)PHP,数据库表格中项的数据类型
类型展示: tinyint-----1个字节 smallint----2个字节 mediumint--3个字节 int------4个字节 bigint---8个字节 字符串类型 最基本最重要的2个: ...
- netstat - 系统信息
netstat - 系统信息 注意:如果是勘验或者验证漏洞,需要验证netstat程序的完整性(netstat程序是否被修改过). # 老版本的CentOS中会自带这个软件包,新版的7有的时候需要单独 ...
- 70-persistent-net.rules无法自动生成,解决方法
无法自动生成70-persistent-net.rules文件的原因: 在更换linux内核前修改ifcfg-eth0文件,更换内核,使用dhclient无法动态分配IP,删掉70-persisten ...
- [LC] 77. Combinations
Given two integers n and k, return all possible combinations of k numbers out of 1 ... n. Example: I ...
- 104)PHP,目录树状输出
使用特定数量的缩进达到树状目的! 核心问题,计算需要缩进的数量! 缩进级别,与递归调用深度保持一致.每当执行一级递归操作,所找到的文件的缩进级别+; 语法实现: 增加一个参数,表示当前函数调用的深度级 ...
- Windows下的GUI 库
Windows 下的 GUI 解决方案比较多: 基于 C++ 的有 Qt.MFC.WTL.wxWidgets.DirectUI.Htmlayout: 基于 C# 的有 WinForm.WPF: 基于 ...
- python-django框架-电商项目-商品模块开发_20191124
用户浏览记录的添加 什么时候添加历史浏览记录? 在商品详情的视图里面添加浏览记录, 之前使用的list来存储浏览记录, 注意:如果good_id之前已经浏览过了,那就要移除,conn.lrem(his ...
- IE11阅读视图:带给你静心饕餮阅读大餐的片刻
编者按:又到读书日,今天你挤出时间读书了吗?如今,越来越多人在习惯电子阅读,然而总难逃眼花缭乱的干扰信息.Internet Explorer 11新增阅读视图功能,一键开启,给你带给你静心饕餮阅读大餐 ...
- 听《Sara》
Sara这首歌太好听了,虽然没有清楚具体是唱什么,但我感觉是讲一个故事,很好奇,我找到了歌词. Sara 塞拉 鲍勃迪伦 I laid on a dune, I looked at the sky, ...
- but for|lest,in case和for fear (that)|confidential|item|adapted for|fee|debates| retain|substantial|proceeded to|refrain from|clear|perceive
He ________ you if you ________ to see him that afternoon. A. might tell, were going B. told, were ...