magic-img/dist/index.css

让你的图片加载更加优雅

/* src/assets/magic.css */
magic-img,
[magic-img] {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.magic-placeholder,
.magic-target {
  width: inherit;
  height: inherit;
}
.magic-placeholder polyline {
  stroke-dasharray: var(--offset);
  stroke-dashoffset: var(--offset);
  stroke: black;
}
.magic-placeholder {
  filter: blur(0);
}
.magic-placeholder[status=to] {
  opacity: 0;
  transition: opacity 2s;
}
.magic-placeholder[status=noPrevice] {
  opacity: 0;
  visibility: hidden;
}
.magic-placeholder[status=from] polyline {
  transition: stroke-dashoffset 2s;
  stroke-dashoffset: 0;
}
.magic-target {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  opacity: 0;
}
.magic-target[status=from] {
  opacity: 0;
}
.magic-target[status=to] {
  opacity: 1;
  transition: opacity 0.5s;
}
.magic-target[status=noPrevice] {
  opacity: 1;
}