Question

我想使用CSS嵌入默认模糊的图像（源图像文件不是模糊的）。当用户将鼠标悬停在图像上时，应该显示它。如果它上面也有一个动画，那将是很棒的。有没有办法做到这一点？

Answer 1

CSS filters（MDN参考）可以做到这一点

img {
  -webkit-filter: blur(10px);
  filter: blur(10px);
  -webkit-transition: -webkit-filter .5s linear;
  transition: -webkit-filter .5s linear;
  transition: filter .5s linear;
  transition: filter .5s linear, -webkit-filter .5s linear;
}
img:hover {
  -webkit-filter: blur(0);
  filter: blur(0)
}

<img src="http://www.fillmurray.com/460/300" alt="" />

默认情况下模糊的图像会在悬停时显示出来吗？

1 个答案: