网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款纯 CSS Skeleton骨架加载程序库,在数据加载时为块内容(例如文本、卡片、图像)创建动画骨架预览特效。
支持的骨架类型:
Circle (like avatar)
HeadLine
Line
Square Box
Divider (hr)
Card
以上样式可以任意组合
使用方法:
1.在html页面中加载css样式文件
<link rel="stylesheet" href="index.min.css" />
2.向页面添加骨架加载样式。
<!-- Circle -->
<div class="ssc-circle"></div>
<!-- Headline -->
<div class="ssc-head-line"></div>
<!-- Line -->
<div class="ssc-line"></div>
<!-- Divider -->
<div class="ssc-hr"></div>
<!-- Square Box -->
<div class="ssc-square"></div>
<!-- Card class -->
<div class="ssc-card"></div>
<!-- Card With Content -->
<div class="ssc-wrapper">Card with content</div>
<!-- Main parent class -->
<div class="ssc"></div>
3.创建一个复杂的骨架加载样式。
<div class="ssc ssc-card" style="max-width: 1120px">
<div class="ssc-wrapper">
<div class="flex align-start">
<div class="mr w-70">
<div class="ssc-square mb" style="height: 200px"></div>
<div class="ssc-square mb" style="height: 35px"></div>
<div class="ssc-line"></div>
<div class="ssc-line w-90"></div>
<div class="ssc-line w-40"></div>
</div>
<div class="w-30">
<div class="ssc-line mb w-60"></div>
<div class="ssc-head-line mb"></div>
<div class="ssc-line mb w-80"></div>
<div class="ssc-line mb w-40"></div>
<div class="ssc-line mb w-30"></div>
<div class="ssc-line mb w-60"></div>
<div class="ssc-line mb"></div>
<div class="ssc-line mb w-70"></div>
<div class="ssc-line mb w-40"></div>
<div class="ssc-line mb w-30"></div>
</div>
</div>
</div>
</div>
4.重写默认CSS变量,自定义骨架加载样式。
$skeleton-element-color: rgba(0, 0, 0, 0.17) !default;
$skeleton-loading-animation-time: 1.3s !default;
$skeleton-margin-standart: 16px !default;
$skeleton-margin-small: $skeleton-margin-standart / 2 !default;
$skeleton-card-box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.17) !default;
$skeleton-card-background-color: #ffffff !default;
$skeleton-card-border-radius: 5px !default;
$skeleton-circle-size: 50px !default;
$skeleton-hr-height: 2px !default;
$skeleton-line-border-radius: 15px !default;
$skeleton-line-height: 12px !default;
$skeleton-line-margin-bottom: 8px !default;
$skeleton-headline-height: $skeleton-line-height * 2 !default;
$skeleton-square-height: 150px !default;
转载请注明来源:css为数据加载时给内容添加动画特效代码(Skeleton骨架动画)
本文永久链接地址:https://www.moyouyouw.cn/code/722.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论