entry.css 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. * > .enter-x:nth-child(1) {
  2. transform: translateX(50px);
  3. }
  4. * > .-enter-x:nth-child(1) {
  5. transform: translateX(-50px);
  6. }
  7. * > .enter-x:nth-child(1),
  8. * > .-enter-x:nth-child(1) {
  9. z-index: 9;
  10. opacity: 0;
  11. animation: enter-x-animation 0.4s ease-in-out 0.3s;
  12. animation-fill-mode: forwards;
  13. animation-delay: 0.1s;
  14. }
  15. * > .enter-x:nth-child(2) {
  16. transform: translateX(50px);
  17. }
  18. * > .-enter-x:nth-child(2) {
  19. transform: translateX(-50px);
  20. }
  21. * > .enter-x:nth-child(2),
  22. * > .-enter-x:nth-child(2) {
  23. z-index: 8;
  24. opacity: 0;
  25. animation: enter-x-animation 0.4s ease-in-out 0.3s;
  26. animation-fill-mode: forwards;
  27. animation-delay: 0.2s;
  28. }
  29. * > .enter-x:nth-child(3) {
  30. transform: translateX(50px);
  31. }
  32. * > .-enter-x:nth-child(3) {
  33. transform: translateX(-50px);
  34. }
  35. * > .enter-x:nth-child(3),
  36. * > .-enter-x:nth-child(3) {
  37. z-index: 7;
  38. opacity: 0;
  39. animation: enter-x-animation 0.4s ease-in-out 0.3s;
  40. animation-fill-mode: forwards;
  41. animation-delay: 0.3s;
  42. }
  43. * > .enter-x:nth-child(4) {
  44. transform: translateX(50px);
  45. }
  46. * > .-enter-x:nth-child(4) {
  47. transform: translateX(-50px);
  48. }
  49. * > .enter-x:nth-child(4),
  50. * > .-enter-x:nth-child(4) {
  51. z-index: 6;
  52. opacity: 0;
  53. animation: enter-x-animation 0.4s ease-in-out 0.3s;
  54. animation-fill-mode: forwards;
  55. animation-delay: 0.4s;
  56. }
  57. * > .enter-x:nth-child(5) {
  58. transform: translateX(50px);
  59. }
  60. * > .-enter-x:nth-child(5) {
  61. transform: translateX(-50px);
  62. }
  63. * > .enter-x:nth-child(5),
  64. * > .-enter-x:nth-child(5) {
  65. z-index: 5;
  66. opacity: 0;
  67. animation: enter-x-animation 0.4s ease-in-out 0.3s;
  68. animation-fill-mode: forwards;
  69. animation-delay: 0.5s;
  70. }
  71. * > .enter-y:nth-child(1) {
  72. transform: translateX(50px);
  73. }
  74. * > .-enter-y:nth-child(1) {
  75. transform: translateX(-50px);
  76. }
  77. * > .enter-y:nth-child(1),
  78. * > .-enter-y:nth-child(1) {
  79. z-index: 9;
  80. opacity: 0;
  81. animation: enter-y-animation 0.4s ease-in-out 0.3s;
  82. animation-fill-mode: forwards;
  83. animation-delay: 0.1s;
  84. }
  85. * > .enter-y:nth-child(2) {
  86. transform: translateX(50px);
  87. }
  88. * > .-enter-y:nth-child(2) {
  89. transform: translateX(-50px);
  90. }
  91. * > .enter-y:nth-child(2),
  92. * > .-enter-y:nth-child(2) {
  93. z-index: 8;
  94. opacity: 0;
  95. animation: enter-y-animation 0.4s ease-in-out 0.3s;
  96. animation-fill-mode: forwards;
  97. animation-delay: 0.2s;
  98. }
  99. * > .enter-y:nth-child(3) {
  100. transform: translateX(50px);
  101. }
  102. * > .-enter-y:nth-child(3) {
  103. transform: translateX(-50px);
  104. }
  105. * > .enter-y:nth-child(3),
  106. * > .-enter-y:nth-child(3) {
  107. z-index: 7;
  108. opacity: 0;
  109. animation: enter-y-animation 0.4s ease-in-out 0.3s;
  110. animation-fill-mode: forwards;
  111. animation-delay: 0.3s;
  112. }
  113. * > .enter-y:nth-child(4) {
  114. transform: translateX(50px);
  115. }
  116. * > .-enter-y:nth-child(4) {
  117. transform: translateX(-50px);
  118. }
  119. * > .enter-y:nth-child(4),
  120. * > .-enter-y:nth-child(4) {
  121. z-index: 6;
  122. opacity: 0;
  123. animation: enter-y-animation 0.4s ease-in-out 0.3s;
  124. animation-fill-mode: forwards;
  125. animation-delay: 0.4s;
  126. }
  127. * > .enter-y:nth-child(5) {
  128. transform: translateX(50px);
  129. }
  130. * > .-enter-y:nth-child(5) {
  131. transform: translateX(-50px);
  132. }
  133. * > .enter-y:nth-child(5),
  134. * > .-enter-y:nth-child(5) {
  135. z-index: 5;
  136. opacity: 0;
  137. animation: enter-y-animation 0.4s ease-in-out 0.3s;
  138. animation-fill-mode: forwards;
  139. animation-delay: 0.5s;
  140. }
  141. @keyframes enter-x-animation {
  142. to {
  143. opacity: 1;
  144. transform: translateX(0);
  145. }
  146. }
  147. @keyframes enter-y-animation {
  148. to {
  149. opacity: 1;
  150. transform: translateY(0);
  151. }
  152. }
  153. /*update-begin---author:wangshuai ---date:20230829 for:UnoCSS替代windicss 导致全局默认边框样丢失------------*/
  154. *, :before, :after {
  155. box-sizing: border-box;
  156. border-width: 0;
  157. border-style: solid;
  158. border-color: #e5e7eb;
  159. }
  160. .border-primary,.hover\:border-primary:hover {
  161. --tw-border-opacity: 1;
  162. border-color: rgba(24,144,255,var(--tw-border-opacity))
  163. }
  164. /*update-end---author:wangshuai ---date:20230829 for:UnoCSS替代windicss 导致全局默认边框样丢失------------*/