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

Question

材料设计指南提供图像加载模式.

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

请注意,我知道有一个类似的问题,但它是针对本机android开发(Java).

总结一下,它可以做到,如果是这样,它会完成吗？

Answer 1

目前尚无gamma()CSS过滤器,但您可以尝试使用brightness().然而,这不是一回事,但也许足够接近雪茄了？

在下面的示例中,我使用cubic-bezier(0.7,0,0.6,1)计时功能作为Google Material Design的"重型移动"缓动功能的近似值,但您可以使用任何其他立方贝塞尔曲线定义来更好地逼近Googles的MD图表中显示的计时功能.这是概念验证示例,JS添加了供应商前缀.

注意:如果动画看起来不对,那是因为在动画运行之前未加载的图像.如果是这种情况,请重新运行代码段

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%);
  }
}

<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>

关键帧定义的一点解释:

• 百分比止损根据您提供的Google MD图表决定.总持续时间为3秒,66.7%对应于2s时间点和83.3%2.5s时间点.
• 由于滤波器无法堆叠,我们必须手动计算饱和度值(在83.3%时间点 - 如果我们不声明饱和度,它将重置为100%).该值取决于您使用的三次贝塞尔曲线.对于我在代码片段中使用的曲线,值应该87%在83.3%左右.这是一个纯粹的近似,并从这里推断.