使用CSS转换和动画更改渐变的状态

早在2012，Internet Explorer 10就问世了，它终于支持了CSS渐变，而且，除此之外，它还支持仅用CSS来制作渐变的动画！当时没有其他浏览器支持这一点，但我对未来充满了希望。遗憾的是，六年过去了，这个部门没有任何变化。Edge支持使用CSS设置渐变的动画，就像当时的IE 10一样，但是没有其他浏览器支持这个功能。尽管制作background-size或background-position或opacity的动画，或是在顶部旋转一个伪元素，要达到很酷的效果还需要很长的时间，但这些解决方法仍然是有限的。如果不添加大量额外的元素或大量额外的渐变，我们就无法再现一些效果，如下图所示的\"百叶窗效果\"。百叶窗效果（现场演示，仅限Edge/IE 10+）。在Edge中，通过关键帧animation： html {background: linear-gradient(90deg, #f90 0%, #444 0) 50%/ 5em;animation: blinds 1s ease-in-out infinite alternate;}@keyframes blinds {to {background-image: linear-gradient(90deg, #f90 100%, #444 0);}} 获得上述效果，如果它看起来潮湿，我们可以用一点Sass来干掉它： @function blinds($open: 0) {@return linear-gradient(90deg, #f90 $open*100%, #444 0);}html {background: blinds() 50%/ 5em;animation: blinds 1s ease-in-out infinite alternate;}@keyframes blinds { to { background-image: blinds(1) } } 虽然我们已经使我们编写的代码和以后需要编辑的代码更易于维护，我们仍然在编译的CSS中有重复，并且我们受到这样一个事实的限制，即我们只能用同一个单元在两个停止之间制作动画，而从0%到100%的动画效果很好，试图使用0或0px而不是0%的结果是动画不再发生。更不用说Chrome和Firefox只是从橙色翻到灰色，完全没有停止位置！幸运的是，现在我们有一个更好的选择：CSS变量！ CSS变量是不可设置动画的，尽管我们可以得到transition（但不能animation！）效果如果我们使用它们的属性是可设置动画的。例如，当在transform函数中使用时，我们可以transition属性transform属性。让我们考虑一个复选框被选中时被移动和挤压的例子。在这个框中，我们设置了一个取决于系数--f的transform，这个系数最初是1： .box {/* basic styles like dimensions and background */--f: 1;transform: translate(calc((1 - var(--f))*100vw)) scalex(var(--f));} ，当复选框是:checked，我们将CSS变量--f的值更改为.5： :checked ~ .box { --f: .5 } 在.box上设置transition可以使它从一个状态平稳地切换到另一个状态： .box {/* same styles as before */transition: transform .3s ease-in;} 请注意，由于此错误，这在当前版本的Edge中不起作用//codepen.io/anon/embed/vxydr？height=450&theme id=1&slug hash=>CodePen Embed Fallbackdiv>p>但是，CSS渐变是背景图像，只能在Edge和IE 10+中设置动画。因此，虽然我们可以让事情变得更简单，并减少为转换生成的CSS的数量（如下面的代码所示），但我们在扩展支持方面仍然没有取得进展。，输入Houdini，它允许我们注册自定义属性，然后设置它们的动画。目前，只有实验性Web平台功能标志后面的Blink浏览器才支持这一点，但它仍在从Edge单独扩展支持。Chrome中启用的实验性Web平台功能标志。回到我们的示例，我们注册--pos自定义属性： CSS.registerProperty({name: \"--pos\",syntax: \"\",initialValue: \"0%\",inherits: true}); 注意，这意味着它不仅接受长度和百分比值，还接受它们的calc()组合。相比之下， | 只接受长度和百分比值，而不接受它们的calc()组合。请注意，明确指定inherits现在是强制性的，尽管在规范的早期版本中它是可选的。然而，这样做并不会对Chrome产生任何影响，即使启用了标志，可能是因为在转换的情况下，被转换的是其值依赖于CSS变量而不是CSS变量本身的属性。而且，由于我们通常无法在Chrome中的两个背景图像之间进行转换，这也会失败。它在Edge中确实有效，但即使没有注册--pos变量，它也在Edge中有效，因为Edge通常允许我们在渐变之间进行转换。在启用标志的Blink浏览器中有效的是有一个animation而不是transition。 html {background: linear-gradient(90deg, #f90 var(--pos, 0%), #444 0) 50%/ 5em;animation: blinds .85s ease-in-out infinite alternate;}@keyframes blinds { to { --pos: 100%; } } 但是，这在Edge中不再起作用，因为Edge可以在渐变背景之间设置动画，但不能对自定义属性执行相同的操作。因此，我们需要在此处对Edge采用另一种方法。这就是@supports派上用场的地方，因为我们所要做的就是检查-ms-前缀属性是否受支持。 @function grad($pos: 100%) {@return linear-gradient(90deg, #f90 $pos, #444 0);}html {/* same as before */@supports (-ms-user-select: none) {background-image: grad(0%);animation-name: blinds-alt;}}@keyframes blinds-alt { to { background-image: grad() } } 停止位置不是唯一可以用这种方式设置动画的。我们可以为g做同样的事情

使用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是什么