使用CSS剪辑路径创建交互效果，第二部分

这是我上一篇关于剪辑路径的文章的后续。上一次，我们深入了解了剪辑的基本原理以及如何开始。我们看了一些想法来举例说明我们可以用剪辑做什么。在这篇文章中，我们将更进一步，看看不同的例子，讨论替代技术，并考虑如何使我们的工作与跨浏览器兼容。在撰写本文时，CSS裁剪的最大缺点之一是浏览器支持。没有100%的浏览器覆盖率意味着不同浏览器的用户体验不同。作为开发人员，我们无法控制浏览器支持什么—浏览器供应商是实现规范的人，不同的供应商会有不同的议程。我们可以做的一件事是使用替代技术来克服不一致。CSS和SVG的特征集有时会重叠。在一方起作用的可能在另一方起作用，反之亦然。碰巧，裁剪的概念同时存在于CSS和SVG中。SVG裁剪语法有很大的不同，但工作原理相同。与CSS相比，SVG裁剪的好处在于它的成熟度。支持是好的一路回到老IE浏览器。大多数错误现在已经修复（或者至少有一个希望已经修复）。这就是SVG剪辑支持的样子：此浏览器支持数据来自Caniuse，其中有更多详细信息。一个数字表示浏览器支持该版本及更高版本的功能。桌面在CodePen上看到Mikael Ainalem（@Ainalem）解释的笔轮廓缩放幻灯片。这是SVG标记的基本结构：...For this image, we then want to create a mask of the focal point — in this case, the person\"s silhouette. If you\"re unsure how to go about creating a clip, check out my previous article for more details because, generally speaking, making cuts in CSS and SVG is fundamentally the same:Import an image into the SVG editorDraw a path around the objectConvert the path to the syntax for SVG clip path. This is what goes in the SVG\"s 块。将SVG标记粘贴到HTML中如果你方便使用编辑器，你可以在编辑器中执行以上大部分操作。大多数编辑器都很好地支持遮罩和剪辑路径。我喜欢对标记有更多的控制，所以我通常至少手工做一些工作。我发现使用SVG编辑器和使用标记之间有一种平衡。例如，我喜欢组织代码、重命名类并清理编辑器可能掉在其中的任何污点。Mozilla Developer Network在记录SVG片段路径方面做得很好。下面是原始演示使用的标记的精简版本，让您了解剪辑路径的适应方式：Let\"s use a colored rectangle as a placeholder for the next image in the slideshow. This helps to clearly visualize the shape that part that\"s cut out and will give a clearer idea of the shape and its movement.explained II\">See the Pen Silhouette zoom slideshow explained II by Mikael Ainalem (@ainalem) on CodePen.Now that we have the silhouette, let\"s have a look at the actual transition. In essence, we\"re looking at two parts of the transition that work together to create the effect:First, the mask fades into view.After a brief delay (200ms), the clip path scales up in size.Note the translate value in the upscaling rule. It\"s there to make sure the mask stays in the focal point as things scale up. This is the CSS for those transitions:.clipPath {transition: transform 1200ms 500ms; /* Delayed transform transition */transform-origin: 50%;}.clipPath.active {transform: translateX(-30%) scale(15); /* Upscaling and centering mask */}.image {transition: opacity 1000ms; /* Fade-in, starts immediately */opacity: 0;}.image.active {opacity: 1;}下面是我们得到的-一个过渡到矩形的图像！explained III>查看由Mikael Ainalem（@Ainalem）在CodePen上解释的钢笔轮廓缩放幻灯片III。现在让我们用下一个图像替换矩形以完成过渡：explained IV>查看由Mikael Ainalem（@Ainalem）在CodePen上解释的钢笔轮廓缩放幻灯片IV。重复上述过程对于每张图片，我们可以得到多张幻灯片。我们最不需要的就是在图像中循环的逻辑。这是一个记账的问题，确定哪个是当前图像，哪个是下一个图像，依此类推：块。 10. 将SVG标记粘贴到HTML中 11. First, the mask fades into view. 12. After a brief delay (200ms), the clip path scales up in size.

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