my.css 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. @charset "UTF-8";
  2. /**
  3. * 下方引入的为uView UI的集成样式文件,为scss预处理器,其中包含了一些"u-"开头的自定义变量
  4. * uView自定义的css类名和scss变量,均以"u-"开头,不会造成冲突,请放心使用
  5. */
  6. page {
  7. background-color: #f4f6f8;
  8. }
  9. .home {
  10. position: relative;
  11. }
  12. .home .userinfo {
  13. display: -webkit-box;
  14. display: -webkit-flex;
  15. display: flex;
  16. -webkit-box-orient: vertical;
  17. -webkit-box-direction: normal;
  18. -webkit-flex-direction: column;
  19. flex-direction: column;
  20. -webkit-box-align: center;
  21. -webkit-align-items: center;
  22. align-items: center;
  23. padding: 30rpx 0;
  24. z-index: 100;
  25. }
  26. .home .userinfo .u-skeleton-fillet {
  27. color: #ffffff;
  28. width: 100vw;
  29. text-align: center;
  30. }
  31. .home .corrugated {
  32. bottom: -2rpx;
  33. left: 0;
  34. position: absolute;
  35. width: 100%;
  36. height: 50%;
  37. overflow: hidden;
  38. z-index: 0;
  39. }
  40. .home .corrugated .wave-item {
  41. position: absolute;
  42. width: 200%;
  43. left: 0;
  44. background-repeat: repeat no-repeat;
  45. background-position: 0 bottom;
  46. -webkit-transform-origin: center bottom;
  47. transform-origin: center bottom;
  48. }
  49. .home .corrugated .wave-top {
  50. opacity: 0.5;
  51. -webkit-animation: wave-animation 3s;
  52. animation: wave-animation 3s;
  53. -webkit-animation-delay: 1s;
  54. animation-delay: 1s;
  55. background-size: 50% 60rpx;
  56. z-index: 15;
  57. }
  58. .home .corrugated .wave-middle {
  59. opacity: 0.75;
  60. -webkit-animation: wavemove 10s linear infinite;
  61. animation: wavemove 10s linear infinite;
  62. background-size: 50% 80rpx;
  63. z-index: 10;
  64. }
  65. .home .corrugated .wave-bottom {
  66. -webkit-animation: wavemove 15s linear infinite;
  67. animation: wavemove 15s linear infinite;
  68. background-size: 50% 45rpx;
  69. z-index: 5;
  70. }
  71. @-webkit-keyframes wavemove {
  72. 0% {
  73. -webkit-transform: translateX(0) translateZ(0) scaleY(1);
  74. transform: translateX(0) translateZ(0) scaleY(1);
  75. }
  76. 50% {
  77. -webkit-transform: translateX(-25%) translateZ(0) scaleY(0.55);
  78. transform: translateX(-25%) translateZ(0) scaleY(0.55);
  79. }
  80. 100% {
  81. -webkit-transform: translateX(-50%) translateZ(0) scaleY(1);
  82. transform: translateX(-50%) translateZ(0) scaleY(1);
  83. }
  84. }
  85. @keyframes wavemove {
  86. 0% {
  87. -webkit-transform: translateX(0) translateZ(0) scaleY(1);
  88. transform: translateX(0) translateZ(0) scaleY(1);
  89. }
  90. 50% {
  91. -webkit-transform: translateX(-25%) translateZ(0) scaleY(0.55);
  92. transform: translateX(-25%) translateZ(0) scaleY(0.55);
  93. }
  94. 100% {
  95. -webkit-transform: translateX(-50%) translateZ(0) scaleY(1);
  96. transform: translateX(-50%) translateZ(0) scaleY(1);
  97. }
  98. }