如果可以在没有画布的情况下为图像像素化设置动画，则仅使用 CSS答案

【问题标题】：If it is possible to animate image pixelation without canvas, using only CSS如果可以在没有画布的情况下为图像像素化设置动画，则仅使用 CSS
【发布时间】：2019-10-20 07:18:04
【问题描述】：

因此，您可以通过执行以下操作在 CSS 中获得像素化：

将background-image 设置为一个非常小的图像（例如 50 像素或 100 像素）。
在元素上设置image-rendering: pixelated。

这会给你像素化的外观。

现在我想通过在浏览器完成下载后将“非常小的图像”替换为大图像来制作动画：

let img = new Image()
img.src = largeVersion
img.onload = function(){
  // set css background-image to the new image perhaps, not sure...      
}

问题有两个方面。

我想让background-image 使用background-size: cover，这样它就可以正确填充容器元素。所以你不能在任何像素化动画中使用背景尺寸。
transform: scale(0.1)（接近原始像素大小）不起作用，因为它会缩放整个元素。

我想做这样的事情：动画transform: scale(x) 从 50 像素像素化图像到 2000 像素非像素化图像，超过 0.3 或 0.5 秒。但这不起作用。我想也许可以使用背景大小，但由于限制，这也不起作用。

想知道有没有办法做到这一点。

我见过this 使用画布进行像素化。想知道是否没有其他不使用 JS/canvas 的解决方案。

<style>
  div {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
</style>
<div style='background-image: url(/100px.jpg)'></div>

【问题讨论】：

有点困惑，您是否尝试从 1 个背景图像（50 像素像素化图像）动画到相同元素的新背景图像（2000 像素非像素化图像）？还是这 2 个不同的 DOM 元素？可以添加 HTML 吗？
我正在尝试使用 1 个 HTML 元素并将其背景图像换成大图像。然后我想从小缩放开始大图像，这样你就可以动画缩放，像素化会自己处理。但我不确定这是否有效。
可能与此类似？ jsfiddle.net/hbw7pnet/1
不，我不想像在那个 jsfiddle 中那样缩放（或动画缩放）实际图像。我使用图像缩放的想法来缩放位图，因此您绘制了一个 50 像素的图像，然后将其缩放到 2000 像素以获得像素化。

标签： html css background-image pixelate

【解决方案1】：

您可以使用 svg 过滤器进行像素化。然后，您可以为过滤器设置动画。要在 div 背景上使用过滤器，您只需过滤：url(#filterid)

放在一起看起来像这样：

#myDiv::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
filter:url(#pixelate);
background-size:cover;
background-image:url(https://images.unsplash.com/photo-1475724017904-b712052c192a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80)

}

#myDiv {
  position:relative;
  width:350px;
  height:250px;
}

.inside {
  position: relative;
}

<div id="myDiv"> <div class="inside"><h1>Hello</h1></div> </div>
<svg>
  <filter id="pixelate" x="0" y="0">
    <feFlood x="4" y="4" height="1" width="1" />
    <feComposite id="composite1" width="10" height="10" />
    <feTile result="a" />
    <feComposite in="SourceGraphic" in2="a" operator="in" />
    <feMorphology id="morphology" operator="dilate" radius="5" />
  </filter>

  <animate xlink:href="#composite1" id="anim-width" 
    attributeName="width" from="40" to="10" dur=".8s"
    fill="freeze" />  
  <animate xlink:href="#composite1" id="anim-height" 
    attributeName="height" from="40" to="10" dur=".8s"
    fill="freeze" />
  <animate xlink:href="#morphology" id="anim-radius" 
    attributeName="radius" from="20" to="5" dur=".8s"
    fill="freeze"/>
</svg>

请注意，我必须创建一个内部 div 并在伪元素 ::before 上应用背景，但“很快”这将变得不必要，当 backdrop-filter 的支持得到改善时。

参考：

像素化 svg 效果：https://codesandbox.io/s/km3opvn6yv

为 svg 滤镜制作动画：https://codepen.io/chriscoyier/pen/dPRVqL

背景过滤器：https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

【讨论】：