Html 如果可以在不使用画布的情况下，仅使用CSS设置图像像素的动画

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

• 将背景图像设置为非常小的图像（例如50px或100px）
• 在元素上设置图像渲染：像素化

这将为您提供像素化的外观

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

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

这个问题是双重的

我想使用

background size:cover

创建

背景图像

，使其正确填充容器元素。因此，不能在任何像素化动画中使用背景大小

变换：缩放（0.1）

（接近原始像素大小）不起作用，因为它缩放整个元素

我想这样做：动画

transform:scale（x）

在0.3或0.5秒内从50px像素化图像变为2000px非像素化图像。但这不起作用。我想可能使用背景大小，但由于限制也不起作用

想知道是否有任何方法可以做到这一点

我已经看到了使用画布进行像素化的方法。想知道是否没有其他解决方案可以不使用JS/canvas

div{
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
}

您可以使用svg过滤器进行像素化。 然后可以设置过滤器的动画。 要在div后台使用过滤器，只需执行filter:

url（#filterid）

把它们放在一起，看起来是这样的：

#myDiv:：before{
内容：“；
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
过滤器：url（#像素化）；
背景尺寸：封面；
背景图片：url(https://images.unsplash.com/photo-1475724017904-b712052c192a?ixlib=rb-1.2.1&ixid=eyjhcbfawqiojeymdd9&auto=format&fit=crop&w=2850&q=80）
}
#myDiv{
位置：相对位置；
宽度：350px；
高度：250px；
}
.里面{
位置：相对位置；
}

你好

---

有点困惑，您是否正在尝试将同一元素的1个背景图像（50px像素化图像）动画化为新的背景图像（2000px未像素化图像）？还是这两个不同的DOM元素？你能添加HTML吗？我正在尝试获取1个HTML元素，并将其背景图像与大图像交换。然后我想开始缩小大图像的比例，这样你就可以设置缩放的动画，像素化就可以自行处理了。但我不确定这是否行得通。类似的东西可能吗？不，我不想像在JSFIDLE中那样缩放（或动画缩放）实际图像。我使用了图像缩放的思想来缩放位图，所以你可以画一个50像素的图像，然后将它缩放到2000像素以获得像素化。