<>
/* 骨架屏-通用样式 */
body {
padding: 0;
margin: 0;
}
.skeleton {
display: flex;
flex-direction: column;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #fff;
z-index: 9;
}
.skeleton-text {
background-image: linear-gradient(90deg#f8f8f8 25%#f3f3f3 37%#f8f8f8 63%) !important;
background-size: 400% 100% !important;
border: none !important;
height: 1.25vw;
margin: 0.83333vw 0;
border-radius: 0.41667vw;
animation: skeleton-loading 1.4s infinite ease !important;
}
.skeleton-text-white {
background-image: linear-gradient(90deg#fff 25%#f9f9f9 37%#fff 63%) !important;
background-size: 400% 100% !important;
border: none !important;
width: 5.20833vw;
height: 1.25vw;
margin: 0.83333vw 0;
border-radius: 0.41667vw;
animation: skeleton-loading 1.4s infinite ease !important;
}
.skeleton-text-dark {
background-image: linear-gradient(90deg#f0f0f0 25%#E9E9E9 37%#f0f0f0 63%) !important;
background-size: 400% 100% !important;
border: none !important;
width: 5.20833vw;
height: 1.25vw;
margin: 0.83333vw 0;
border-radius: 0.41667vw;
animation: skeleton-loading 1.4s infinite ease !important;
}
.skeleton-advatar {
width: 2.60417vw;
height: 2.60417vw;
display :flex;
justify-content: center;
align-items: center;
border-radius: 100%;
background-color: #F6F6F6;
}
.skeleton-advatar img{
width: 1.5625vw;
height: 1.5625vw;
opacity: 0.8;
}
.skeleton-card{
border: 1px solid #eaeaea;
padding: 0.46875vw 1.04167vw;
margin: 1.5625vw 0;
border-radius: 0.3125vw;
}
.skeleton-image {
background-image: linear-gradient(90deg#f0f2f5 25%#e6e8eb 37%#f0f2f5 63%) !important;
background-size: 400% 100% !important;
height: 35.83333vw;
border: none !important;
border-radius: 0.20833vw;
animation: skeleton-loading 1.4s infinite ease !important;
}
.skeleton-image::before {
content: '';
width: 100%;
height: 100%;
border-radius: 0.20833vw;
display: block;
background:url('https://image.zhihuishu.com/zhs/b2cm/base1/202506/d6c9367f06e14ef1bb46d7419570ee4f.png') no-repeat center;
background-size: 20%;
opacity: 0.3;
}
@keyframes skeleton-loading {
0% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.skeleton-h-40{
height: 2.08333vw;;
}
< id="skeleton-">.skeleton-header {
display: flex;
padding: 12px 48px;
justify-content: space-between;
align-items: center;
align-self: stretch;
background: #F4F4F4;
}
.skeleton-header .right{
display: flex;
gap: 20px;
align-items: center;
}
.skeleton-box-ml{
margin-left: 120px;
}
.skeleton-p-120{
padding: 0 120px;
}
.skeleton-flex{
display: flex;
justify-content: space-between;
align-items: center;
}
.skeleton-default{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: #ffffff;
}
.skeleton-default-header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 48px;
background: #F4F4F4;
}
.skeleton-default-header .left{
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.skeleton-advatar-white{
width: 91px;
height: 91px;
background: white;
border-radius: 100%;
}
.skeleton-advatar-dark{
width: 60px;
height: 60px;
background: #E6E6E6;
border-radius: 100%;
}
.skeleton-default-header .right{
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.skeleton-default-header .right .advatar{
width: 40px;
height: 40px;
background: #E6E6E6;
border-radius: 100%;
}
.skeleton-default-content{
position: relative;
flex: 1;
display: flex;
width: 100vw;
justify-content: center;
align-items: center;
}
.skeleton-default-content .box-left{
position: absolute;
display: flex;
padding: 30px;
flex-direction: column;
align-items: flex-start;
border-radius: 20px;
border: 0.651px solid #EEE;
opacity: 0;
background: #F4F4F4;
animation: skeleton-left-loading 5s infinite ease forwards !important;
}
.skeleton-default-content .box-right{
position: absolute;
display: flex;
padding: 30px;
flex-direction: column;
align-items: flex-start;
border-radius: 20px;
border: 0.651px solid #EEE;
opacity: 0;
background: #F4F4F4;
animation: skeleton-right-loading 5s infinite ease forwards !important;
}
/* 深色 */
.skeleton-default-content .box-center{
position: absolute;
display: flex;
padding: 36px 36px 22px;
flex-direction: column;
align-items: flex-start;
border-radius: 23px;
border: 0.72px solid #F2F2F2;
background: #FFF;
box-shadow: 0px 3.6px 9px 0px rgba(0000.06);
/* opacity: 0; */
animation: skeleton-center-loading 5s infinite ease !important;
}
.skeleton-default-content .skeleton-box-cicle{
position: relative;
}
@keyframes skeleton-left-loading {
49% {
opacity: 0;
}
50% {
transform: translateX(-100px);
opacity: 0.2;
}
66% {
transform: translateX(-100px) rotate(-15deg);
transform-origin: right;
opacity: 0.6;
}
100% {
transform: translateX(0px) rotate(0deg);
opacity: 0;
}
}
@keyframes skeleton-right-loading {
49% {
opacity: 0;
}
50% {
transform: translateX(100px);
opacity: 0.2;
}
66% {
transform: translateX(100px) rotate(15deg);
transform-origin: left;
opacity: 0.6;
}
100% {
transform: translateX(0px) rotate(0deg);
opacity: 0;
}
}
@keyframes skeleton-center-loading {
0% {
transform: scale(0.8);
opacity: 0.8;
}
50% {
transform: scale(1);
opacity: 1;
}
80% {
transform: scale(1);
opacity: 0.8;
}
90% {
opacity: 0.6;
}
100% {
transform: scale(0.8);
opacity: 0.2;
}
}
.skeleton-level{
width:100%;
height: 100%;
display: flex;
gap: 3vw;
}
.skeleton-level__left{
width: 100%;
position: relative;
}
.skeleton-level__left .skeleton-box{
display: flex;
align-items: center;
}
.skeleton-level__svg{
width: 100%;
height: fit-content;
position: absolute;
}
.skeleton-level__right{
display: flex;
flex-direction: column;
position: relative;
}