fighting_match.wxss 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. @import "../../utils/base_bg.wxss";
  2. .img-contain {
  3. text-align: center;
  4. padding: 150rpx 0;
  5. }
  6. .avatarUrl {
  7. width: 160rpx;
  8. height: 160rpx;
  9. border: 6rpx solid white;
  10. border-radius: 50%;
  11. }
  12. .time {
  13. position: relative;
  14. width: 400rpx;
  15. height: 400rpx;
  16. margin: 100rpx auto;
  17. }
  18. .t0 {
  19. position: absolute;
  20. font-size: 90rpx;
  21. width: 100%;
  22. text-align: center;
  23. height: 400rpx;
  24. line-height: 400rpx;
  25. }
  26. .t4, .t5, .t6 {
  27. position: absolute;
  28. width: 160rpx;
  29. height: 160rpx;
  30. left: 114rpx;
  31. top: 120rpx;
  32. border-width: 8rpx;
  33. background: transparent;
  34. border-style: solid;
  35. border-color: #121502;
  36. border-radius: 50%;
  37. }
  38. .t5 {
  39. width: 200rpx;
  40. height: 200rpx;
  41. left: 94rpx;
  42. top: 100rpx;
  43. }
  44. .t6 {
  45. width: 240rpx;
  46. height: 240rpx;
  47. left: 74rpx;
  48. top: 80rpx;
  49. }
  50. .t1, .t2, .t3 {
  51. position: absolute;
  52. width: 160rpx;
  53. height: 160rpx;
  54. left: 114rpx;
  55. top: 120rpx;
  56. border-width: 8rpx;
  57. background: transparent;
  58. border-style: solid;
  59. border-color: transparent #c11212 #c11212 #c11212;
  60. border-radius: 50%;
  61. -webkit-animation: ".t1" 2s infinite linear; /***一秒循环执行**/
  62. z-index: 100;
  63. }
  64. .t2 {
  65. width: 200rpx;
  66. height: 200rpx;
  67. left: 94rpx;
  68. top: 100rpx;
  69. -webkit-animation: ".t2" 2.5s infinite linear;
  70. }
  71. .t3 {
  72. width: 240rpx;
  73. height: 240rpx;
  74. left: 74rpx;
  75. top: 80rpx;
  76. -webkit-animation: ".t3" 3.5s infinite linear;
  77. }
  78. @-webkit-keyframes ".t1" {
  79. /**关键帧名称**/
  80. 0% {
  81. -webkit-transform: rotate(180deg);
  82. }
  83. 100% {
  84. -webkit-transform: rotate(-180deg);
  85. }
  86. }
  87. @-webkit-keyframes ".t2" {
  88. /**关键帧名称**/
  89. 0% {
  90. -webkit-transform: rotate(0deg);
  91. }
  92. 100% {
  93. -webkit-transform: rotate(360deg);
  94. }
  95. }
  96. @-webkit-keyframes ".t3" {
  97. /**关键帧名称**/
  98. 0% {
  99. -webkit-transform: rotate(360deg);
  100. }
  101. 100% {
  102. -webkit-transform: rotate(0deg);
  103. }
  104. }