资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/前端每日实战：99# 视频演示如何用纯 CSS 创作一个过山车 loader

前端每日实战：99# 视频演示如何用纯 CSS 创作一个过山车 loader

sunsmell / 1190人阅读

摘要：效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。

效果预览

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

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

可交互视频

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

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

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

源代码下载

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

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

代码解读

定义 dom，容器中包含 3 个元素，代表 3 个圆点：

</>复制代码 
  2.     
  3.     
  4.

居中显示：

</>复制代码 
  1. body {
  2.     margin: 0;
  3.     height: 100vh;
  4.     display: flex;
  5.     align-items: center;
  6.     justify-content: center;
  7.     background: linear-gradient(to right, silver, teal);
  8. }

定义摩天轮的直径，其他长度均以此值为基本尺度：

</>复制代码 
  1. .loader {
  2.     --diameter: 10em;
  3. }

定义容器尺寸，宽是高的2倍：

</>复制代码 
  1. .loader {
  2.     --width: calc(var(--diameter) * 2);
  3.     width: var(--width);
  4.     height: var(--diameter);
  5. }

定义伪元素的共享属性：

</>复制代码 
  1. .loader {
  2.     position: relative;
  3. }
  4. .loader::before,
  5. .loader::after {
  6.     content: "";
  7.     position: absolute;
  8.     bottom: 0;
  9. }

画出底部的轨道，同时定义了一个表示线粗细的变量：

</>复制代码 
  1. .loader {
  2.     --stroke-width: calc(var(--diameter) / 40);
  3.     color: white;
  4. }
  5. .loader::before {
  6.     width: inherit;
  7.     height: var(--stroke-width);
  8.     background-color: currentColor;
  9. }

画出中部的圆形轨道：

</>复制代码 
  1. .loader::after {
  2.     box-sizing: border-box;
  3.     width: var(--diameter);
  4.     height: var(--diameter);
  5.     border: var(--stroke-width) solid;
  6.     border-radius: 50%;
  7.     left: 25%;
  8. }

画出一个圆点，同时定义了一个表示圆点直径的变量：

</>复制代码 
  1. .loader {
  2.     --dot-diameter: calc(var(--diameter) / 10);
  3. }
  4. .loader span {
  5.     position: absolute;
  6.     width: var(--dot-diameter);
  7.     height: var(--dot-diameter);
  8.     background-color: currentColor;
  9.     border-radius: 50%;
  10.     bottom: var(--stroke-width);
  11.     left: calc((var(--width) - var(--dot-diameter)) / 2);
  12. }

为圆点增加沿圆形轨道旋转的动画效果：

</>复制代码 
  1. .loader span {
  2.     animation:
  3.         rotating 2s linear infinite;
  4.     --vertical-center: calc((var(--diameter) / 2 - var(--stroke-width) - var(--dot-diameter)) * -1);
  5.     transform-origin: 50% var(--vertical-center);
  6. }
  7. @keyframes rotating {
  8.     0%, 10% {
  9.         transform: rotate(0deg);
  10.     }
  11.     60%, 100% {
  12.         transform: rotate(-1turn);
  13.     }
  14. }

为圆点增加移动的动画效果：

</>复制代码 
  1. .loader span {
  2.     animation:
  3.         run 2s linear infinite,
  4.         rotating 2s linear infinite;
  5. }
  6. @keyframes run {
  7.     0% {
  8.         left: calc(var(--dot-diameter) * -1);
  9.     }
  10.     10%, 60% {
  11.         left: calc((var(--width) - var(--dot-diameter)) / 2);
  12.     }
  13.     70%, 100% {
  14.         left: calc(var(--width));
  15.     }
  16. }

为另外 2 个圆点设置动画延时，使 3 个圆点看起来像是紧挨着的 3 个车厢：

</>复制代码 
  1. .loader span:nth-child(1) {
  2.     animation-delay: 0.075s;
  3. }
  4. .loader span:nth-child(2) {
  5.     animation-delay: 0.15s;
  6. }

最后，隐藏容器外的内容：

</>复制代码 
  1. .loader {
  2.     overflow: hidden;
  3. }

大功告成！

GPU云服务器 云服务器 如何用css 如何用云服务器做一个个人网站 如何用vue开发实时音视频 css-loader

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113660.html

相关文章

  • 前端每日实战：99# 视频演示如何用纯 CSS 创作一个过山车 loader

    摘要：效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbeYYy?w=400&h=300); 效果预览 按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehop...

    baiy 评论0 收藏0

  • 前端每日实战 2018 年 7 月份项目汇总（共 29 个项目）

    摘要：过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书视频演示如何用纯创作一台咖啡机视频演示如何用 过往项目 2018 年 6 月份项目汇总（共 27 个项目） 2018 年 5 月份项目汇总（共 30 个项目） 2018 年 4 月份项目汇总（...

    ghnor 评论0 收藏0

  • 前端每日实战 2018 年 7 月份项目汇总（共 29 个项目）

    摘要：过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书视频演示如何用纯创作一台咖啡机视频演示如何用 过往项目 2018 年 6 月份项目汇总（共 27 个项目） 2018 年 5 月份项目汇总（共 30 个项目） 2018 年 4 月份项目汇总（...

    avwu 评论0 收藏0

发表评论

登陆后可评论

0条评论

sunsmell

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<