大家好,我是 Just,这里是「设计师工作日常」,今天分享的是用 css 打造一个极简的列表块加载动效。
最新文章通过公众号「设计师工作日常」发布。
目录
- 整体效果
- 核心代码
- html 代码
- css 部分代码
- 完整代码如下
- html 页面
- css 样式
- 页面渲染效果
整体效果
💎知识点:
1️⃣animation
动画
2️⃣flex
布局
3️⃣opacity
透明属性
🔑思路:
写好列表块整体布局,然后利用不同的动画时长调整变化透明度,来实现视觉上的列表正在加载的效果。
适用于 app 列表加载延迟等页面场景。
核心代码部分,简要说明了写法思路;完整代码在最后,可直接复制到本地运行。
核心代码
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>
html 搭建列表块整体布局。
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;}
}
页面渲染效果
以上就是所有代码,以及简单的思路,希望对你有一些帮助或者启发。
[1] 原文阅读
[2] 《有趣的css》,访问网址:funcss.liujueyi.cn,欢迎大家访问。
我是 Just,这里是「设计师工作日常」,求点赞求关注!