有趣的css - 图片懒加载小动效

最新推荐文章于 2024-05-29 10:53:24 发布

设计师工作日常

最新推荐文章于 2024-05-29 10:53:24 发布

阅读量910

点赞数 37

分类专栏：有趣的css 文章标签： css 前端图片懒加载动效 ux 用户体验

本文链接：https://blog.csdn.net/justliu1989/article/details/136940863

版权

有趣的css 专栏收录该内容

69 篇文章 1 订阅

订阅专栏

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是用 css 实现图片内容懒加载小动效，适用于图片列表懒加载等场景。

《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。

整体效果

知识点：
① css 绘制三角形、
② animation 动画属性。

使用 css 绘制出图片图标，通过 animation 动画分别让图标的各部分动起来。

用 css 实现图片内容懒加载小动效，适用于图片列表懒加载等场景。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<div class="loading39">
  <span class="round39"></span>
  <span class="one-sj39"></span>
  <span class="two-sj39"></span>
</div>

3 个 span 标签分别作为图片图标的 3 个主体部分( 1 个圆、2 个三角形)。

css 部分代码

.loading39{
  width: 88px;
  height: 88px;
  background-color: #ffffff;
  position: relative;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  overflow: hidden; /*限制益处*/
}
/*圆形*/
.round39{
  width: 18px;
  height: 18px;
  border-radius: 9px;
  background-color: #d6d6d6;
  position: absolute;
  animation: round39-eff 3s both infinite;
}
/*第一个三角形*/
.one-sj39{
  border-bottom: 30px solid #ddd;
  border-left: 24px solid transparent;
  border-right: 24px solid transparent;
  position: absolute;
  animation: one-sj39-eff 3s both infinite;
}
/*第二个三角形*/
.two-sj39{
  border-bottom: 44px solid #d1d1d1;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  position: absolute;
  right: 0;
  animation: two-sj39-eff 3s both infinite;
}
@keyframes round39-eff{
  0%{
    top: 16px;
    left: 88px;
  }
  50%{
    top: 14px;
    left: 24px;
  }
  100%{
    top: 16px;
    left: -18px;
  }
}
@keyframes one-sj39-eff{
  0%{
    bottom: -30px;
  }
  50%{
    bottom: 0;
  }
  100%{
    bottom: -30px;
  }
}
@keyframes two-sj39-eff{
  0%{
    bottom: -44px;
  }
  50%{
    bottom: 0;
  }
  100%{
    bottom: -44px;
  }
}

1、分别绘制一个圆形，以及两个三角形，这里三角形是通过 border 方法来实现的，实现代码可看 css 部分注释说明。

2、绘制好整体图标形状后，再给 3 个主体分别加上 animation 动画属性，然后设置不同的参数：
如圆形我们设置为从右至左出现，然后消失；
三角形部分则从下往上出现，然后再往下消失。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>图片懒加载小动效</title>
  </head>
  <body>
    <div class="app">
      <div class="loading39">
        <span class="round39"></span>
        <span class="one-sj39"></span>
        <span class="two-sj39"></span>
      </div>
    </div>
  </body>
</html>

css 样式

/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading39{
  width: 88px;
  height: 88px;
  background-color: #ffffff;
  position: relative;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  overflow: hidden;
}
.round39{
  width: 18px;
  height: 18px;
  border-radius: 9px;
  background-color: #d6d6d6;
  position: absolute;
  animation: round39-eff 3s both infinite;
}
.one-sj39{
  border-bottom: 30px solid #ddd;
  border-left: 24px solid transparent;
  border-right: 24px solid transparent;
  position: absolute;
  animation: one-sj39-eff 3s both infinite;
}
.two-sj39{
  border-bottom: 44px solid #d1d1d1;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  position: absolute;
  right: 0;
  animation: two-sj39-eff 3s both infinite;
}
@keyframes round39-eff{
  0%{
    top: 16px;
    left: 88px;
  }
  50%{
    top: 14px;
    left: 24px;
  }
  100%{
    top: 16px;
    left: -18px;
  }
}
@keyframes one-sj39-eff{
  0%{
    bottom: -30px;
  }
  50%{
    bottom: 0;
  }
  100%{
    bottom: -30px;
  }
}
@keyframes two-sj39-eff{
  0%{
    bottom: -44px;
  }
  50%{
    bottom: 0;
  }
  100%{
    bottom: -44px;
  }
}