You can not select more than 25 topics Topics must start with a chinese character,a letter or number, can include dashes ('-') and can be up to 35 characters long.

card-avatar.css 3.6 kB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. @charset "utf-8";
  2. .wrapper{
  3. color: white;
  4. font-family: var(--game-font-family);
  5. font-size: 15px;
  6. line-height: 15px;
  7. text-shadow: black 0 0 2px, black 2px 2px 0;
  8. display: inline-block;
  9. position: relative;
  10. width: 100px;
  11. height: 100px;
  12. }
  13. /*宠物在图中编号对应的坐标*/
  14. .wrapper[data-cards-pic-x='0']{background-position-x:calc(-102px * 0);}
  15. .wrapper[data-cards-pic-x='1']{background-position-x:calc(-102px * 1);}
  16. .wrapper[data-cards-pic-x='2']{background-position-x:calc(-102px * 2);}
  17. .wrapper[data-cards-pic-x='3']{background-position-x:calc(-102px * 3);}
  18. .wrapper[data-cards-pic-x='4']{background-position-x:calc(-102px * 4);}
  19. .wrapper[data-cards-pic-x='5']{background-position-x:calc(-102px * 5);}
  20. .wrapper[data-cards-pic-x='6']{background-position-x:calc(-102px * 6);}
  21. .wrapper[data-cards-pic-x='7']{background-position-x:calc(-102px * 7);}
  22. .wrapper[data-cards-pic-x='8']{background-position-x:calc(-102px * 8);}
  23. .wrapper[data-cards-pic-x='9']{background-position-x:calc(-102px * 9);}
  24. .wrapper[data-cards-pic-y='0']{background-position-y:calc(-102px * 0);}
  25. .wrapper[data-cards-pic-y='1']{background-position-y:calc(-102px * 1);}
  26. .wrapper[data-cards-pic-y='2']{background-position-y:calc(-102px * 2);}
  27. .wrapper[data-cards-pic-y='3']{background-position-y:calc(-102px * 3);}
  28. .wrapper[data-cards-pic-y='4']{background-position-y:calc(-102px * 4);}
  29. .wrapper[data-cards-pic-y='5']{background-position-y:calc(-102px * 5);}
  30. .wrapper[data-cards-pic-y='6']{background-position-y:calc(-102px * 6);}
  31. .wrapper[data-cards-pic-y='7']{background-position-y:calc(-102px * 7);}
  32. .wrapper[data-cards-pic-y='8']{background-position-y:calc(-102px * 8);}
  33. .wrapper[data-cards-pic-y='9']{background-position-y:calc(-102px * 9);}
  34. /*怪物边框*/
  35. .attribute { /*主属性*/
  36. position:absolute;
  37. left:0;top:0;
  38. width: 100px;height: 100px;
  39. background-repeat: no-repeat;
  40. background-image: url(images/CARDFRAME2.PNG);
  41. }
  42. .attribute-sub { /*副属性*/
  43. background-position-y: -104px;
  44. }
  45. .attribute[data-attr='-1'] {
  46. background: none; /*无*/
  47. }
  48. .attribute[data-attr='0'] {
  49. background-position-x: calc(-102px * 0); /*火*/
  50. }
  51. .attribute[data-attr='1'] {
  52. background-position-x: calc(-102px * 1); /*水*/
  53. }
  54. .attribute[data-attr='2'] {
  55. background-position-x: calc(-102px * 2); /*木*/
  56. }
  57. .attribute[data-attr='3'] {
  58. background-position-x: calc(-102px * 3); /*光*/
  59. }
  60. .attribute[data-attr='4'] {
  61. background-position-x: calc(-102px * 4); /*暗*/
  62. }
  63. .attribute-main[data-attr='6']
  64. {
  65. background-image: url(images/CARDFRAMEW.PNG);
  66. background-position: 0 0;
  67. }
  68. .flex-box {
  69. display: block flex;
  70. width: 100%;
  71. height: 100%;
  72. position:absolute;
  73. left:0;top:0;
  74. flex-direction: column; /* 内容纵向排列 */
  75. }
  76. .flex-left-top {
  77. }
  78. .flex-left-bottom {
  79. justify-content: flex-end; /*从下往上*/
  80. }
  81. .flex-right-top {
  82. align-items: flex-end; /*靠右*/
  83. }
  84. .flex-right-bottom {
  85. justify-content: flex-end; /*从下往上*/
  86. align-items: flex-end; /*靠右*/
  87. }
  88. .card-id {
  89. font-family: var(--font-family);
  90. }
  91. .card-id::before {
  92. content: "No.";
  93. font-size: 0.7em; /*火狐*/
  94. zoom: 0.7; /*Chrome*/
  95. }
  96. .card-id::after {
  97. content: attr(data-id);
  98. }
  99. .level {
  100. }
  101. .level::before {
  102. content: "Lv.";
  103. font-size: 0.7em; /*火狐*/
  104. zoom: 0.7; /*Chrome*/
  105. }
  106. .enhancement { /*加点*/
  107. color: yellow;
  108. }
  109. .enhancement::before {
  110. content: "+";
  111. }
  112. .active-skill-cd {
  113. font-size: 13px;
  114. }
  115. .active-skill-cd::before {
  116. content: "CD";
  117. font-size: 0.7em; /*火狐*/
  118. zoom: 0.7; /*Chrome*/
  119. }