如何用纯 CSS 创作一个沙漏 loader
效果预览
在线演示
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
https://codepen.io/comehope/pen/VGegxr
可交互视频
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/p/pEgDAM/cVRr9cp
源代码下载
本地下载
每日前端实战系列的全部源代码请从 github 下载:
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom,容器中包含 2 个元素,分别代表沙漏的上半部和下半部:
<div class="loader"><span class="top"></span><span class="bottom"></span>
</div>
居中显示:
body {margin: 0;height: 100vh;display: flex;align-items: center;justify-content: center;background-color: gainsboro;
}
定义容器尺寸,并设置子元素整体布局:
.loader {width: 4.3em;height: 9.8em;font-size: 10px;position: relative;display: flex;flex-direction: column;align-items: center;justify-content: space-between;
}
画出 2 个正方形:
.top,
.bottom {width: 3.5em;height: 3.5em;border-style: solid;border-color: saddlebrown;
}
通过边框、圆角和旋转,把 2 个正方形变成沙漏形状:
.top,
.bottom {border-width: 0.2em 0.2em 0.6em 0.6em;border-radius: 50% 100% 50% 30%;
}.top {transform: rotate(-45deg);
}.bottom {transform: rotate(135deg);
}
用伪元素画出沙子,上部的沙子的顶部是大圆弧,下部的沙子的顶部是小圆弧:
.top::before,
.bottom::before {content: '';position: absolute;width: inherit;height: inherit;background-color: deepskyblue;
}.top::before {border-radius: 0 100% 0 0;
}.bottom::before {border-radius: 0 0 0 35%;
}
定义沙子的动画属性:
.top::before,
.bottom::before {animation: 2s linear infinite;
}
增加沙子从沙漏的上半部落下的动画效果:
.top::before {animation-name: drop-sand;
}@keyframes drop-sand {to {transform: translate(-2.5em, 2.5em);}
}
增加沙子的沙漏在下半部堆积的动画效果:
.bottom::before {transform: translate(2.5em, -2.5em);animation-name: fill-sand;
}@keyframes fill-sand {to {transform: translate(0, 0);}
}
隐藏沙漏上半部和下半部容器外的部分,此时上面 2 个动画的叠加效果是沙子从上半部漏下,慢慢在下半部堆积:
.top,
.bottom {overflow: hidden;
}
用外层容器的伪元素制作一个窄长条,模拟流动的沙子:
.loader::after {content: '';position: absolute;width: 0.2em;height: 4.8em;background-color: deepskyblue;top: 1em;
}
增加沙子流动的动画效果:
.loader::after {animation: flow 2s linear infinite;
}@keyframes flow {10%, 100% {transform: translateY(3.2em);}
}
最后,增加沙漏的翻转动画:
.loader {animation: rotating 2s linear infinite;
}@keyframes rotating {0%, 90% {transform: rotate(0);}100% {transform: rotate(0.5turn);}
}
大功告成!
原文地址:https://segmentfault.com/a/1190000016153878
如何用纯 CSS 创作一个沙漏 loader相关推荐
- python绘制图形沙漏_前端每日实战:118# 视频演示如何用纯 CSS 创作一个沙漏 loader...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, saf ...
- 前端每日实战:45# 视频演示如何用纯 CSS 创作一个菱形 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKzjqK 可交互视频教程 此视频 ...
- 如何用纯 CSS 创作一个摇摇晃晃的 loader
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oyJvpe 可交互视频 ...
- 如何用纯 CSS 创作一个小球上台阶的动画
如何用纯 CSS 创作一个小球上台阶的动画 效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/come ...
- 如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个单元素抛盒子的 loader
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qKwXbx 可交互视频 ...
- 如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视 ...
- 如何用纯 CSS 创作一个文本淡入淡出的 loader 动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ERwpeG 可交互视频 ...
- 如何用纯 CSS 创作一个极品飞车 loader
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/w178191520/article/details/84861010 效果预览 在线演示 按下右侧的 ...
最新文章
- C4D灯光照明技术学习教程
- wpf 如何设置弹出窗口必须关闭才能打开其他软件_Mac忘记登录密码?以防万一,必须收藏。...
- Firefox下代码触发a标签的click事件无效
- 转 已知两点坐标和半径求圆心坐标程序C++
- 【转载】汇编速查手册
- Oracle 数据库-分组函数总结
- 梯度下降法快速教程 | 第二章:冲量(momentum)的原理与Python实现
- LeetCode-----二维数组中的查找
- Fiber 数据结构是怎样的?
- dfs.datanode.directoryscan.throttle.limit.ms.per.
- 射频电子电路设计图集---研读
- ubuntu18.04开机后出现黑屏 最上显示/dev/nvme。。。
- 数据安全管理条例明确个人信息保护 360呼吁隐私保护重在企业
- 杂记——贝叶斯可信区间与频率置信区间的区别
- 2020CADCG专题报告笔记 Jittor计图 深度学习框架
- Gradle 下载及代理设置
- linux升级失败无法启动应用程序,Ubuntu升级后无法启动 kernel panic - not syncing
- 常见的关系型数据库和非关系型数据库区别
- Mysql 主从复制的作用和原理
- 常用神经网络模型及其应用评述(转载)