skeleton.wxss 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. .t-float-left {
  2. float: left;
  3. }
  4. .t-float-right {
  5. float: right;
  6. }
  7. @keyframes tdesign-fade-out {
  8. from {
  9. opacity: 1;
  10. }
  11. to {
  12. opacity: 0;
  13. }
  14. }
  15. .hotspot-expanded.relative {
  16. position: relative;
  17. }
  18. .hotspot-expanded::after {
  19. content: '';
  20. display: block;
  21. position: absolute;
  22. left: 0;
  23. top: 0;
  24. right: 0;
  25. bottom: 0;
  26. transform: scale(1.5);
  27. }
  28. .t-skeleton {
  29. display: flex;
  30. box-sizing: border-box;
  31. }
  32. .t-skeleton__avatar {
  33. flex-shrink: 0;
  34. background-color: #eeeeee;
  35. height: 64rpx;
  36. width: 64rpx;
  37. }
  38. .t-skeleton__item {
  39. background-color: #eeeeee;
  40. }
  41. .t-skeleton__row {
  42. display: flex;
  43. }
  44. .t-skeleton__row:not(:first-child) {
  45. margin-top: 24rpx;
  46. }
  47. .t-skeleton--animate-flashed {
  48. animation: t-flashed 0.6s infinite alternate;
  49. }
  50. @keyframes t-flashed {
  51. 0% {
  52. opacity: 1;
  53. }
  54. 100% {
  55. opacity: 0.6;
  56. }
  57. }
  58. .t-skeleton--animate-gradient .t-skeleton__item {
  59. background: linear-gradient(to right, #eeeeee 10%, rgba(238, 238, 238, 0.4) 20%, #eeeeee 30%);
  60. background-size: 400% 50%;
  61. width: 100%;
  62. animation: t-gradient 1s ease-in-out infinite;
  63. }
  64. @keyframes t-gradient {
  65. 0% {
  66. background-position: 100% 50%;
  67. }
  68. 100% {
  69. background-position: 0% 50%;
  70. }
  71. }