0 喜欢

CSS骨架屏载入动画

admin
admin
2021-07-28 10:30:41 阅读 223

在本教程中,我们将使用 CSS 创建一个骨架屏加载动画效果。当页面加载数据时,骨架屏提供虚拟的布局效果。可以让用户知道内容正在加载中,并且与整页加载动画不同,可以使用此技术逐渐加载页面的各个元素。

CSS骨架屏

今天我们将为视频卡组件创建一个骨架屏,如下所示:

对于 HTML,我们只需要单个空 div 元素:

<div class="video"></div>

现在开始编写CSS,我们将使用 :empty 伪类,它只会在视频 div 为空(包括空白)时显示骨架屏,并在注入内容后消失。开发人员通常使用切换 class 来实现相同的效果,但这种解决方案要更加简单:

.video { width: 320px; height: 250px; } .video:empty { cursor: progress; }

视频卡组件包含 4 个元素,一个半透明的叠加层,我们将对其进行动画处理以提供正在获取数据的错觉,然后是缩略图、头像和标题文本的占位布局。这 4 个元素是使用背景 CSS 渐变创建的。

.video:empty { cursor: progress; background: linear-gradient(0.25turn, transparent, #fff, transparent), linear-gradient(#eee, #eee), radial-gradient(40px circle at 20px 20px, #EEE 50%, transparent 51%), linear-gradient(#eee, #eee); background-repeat: no-repeat; background-size: 320px 250px,320px 200px, 40px 40px, 270px 40px; background-position: -320px 0, 0 0, 0 210px, 50px 210px; animation: loading 1.5s infinite; }

loading 动画:

@keyframes loading { to { background-position: 320px 0, 0 0, 0 210px, 50px 210px; } }

VUE示例

苹果手机兼容处理

部分苹果手机,流光颜色不对,可以替换以下代码。

linear-gradient(0.25turn, rgba(255, 255, 255, 0), #fff, rgba(255, 255, 255, 0))

关于作者
admin
admin
admin@ifront.net
 获得点赞 42
 文章阅读量 38060
文章标签