前端每日实战:69# 视频演示如何用纯 CSS 创作一个单元素抛盒子的 loader
2024-08-23 23:16:23
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/qKwXbx
可交互视频
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cD96VUM
源代码下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,只有 1 个元素:
<div class="loader"></div>
居中显示:
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: teal;
}
画出一根木条:
.loader {
width: 6em;
border-bottom: 0.25em solid white;
font-size: 30px;
border-radius: 0.125em;
}
用伪元素在其上画出一个盒子:
.loader {
position: relative;
}
.loader::before {
content: '';
position: absolute;
width: 1em;
height: 1em;
border: 0.25em solid white;
bottom: 0;
left: 0.5em;
border-radius: 0.25em;
}
让图案倾斜,形成盒子在坡上的效果:
.loader {
transform: rotate(-45deg);
left: 1em;
top: 1em;
}
接下来制作动画。
让盒子一步步爬坡,爬到坡顶再重爬:
.loader::before {
animation: push 3s infinite;
}
@keyframes push {
0% {
transform: translateX(0);
}
20%, 25% {
transform: translateX(1em);
}
40%, 45% {
transform: translateX(2em);
}
60%, 65% {
transform: translateX(3em);
}
80% {
transform: translateX(0);
}
}
增加盒子在爬坡的过程中的滚动效果:
@keyframes push {
0% {
transform: translateX(0) rotate(0deg);
}
20%, 25% {
transform: translateX(1em) rotate(calc(90deg * 1));
}
40%, 45% {
transform: translateX(2em) rotate(calc(90deg * 2));
}
60%, 65% {
transform: translateX(3em) rotate(calc(90deg * 3));
}
80% {
transform: translateX(0) rotate(0deg);
}
}
增加盒子在爬坡过程中的拟人效果:
@keyframes push {
0% {
transform: translateX(0) rotate(0deg);
}
5% {
transform: translateX(0) rotate(-5deg);
}
20%, 25% {
transform: translateX(1em) rotate(calc(90deg * 1 + 5deg));
}
30% {
transform: translateX(1em) rotate(calc(90deg * 1 - 5deg));
}
40%, 45% {
transform: translateX(2em) rotate(calc(90deg * 2 + 5deg));
}
50% {
transform: translateX(2em) rotate(calc(90deg * 2 - 5deg));
}
60%, 65% {
transform: translateX(3em) rotate(calc(90deg * 3 + 5deg));
}
70% {
transform: translateX(3em) rotate(calc(90deg * 3 - 5deg));
}
80% {
transform: translateX(0) rotate(-5deg);
}
}
让木条在箱子爬到接近顶点时做抛掷动作:
.loader {
animation: throw 3s infinite;
transform-origin: 20%;
}
@keyframes throw {
0%, 70%, 100% {
transform: rotate(-45deg);
}
80% {
transform: rotate(-135deg);
}
}
增加盒子在爬到接近顶点时的掉落效果:
@keyframes push {
70% {
transform: translateX(3em) translateY(0) rotate(calc(90deg * 3 - 5deg)) scale(1);
filter: opacity(1);
}
80% {
transform: translateX(0) translateY(-5em) rotate(-5deg) scale(0);
filter: opacity(0.5);
}
90% {
transform: translateX(0) translateY(0) rotate(0deg) scale(0);
}
}
最后,隐藏掉可能超出页面的部分:
body {
overflow: hidden;
}
大功告成!
最新文章
- [LeetCode] Shortest Distance from All Buildings 建筑物的最短距离
- oracle linux 启动
- ffmpeg-20160325-snapshot-static-bin
- 【项目启动】 tomcat启动,项目无法启动,无法正常访问/项目可以启动,报错:java.lang.ClassNotFoundException: ContextLoaderListener
- JAVA学习篇--JAVA两种编程模式控制
- 《Windows驱动开发技术详解》之驱动程序调用驱动程序——通过设备指针调用其他驱动程序
- java读写properties工具代码
- Node.js学习入门
- bootstrap Autocomplete
- 四、Python导入自己写的包报错:没有该包如何解决
- vue选中与取消简单实现
- EF Core 2.1变化
- topcoder srm 545 div1
- LeetCode-97.交错字符串
- 嵌入式系统WinCE下应用程序GUI界面开发【转】
- [Windows Azure] Using the Graph API to Query Windows Azure AD
- pseudo tty破除无法自动输入密码的限制
- css类选择器类名覆盖优先级
- Visio 2013 由于形状保护、容器和/或图层属性的设置,无法完全执行此命令
- 一起学习《C#高级编程》3--运算符重载
热门文章
- Cluster基础(四):创建RHCS集群环境、创建高可用Apache服务
- 【HDOJ6645】Stay Real(堆)
- Windowed functions can only appear in the SELECT or ORDER BY clauses
- jenkins自动化打包报错:gradle: 未找到命令
- 007-TreeMap、Map和Bean互转、BeanUtils.copyProperties(A,B)拷贝、URL编码解码、字符串补齐,随机字母数字串
- Oracle-创建索引分区
- fiddler抓取火狐浏览器上https协议请求
- JS基础(上)
- Python笔记(二十一)_内置函数、内置方法
- Card Collector AtCoder - 5168(二分图匹配的HALL定理)