因为接口问题只能显示静态图片
核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。
html部分
<div class="list-box70">
<div class="pic70"></div>
<div class="list70">
<span class="span70"></span>
<div class="span-div70">
<span class="span701"></span>
<span class="span702"></span>
</div>
</div>
</div>css 部分代码
.list-box70{
width: 200px;
height: 76px;
position: relative;
background-color: #f8f8f8;
border-radius: 12px;
padding: 16px;
display: flex;
box-sizing: border-box;
}
.pic70{
width: 44px;
height: 44px;
position: relative;
background-color: #e4e4e4;
border-radius: 4px;
animation: eff70 1.8s linear infinite;
}
.list70{
position: relative;
display: flex;
flex-direction: column;
margin-left: 10px;
}
.span70{
width: 114px;
height: 20px;
position: relative;
border-radius: 4px;
background-color: #e4e4e4;
animation: eff70 2s linear infinite;
}
.span-div70{
position: relative;
margin-top: 10px;
display: flex;
}
.span701,.span702{
width: 65px;
height: 14px;
position: relative;
border-radius: 4px;
background-color: #e4e4e4;
animation: eff70 2.2s linear infinite;
}
.span702{
width: 39px;
margin-left: 10px;
animation: eff70 2.4s linear infinite;
}
@keyframes eff70{
0%{
opacity: 0.2;
}
50%{
opacity: 1;
}
100%{
opacity: 0.2;
}
}1、定义整体列表块通用样式，设置一个浅一点的背景色，设置 display: flex 布局。
2、利用 flex 布局，分别写出列表块中的每个小的矩形，并且设置相关的样式颜色等。
3、给列表块里的每个小的矩形设置 animation 动画，并且设置相关参数，每个动画时长递增 0.2s 。
4、设置动画关键帧，定义变化 opacity 透明属性，让列表块中的小的矩形由浅到深循环变化，这样就形成了视觉上列表块内容在加载的效果。
完整代码如下
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="list-box70">
<div class="pic70"></div>
<div class="list70">
<span class="span70"></span>
<div class="span-div70">
<span class="span701"></span>
<span class="span702"></span>
</div>
</div>
</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;
}
.list-box70{
width: 200px;
height: 76px;
position: relative;
background-color: #f8f8f8;
border-radius: 12px;
padding: 16px;
display: flex;
box-sizing: border-box;
}
.pic70{
width: 44px;
height: 44px;
position: relative;
background-color: #e4e4e4;
border-radius: 4px;
animation: eff70 1.8s linear infinite;
}
.list70{
position: relative;
display: flex;
flex-direction: column;
margin-left: 10px;
}
.span70{
width: 114px;
height: 20px;
position: relative;
border-radius: 4px;
background-color: #e4e4e4;
animation: eff70 2s linear infinite;
}
.span-div70{
position: relative;
margin-top: 10px;
display: flex;
}
.span701,.span702{
width: 65px;
height: 14px;
position: relative;
border-radius: 4px;
background-color: #e4e4e4;
animation: eff70 2.2s linear infinite;
}
.span702{
width: 39px;
margin-left: 10px;
animation: eff70 2.4s linear infinite;
}
@keyframes eff70{
0%{
opacity: 0.2;
}
50%{
opacity: 1;
}
100%{
opacity: 0.2;
}
}本文共 211 个字数,平均阅读时长 ≈ 1分钟
评论 (0)