water_xcx/miniprogram_npm/tdesign-miniprogram/skeleton/skeleton.wxss

105 lines
1.8 KiB
Plaintext
Raw Permalink Normal View History

2025-04-15 15:44:51 +08:00
.t-float-left {
float: left;
}
.t-float-right {
float: right;
}
@keyframes tdesign-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hotspot-expanded.relative {
position: relative;
}
.hotspot-expanded::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: scale(1.5);
}
.t-skeleton {
box-sizing: border-box;
}
.t-skeleton__row {
display: flex;
margin-bottom: 16px;
align-items: center;
justify-content: space-between;
}
.t-skeleton__row:only-child,
.t-skeleton__row:last-child {
margin-bottom: 0;
}
.t-skeleton__col {
background-color: #eeeeee;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
}
.t-skeleton__col:first-child:last-child,
.t-skeleton__col:last-child {
margin-right: 0;
}
.t-skeleton--type-text {
width: 100%;
height: 16px;
border-radius: 2px;
}
.t-skeleton--type-rect {
width: 100%;
height: 16px;
border-radius: 4px;
}
.t-skeleton--type-circle {
width: 48px;
height: 48px;
border-radius: 50%;
flex-shrink: 0;
}
.t-skeleton--animation-gradient {
position: relative;
overflow-x: hidden;
}
.t-skeleton--animation-gradient::after {
content: ' ';
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0));
animation: t-skeleton--gradient 1.5s linear 2s infinite;
}
.t-skeleton--animation-flashed {
animation: t-skeleton--flashed 2s linear 2s infinite;
}
@keyframes t-skeleton--gradient {
0% {
transform: translateX(-100%) skewX(-15deg);
}
100% {
transform: translateX(100%) skewX(-15deg);
}
}
@keyframes t-skeleton--flashed {
0% {
opacity: 1;
}
50% {
background-color: rgba(230, 230, 230, 0.3);
opacity: 0.3;
}
100% {
opacity: 1;
}
}