html - 如何使用 CSS Mask 为骨架屏幕制作动画

Question

我正在尝试为看起来像 this one 的骨架添加一个微妙的微光动画。 .我目前有一个看起来像这样的屏幕(参见 CodePen ):

我正在尝试编写一个可以像这样接受 SVG 的骨架组件:

<div class="skeleton" aria-busy="true">
  <svg width="233" height="68" viewBox="0 0 233 68" xmlns="http://www.w3.org/2000/svg">
    <g opacity="0.8">
      <rect x="79" y="32" width="154" height="11" rx="2" fill="black" fill-opacity="0.07"/>
      <rect width="179" height="20" rx="2" fill="black" fill-opacity="0.07"/> 
      <rect x="79" y="52" width="84" height="11" rx="2" fill="black" fill-opacity="0.07"/>
      <rect y="26" width="67" height="42" rx="2" fill="black" fill-opacity="0.07"/>
    </g>
  </svg>
</div>

这是我用来为 SVG 上方的闪光设置动画的 CSS:

.skeleton {
  overflow: hidden;
  position: relative;
}

.skeleton::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(to right, rgb(243, 242, 241) 0%, rgb(237, 235, 233) 50%, rgb(243, 242, 241) 100%) 0px 0px / 90% 100% no-repeat rgb(243, 242, 241);
  transform: translateX(-100%);
  
  animation-name: skeleton-animation;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-direction: normal;
  animation-iteration-count: infinite;
}

@keyframes skeleton-animation {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

我正在尝试弄清楚如何使用描述的某种掩码 here , 这样动画微光只发生在 SVG 上。

Answer 1

一种方法是使用 SVG 作为 mask-image 并更新线性渐变 background-position:

示例(使用您自己的渐变颜色进行更新):

.skeleton {
  overflow: hidden;
  position: relative;
  width: 233px;
  height: 68px;
  background: linear-gradient(to right, rgb(143, 142, 141) 0%, rgb(237, 235, 233) 50%, rgb(143, 142, 141) 100%) 0px 0px / 100% 100% rgb(243, 242, 241);
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMzIiBoZWlnaHQ9IjY4IiB2aWV3Qm94PSIwIDAgMjMzIDY4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICAgIDxnIG9wYWNpdHk9IjAuOCI+DQogICAgICA8cmVjdCB4PSI3OSIgeT0iMzIiIHdpZHRoPSIxNTQiIGhlaWdodD0iMTEiIHJ4PSIyIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIxIi8+DQogICAgICA8cmVjdCB3aWR0aD0iMTc5IiBoZWlnaHQ9IjIwIiByeD0iMiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMSIvPiANCiAgICAgIDxyZWN0IHg9Ijc5IiB5PSI1MiIgd2lkdGg9Ijg0IiBoZWlnaHQ9IjExIiByeD0iMiIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMSIvPg0KICAgICAgPHJlY3QgeT0iMjYiIHdpZHRoPSI2NyIgaGVpZ2h0PSI0MiIgcng9IjIiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjEiLz4NCiAgICA8L2c+DQogIDwvc3ZnPg==");
  margin: 1em;
  animation: linearAnim 2s infinite linear
}

@keyframes linearAnim {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 230px 0px;
  }
}

/* demo purpose only */
.skeleton + .skeleton {

  background: linear-gradient(to right, rgba(143, 142, 141,0.75) 0%, rgba(237, 235, 233, 0.75) 50%, rgba(143, 142, 141, 0.75) 100%) 0px 0px / 100% 100% rgba(243, 242, 241, 0.5);
  }
  .skeleton.blue {
  background-color:blue;
  }
  .skeleton.red {
  background-color:red;
  }
  .skeleton.yellow {
  background-color:yellow;
  }
  .skeleton.green {
  background-color:green;
  }
  .flex {display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding-top:0.6em;font-size:10px;color:#fff8;}
body {background:#bee; display:grid;grid-template-columns:repeat(auto-fill, 300px);}

<div class="skeleton" aria-busy="true"></div>
<div class="skeleton blue" aria-busy="true"></div>
<div class="skeleton red" aria-busy="true"></div>
<div class="skeleton yellow" aria-busy="true"></div>
<div class="skeleton green flex" aria-busy="true">On its way ...</div>

这是一个类似的问题，但方法不同 CSS animation, only render overlay on specific elements

---

编辑

如果要求将您的 SVG 放在 HTMl 中，您可以给它一个 ID 并即时进行编码部分

// https://www.w3docs.com/snippets/javascript/how-to-encode-and-decode-strings-with-base64-in-javascript.html

let svg = document.getElementById("mask").outerHTML
let sk =document.querySelector(".skeleton");
let encodedString = btoa(svg);
sk.setAttribute("style", " -webkit-mask-image: url('data:image/svg+xml;base64," + encodedString + "')");

.skeleton {
  overflow: hidden;
  position: relative;
  width: 233px;
  height: 68px;
  background: linear-gradient( to right, rgb(143, 142, 141) 0%, rgb(237, 235, 233) 50%, rgb(143, 142, 141) 100%) 0 0 /  200% 100%   rgb(243, 242, 241);
  margin: 1em;
  animation: linearAnim 1.25s infinite linear;
}

@keyframes linearAnim {
 
  100% {
    background-position: -200% 0;
  }
}

#mask {
  display: none;
}

<div class="skeleton" aria-busy="true">
<svg id="mask" width="233" height="68" viewBox="0 0 233 68" xmlns="http://www.w3.org/2000/svg">
    <g opacity="0.5">
      <rect x="79" y="32" width="154" height="11" rx="2" fill="black" fill-opacity="0.5"/>
      <rect width="179" height="20" rx="2" fill="black" fill-opacity="0.5"/> 
      <rect x="79" y="52" width="84" height="11" rx="2" fill="black" fill-opacity="0.5"/>
      <rect y="26" width="67" height="42" rx="2" fill="black" fill-opacity="0.5"/>
    </g>
  </svg>
</div>