具有自定义属性的CSS中的计时器栏

前几天我在做一件需要一个可见计时器的事情。在这个项目中，这种类型的计时器有一个UI先例。人们不希望看到数字节节下降；更理想的情况是看到一个\"酒吧\"从满变空。我提到这一点是因为有很多种方法可以让你接近一个\"计时器\"用户界面。这不是对所有这些的探索（在CodePen上搜索会更有帮助），而是对一种对我有用的方法的探索。n我需要的计时器是项目所称的\"循环时间\"栏。执行操作。它可能会导致一个循环时间，并且大多数进一步的操作都会被阻止，直到循环时间结束。所以，一个非常清晰的红色条是正确的用户界面。它给人一种节奏感和流动感，在这里你可以感觉到计时器的结束，为你的下一个动作计时。一个linear的动画，它将条带缩小到零。n设置这个相当简单…n让我们给自己一个父/子对象，以防万一我们想要风格化容器中某一点的空部分。n

nFor now, let\"s just style the bar inside.n.round-time-bar div {height: 5px;background: linear-gradient(to bottom, red, #900);}n这给了我们一个漂亮的小红色条，我们可以用它作为时间指示器。n下一步我们需要把它勾起来，但这里是我们需要考虑功能的地方。像这样的计时器需要知道它的计时时间！我们可以在HTML中提供信息。这并不意味着我们要避开JavaScript，而是要拥抱它。我们的意思是，\"嘿，JavaScript，请给我们一个变量的持续时间，我们将从那里得到它。\"n

nIn fact, this way is very friendly to modern DOM-handling JavaScript. As long as that --variable是正确的，它可以随时重新呈现DOM元素，我们可以确保设计处理得很好。我们将制作一个这样的变体。n现在，让我们来制作动画。好消息，这很容易。这里有一个单行关键帧：n@keyframes roundtime {to {/* More performant than animating `width` */transform: scaleX(0);}}n我们可以\"压扁\"条形图，因为当我们水平缩放时，条形图的设计没有任何看起来会压扁的东西。如果我们这样做了，我们就可以为width制作动画。这没什么大不了的，特别是因为它不会回流其他任何东西。n现在我们把它应用到条上：n.round-time-bar div {/* ... */animation: roundtime calc(var(--duration) * 1s) steps(var(--duration)) forwards;transform-origin: left center;}n看看我们是如何拖动--duration变量来设置动画的持续时间的？这就完成了繁重的工作。我也用它来设置相同的数字steps()，所以它\"滴答\"下来。\"滴答声\"可能是您喜欢的可视化UI（我喜欢），但它也适应了JavaScript可能随时重新呈现这个条的想法，滴答声使得您不太可能注意到它。我使用了一个整数作为持续时间值，这样它就可以像这样执行双重任务。n如果您想要一个平滑的动画，我们可以作为一个变体来执行，比如：n

nThen not do the steps:nNote we\"re also using a linear动画，这对于计时器来说似乎是有意义的。时间，就好像它是不容易的。还是真的？不管怎样，这是你的决定。如果你想要一个计时器，似乎加快或减慢在某些点，去吧。n我们可以使用相同的变体数据属性驱动的API来处理颜色变体：nAnd one final variation is making each \"second\" a fixed width. That way, a 10 second timer will literally look longer than a 5 second timer:nHere\"s the demo:

具有自定义属性的CSS中的计时器栏

admin_action_{$_REQUEST[‘action’]}

admin_footer-{$GLOBALS[‘hook_suffix’]}

customize_save_{$this->id_data[‘base’]}

customize_value_{$this->id_data[‘base’]}

get_comment_author_url

network_admin_edit_{$_GET[‘action’]}

network_sites_updated_message_{$_GET[‘updated’]}

pre_wp_is_site_initialized

WordPress 的SEO 教学：如何在网站中加入关键字（Meta Keywords）与Meta 描述（Meta Description）？

谷歌的SEO是什么