javascript - 具有元素结构概述的预加载器屏幕

Question

引用这个link , 什么技术或语言用于以这种轮廓结构方式执行网站的预加载器屏幕？所有元素在加载时执行扫描闪耀。

给定的网站是 www.youtube.com，这也可以在 facebook、amazon、medium 等上找到。

请建议如何开始？

Answer 1

这叫做微光。您可以使用 HTML 和 CSS 制作微光。你显示微光，直到你的数据加载并使用 javascript 隐藏/删除它。以下是示例代码。

body{ 
   border: 2px solid #f6f7f8;
  padding: 100px; 
}

.shine {
  background: #f6f7f8;
  background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
  background-repeat: no-repeat;
  background-size: 800px 104px; 
  display: inline-block;
  position: relative; 
  
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: forwards; 
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: placeholderShimmer;
  -webkit-animation-timing-function: linear;
  }

box {
  height: 104px;
  width: 100px;
}

div {
  display: inline-flex;
  flex-direction: column; 
  margin-left: 25px;
  margin-top: 15px;
  vertical-align: top; 
}

lines {
  height: 10px;
  margin-top: 10px;
  width: 200px; 
}

photo {
  display: block!important;
  width: 325px; 
  height: 100px; 
  margin-top: 15px;
}

@-webkit-keyframes placeholderShimmer {
  0% {
    background-position: -468px 0;
  }
  
  100% {
    background-position: 468px 0; 
  }
}

<box class="shine"></box>

<div>
<lines class="shine"></lines>
<lines class="shine"></lines>
<lines class="shine"></lines>
</div>

<photo class="shine"></photo>
<photo class="shine"></photo>

<br>

<box class="shine"></box>

<div>
<lines class="shine"></lines>
<lines class="shine"></lines>
<lines class="shine"></lines>
</div>