1. 首页
  2. css

CSS饼图计时器

编者注:Kitty Giraudel为CodePen上的\”馅饼计时器\”做了一个很酷的演示。在CSS中,这绝对不是一件直观或简单的事情。然后他们给我写了一篇关于他们是如何做到这一点的文章,如果这篇文章写得不好的话,我会很生气的。谢谢你,凯蒂!我们在做什么?
您可能已经在Flash网站上看到了其中一些加载程序。它基本上是一块越来越大的馅饼,变成一个完整的圆。
一开始我以为它会很简单,只要有一个圆,让它旋转,把它的一部分藏在面具后面,我就完成了。嗯,事实证明这要困难得多。事实上,CSS并没有为这样的任务做好准备,即使使用了像Sass&Compass这样的预处理器。在制作形状的时候,我们总是在挣扎,当我们必须设计或制作这些形状的动画时,我们更是如此。大多数情况下,我们都会设法绕过它,并以可维护性或语义为代价让某些东西工作起来。为什么要这样做?
我认为最常见的用例是计时器。但是这些概念也可以用来制作纯CSS的饼图。如果你是es,即使有一些很棒的工具来管理饼图(大部分是用JavaScript),我们可能很容易就知道如何只用CSS来做饼图,甚至用这样的技巧来制作CSS饼图。
在Atomic Noggin Enterprise网站上有一个关于使用clip属性制作CSS饼图的教程。
嗯,这是一个语义错误的解决方案!但可维护性并不差,所以我们开始了。<div><div><div></div> ,因为微调器和填充器是同一个圆的一半,我们使用一个共享类(**0***)来设置它们的样式。CSS保持本文中的代码干净易懂,我们不会添加任何供应商前缀。p>父元素设置计时器的大小和绝对位置上下文:.wrapper {width: 250px;height: 250px;position: relative;background: white;}确保宽度和高度相等以形成一个圆,并确保整个操作正常。微调器和\”填充器\”共享这个CSS:.pie {width: 50%;height: 100%;position: absolute;background: #08C;border: 10px solid rgba(0,0,0,0.4);}它们的宽度等于父宽度的50%,因为它们都是同一圆的一部分,并且它们的高度与父高度相同。我们也给它们一些颜色和一个边框来正确识别它们。这个\”微调器\”.spinner {border-radius: 125px 0 0 125px;z-index: 200;border-right: none;animation: rota 10s linear infinite;}我们必须使它看起来像一个半圆形,边框半径在左上角和左下角。另外,我们给它一个正的高z-index以便把它放在填充物的顶部,但在遮罩的后面。然后我们加上animation在10秒长。我们稍后将进一步讨论动画。对于微调器,我们设置border-radius和z-index,删除border-left,并使animation长10秒。对于该元素,animation-timing-function不是设置为linear,而是设置为steps(1, end)。这意味着animation不会从0%逐渐变为100%,而是会立即完成。由于填充物在动画的第一部分不可见,因此我们将其不透明度设置为0,它的位置是父宽度的50%。这个\”遮罩\”.mask {width: 50%;height: 100%;position: absolute;z-index: 300;opacity: 1;background: inherit;animation: mask 10s steps(1, end) infinite;}这个遮罩从动画开始就出现了,所以它的不透明度设置为1,它的背景是从父背景色继承的(使它不可见)。为了覆盖微调器,它具有与之相同的尺寸,并且其z索引设置为300。关键帧@keyframes rota {0%{ transform: rotate(0deg); }100% { transform: rotate(360deg); }}@keyframes fill {0%{ opacity: 0; }50%, 100% { opacity: 1; }}@keyframes mask {0%{ opacity: 1; }50%, 100% { opacity: 0; }}第一个动画(rota)用于微调器。它在10秒内从0度逐渐旋转到360度。第二个动画(fill)用于填充。5秒后,它立即从0变为1不透明度。最后一个动画(mask)是针对遮罩的。5秒后,它的不透明度立即从1变为0。因此动画看起来是这样的:T0–微调器在左侧,被遮罩隐藏。填料被隐藏。T1–旋转器开始顺时针旋转,然后从面罩后面慢慢出现。T2-微调器走了>T3-微调器走了>T4-微调器走了>T5-微调器走了>T6
– T0–微调器在左侧,被遮罩隐藏。填料被隐藏。
– T1–旋转器开始顺时针旋转,然后从面罩后面慢慢出现。
– T2-微调器走了>
– T3-微调器走了>
– T4-微调器走了>
– T5-微调器走了>
– T6

CSS饼图计时器 为WP2原创文章,链接:https://www.wp2.cn/css/css%e9%a5%bc%e5%9b%be%e8%ae%a1%e6%97%b6%e5%99%a8/