使用css过滤器实现材质图像加载模式

Question

材料设计指南提供image loading pattern。

由于有很多人遵循这些指导原则，我想知道它的实现是否存在于css中？似乎使用带有过滤器转换的css filters，它可能是可能的，但我不确定它是否可以按照指南的描述进行动画处理。

请注意，我知道有a similar question，但它适用于本机Android开发（Java）。

总结一下，可以这样做，如果是的话，是否可以完成？

Answer 1

CSS过滤器尚无brightness()，但您可以尝试使用cubic-bezier(0.7,0,0.6,1)。然而，这不是一回事，但也许足够接近雪茄了？

在下面的示例中，我使用html, body { margin: 0; padding: 0; } .images { overflow: hidden; } .images img { /* Animation */ animation: material-design__image 3s; animation-fill-mode: forward; /* Layout only */ float: left; margin-right: 1rem; width: calc(50vw - 2rem); } /* Approximation of Material Design specifications */ @keyframes material-design__image { 0% { opacity: 0; filter: saturate(20%) brightness(125%); } 66.7% { opacity: 1; } 83.3% { filter: saturate(87%) brightness(100%); } 100% { filter: saturate(100%) brightness(100%); } }计时功能作为approximation of Google Material Design的“重型移动”缓动功能，但您可以使用任何其他立方贝塞尔曲线定义来更好地逼近计时功能在Googles的MD图表中显示。以下是概率验证示例，vendor prefixes added by JS。

注意：如果动画看不到，那是因为在动画运行之前未加载的图像。如果是这种情况，请重新运行代码段

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="images">
  <img src="http://i.imgur.com/5nDXHEZ.jpg" alt="" title="" />
  <img src="http://i.imgur.com/hQNpUeA.jpg" alt="" title="" />
</div>

66.7%

对关键帧定义的一点解释：

• 根据您提供的Google MD图表决定停止百分比。总持续时间为3秒，83.3%对应于2s时间点左右，87%对应2.5s时间点。
• 由于过滤器无法堆叠，我们必须手动计算饱和度值（在83.3％时间点 - 如果我们不声明饱和度，它将重置为100％）。该值取决于您使用的三次贝塞尔曲线。对于我在代码段中使用的曲线，值应该在static const char* ALLOCATION_TAG = "App_TransferFiles_TAG"; // Create a client ClientConfiguration config; config.scheme = Scheme::HTTP; config.connectTimeoutMs = 30000; config.requestTimeoutMs = 30000; m_s3Client = Aws::MakeShared<S3Client>(ALLOCATION_TAG, config); TransferClientConfiguration transferConfig; transferConfig.m_uploadBufferCount = 20; m_transferClient = Aws::MakeShared<TransferClient>(ALLOCATION_TAG, m_s3Client, transferConfig); GetObjectRequest getObjectRequest; getObjectRequest.SetBucket(""MyBucketName"); getObjectRequest.SetKey("My_CONTENT_FILE_KEY"); GetObjectOutcome getObjectOutcome = m_s3Client->GetObject(getObjectRequest); 附近，为83.3％。这是纯粹的近似，并从here推断。