时间戳

首页 > 解决方案 > 加载时的 CSS 缩放效果 - 隐藏 DIV/图像加载延迟

javascript - 加载时的 CSS 缩放效果 - 隐藏 DIV/图像加载延迟

问题描述

我有一个有很多图片的网站，我已经有延迟加载但我希望在加载图片时添加一些效果

我希望在图像“加载”时重现“缩放”效果，如下所示： https ://masonry.desandro.com/

请看看这个： https ://tympanus.net/Development/GridLoadingEffects/index8.html

您会注意到图像已经加载时没有效果。从服务器加载图像时，我尝试隐藏“加载延迟”。也许动画不是正确的把戏！

目标是让加载更柔和，现在它像任何图像一样加载，但效果不是很好。（您可以查看www.socloze.com进行审核）。

你认为我们可以在纯 CSS（没有 JS）中做到这一点吗？

标签： javascripthtmlcss

解决方案

您可以添加初始动画：

.img-anim {
  width: 100px;
  height: 100px;
  background-image: url('https://lh3.googleusercontent.com/proxy/Dv3m6UV5rC0KL0or-iOT-6i1I4i4I3CXNh-XU0WZ5-yG_vbYme6A8NhIasiwLon0td1DGbVFBDOEwi3LK7gegowFkjQEiJpPBg');
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  animation-name: scale-in;
  animation-duration: .4s;
}

@keyframes scale-in {
  0% {
    background-size: 0%;
  }
  100% {
    background-size: 100%;
  }
}
<div class="img-anim"></div>

推荐阅读