css 图片上漂浮图标

CSS技术为网页增添了无限的魅力，其中图片上漂浮图标的效果非常引人注目。这种效果可通过CSS的伪元素和定位属性来实现。

.icon {
  position: relative;
}

.icon::before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  background-image: url("icon.png");
  background-size: 24px 24px;
  width: 24px;
  height: 24px;
}

.icon:hover::before {
  top: -20px;
  left: -20px;
}

如上所示，我们给元素添加了相对定位，可以让伪元素的绝对定位以其为参考对象。然后通过添加伪元素，并设置其内容为空，使得伪元素成为仅仅是代表一个可视的方框。

我们为伪元素设定背景图，并设置图标的大小、位置，作为元素的装饰。悬浮时，我们可以采用伪元素的:hover状态，并改变它的位置达到漂浮的效果。

通过上面的CSS代码，我们就可以实现图片上漂浮图标的效果了！