资讯新闻 不要因为睡懒觉，而感到自责；因为你起来，也创造不了什么价值；你能在浪费时间中获得乐趣，就不是浪费时间
在最早之前，有想过给小程序首页列表做一个滚动加载动画！是什么的呢？我想做那种是要当列表出现在屏幕上之后会有一个动态加载动画
划水看到纯CSS列表加载滚动加载动画，无奈小程序无法支持
效果预览
CSS特性
主要是2个刚出也算有点时间的CSS新特性animation-timeline和animation-range
animation-timeline:view();
animation-range:entry 0% cover 40%;小程序上测试目前他是无法识别CSS；谷歌，Edge这类型主流浏览器最新版本都是支持的，这次苹果Safari除外
源码预览
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes fadeIn {
from {
opacity: 0;
scale: 0.5;
}
to {
opacity: 1;
scale: 1;
}
}
.fade-in-view {
animation: fadeIn linear;
animation-timeline:view();
animation-range:entry 0% cover 20%;
height: 200px;
background-color: #39393a;
margin: 28px;
}
</style>
</head>
<body>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
<div class="fade-in-view">1</div>
</body>
</html>