资讯专栏INFORMATION COLUMN

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

立即前往
首页/文章专栏/前端每日实战：8# 视频演示如何用纯 CSS 创作一个充电 loader 特效

前端每日实战：8# 视频演示如何用纯 CSS 创作一个充电 loader 特效

SnaiLiu / 725人阅读

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

效果预览

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

https://codepen.io/zhang-ou/pen/deNqdV

可交互视频教程

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

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

https://scrimba.com/c/cvrwJAK

源代码下载

请从 github 下载。

https://github.com/comehope/front-end-daily-challenges/tree/master/008-charging-loader-animation

代码解读

定义 dom，只有一个容器元素：

</>复制代码

居中显示：

</>复制代码 
  1. html, body {
  2.     height: 100%;
  3.     display: flex;
  4.     align-items: center;
  5.     justify-content: center;
  6.     background: linear-gradient(to bottom, teal, aqua);
  7. }

画出电池的主体轮廓：

</>复制代码 
  1. .battery {
  2.     width: 6em;
  3.     height: 3em;
  4.     color: midnightblue;
  5.     border: 0.5em solid currentColor;
  6.     border-radius: 0.2em;
  7.     font-size: 2em;
  8. }

画出电池的突起：

</>复制代码 
  1. .battery {
  2.     position: relative;
  3. }
  4. .battery::after {
  5.     content: "";
  6.     position: absolute;
  7.     width: 0.5em;
  8.     height: 2em;
  9.     background-color: currentColor;
  10.     top: 0.5em;
  11.     right: -1em;
  12.     border-radius: 0 0.2em 0.2em 0;
  13. }

画出充电电量：

</>复制代码 
  1. .battery {
  2.     background-image: linear-gradient(to right, whitesmoke, whitesmoke);
  3.     background-repeat: no-repeat;
  4.     background-size: 30% 80%;
  5.     background-position: 0.3em 50%;
  6. }

定义和应用动画效果：

</>复制代码 
  1. @keyframes charge {
  2.     from {
  3.         background-size: 10% 80%;
  4.     }
  5.     to {
  6.         background-size: 95% 80%;
  7.     }
  8. }
  9. .battery {
  10.     animation: charge 5s linear infinite;
  11. }

最后，把动画的时间函数由线性变化改为步长变化：

</>复制代码 
  1. .battery {
  2.     animation: charge 5s steps(8) infinite;
  3. }

大功告成！

知识点

linear-gradient() https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

background-size https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

background-position https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

steps() https://developer.mozilla.org/en-US/docs/Web/CSS/single-transition-timing-function#Timing_functions

currentColor https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#Values

border-radius https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

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

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

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

相关文章

  • 前端每日实战：8# 视频演示如何用纯 CSS 创作一个充电 loader 特效

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

    nevermind 评论0 收藏0

  • 前端每日实战专栏 2018 年 4 月份项目汇总（共 8 个项目）

    摘要：前端每日实战专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书以下是年月份发布的项目视频演示如何用纯创作一个按钮文字滑动特效视频演示如何用纯创作一个矩形旋转特效视频演示如何用纯创作一个容器厚条纹边 《前端每日实战》专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书！ 以下是 2018 年 4 月份发...

    draveness 评论0 收藏0

  • 前端每日实战专栏 2018 年 4 月份项目汇总（共 8 个项目）

    摘要：前端每日实战专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书以下是年月份发布的项目视频演示如何用纯创作一个按钮文字滑动特效视频演示如何用纯创作一个矩形旋转特效视频演示如何用纯创作一个容器厚条纹边 《前端每日实战》专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书！ 以下是 2018 年 4 月份发...

    legendmohe 评论0 收藏0

发表评论

登陆后可评论

0条评论

SnaiLiu

男|高级讲师
我要私信

TA的文章

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