Ein Projekt das es ermöglicht Beerpong über das Internet von zwei unabhängigen positionen aus zu spielen. Entstehung im Rahmen einer Praktikumsaufgabe im Fach Interaktion.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

style.css 3.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. :root{
  2. --top:0px;
  3. --top325:325px;
  4. }
  5. *{
  6. padding: 0;
  7. margin: 0;
  8. outline: none;
  9. }
  10. body{
  11. overflow-x: hidden;
  12. display: block;
  13. }
  14. ellipse{
  15. fill:hsl(0, 0%, 90%);
  16. stroke: black;
  17. stroke-weight: 1px;
  18. }
  19. #reshoot, #restart{
  20. margin: 15rem auto;
  21. font-size: 2rem;
  22. padding: 1rem 2rem;
  23. border-radius: 0.3rem;
  24. display: block;
  25. color: black;
  26. border: 3px solid black;
  27. background-color: yellow;
  28. z-index: 10;
  29. }
  30. #reshoot:hover, #restart:hover{
  31. cursor: pointer;
  32. background-color: black;
  33. color: yellow;
  34. z-index:
  35. }
  36. #time {
  37. margin: auto;
  38. display: block;
  39. text-align: center;
  40. font-size: 3rem;
  41. font-family: sans-serif;
  42. font-weight: bold;
  43. }
  44. .cups{
  45. margin: auto;
  46. width: 1100px;
  47. }
  48. .tisch{
  49. position: absolute;
  50. margin-top: 0rem;
  51. margin-left: -440px;
  52. width: 1090px;
  53. z-index: -1;
  54. }
  55. .cup{
  56. width: 100px;
  57. position: relative;
  58. }
  59. .row1{
  60. margin-top: 00rem;
  61. margin-left: 350px;
  62. }
  63. .row2{
  64. margin-top: -10rem;
  65. margin-left: 400px;
  66. }
  67. .row3{
  68. margin-top: -10rem;
  69. margin-left: 450px;
  70. }
  71. .row4{
  72. margin-top: -10rem;
  73. margin-left: 500px;
  74. }
  75. .cup5{
  76. top: 5rem;
  77. }
  78. .cup6{
  79. top: 5rem;
  80. }
  81. .cup7{
  82. top: 5rem;
  83. }
  84. .cup8{
  85. top: 10rem;
  86. }
  87. .cup9{
  88. top: 10rem;
  89. }
  90. .cup10{
  91. top: 15rem;
  92. }
  93. .ball{
  94. width: 50px;
  95. height: 50px;
  96. position: relative;
  97. }
  98. .shooter{
  99. position: relative;
  100. top: 250px;
  101. left: 125px;
  102. width: 300px;
  103. margin: auto;
  104. }
  105. .shootX{
  106. animation: shootX 1s infinite linear;
  107. }
  108. @keyframes shootX{
  109. 0%{left:0px}
  110. 25%{left:125px}
  111. 50%{left:0px}
  112. 75%{left:-125px}
  113. 100%{left:0px}
  114. }
  115. .shootY{
  116. animation: shootY 1s infinite linear;
  117. }
  118. @keyframes shootY{
  119. 0%{top:0px}
  120. 50%{top:175px}
  121. 100%{top:0px}
  122. }
  123. .fadeAway{
  124. animation: fadeAway 1s;
  125. opacity: 0
  126. }
  127. @keyframes fadeAway{
  128. 0%{opacity: 1}
  129. 100%{opacity: 0}
  130. }
  131. .Shoot{
  132. animation: Shoot 1s;
  133. animation-timing-function: ease;
  134. }
  135. @keyframes Shoot{
  136. 0%{top: var(--top)}
  137. 100%{top: var(--top325)}
  138. }
  139. ::selection {
  140. background: transparent;
  141. }
  142. .bgWhite {
  143. background: #F5F2F5;
  144. }
  145. .colorWhite {
  146. color: #F5F2F5 !important;
  147. }
  148. .bgDark {
  149. background: #516D66;
  150. }
  151. .colorDark {
  152. color: #516D66;
  153. }
  154. .bgRed {
  155. background: #F286A0;
  156. }
  157. .colorRed {
  158. color: #F286A0 !important;
  159. }
  160. .gameBoard, .scoreBoard {
  161. font-weight: 400;
  162. }
  163. .gameBoard {
  164. width: 100%;
  165. }
  166. .gameBoard td {
  167. text-align: center;
  168. color: #516D66;
  169. font-size: 8em;
  170. cursor: pointer;
  171. transition: all 0.5s;
  172. }
  173. .gameCell {
  174. width: 181px;
  175. height: 181px;
  176. }
  177. .gameCell:not(.marked):hover {
  178. box-shadow: 0 0 42px #555;
  179. }
  180. .gameBoard td.gameCell.notActive:hover, .gameBoard td.gameCell.notActive:active {
  181. box-shadow: none !important;
  182. cursor: default;
  183. }
  184. .scoreBoard {
  185. color: #516D66;
  186. height: 100px;
  187. }
  188. .boardCol {
  189. width: 5px;
  190. cursor: default !important;
  191. }
  192. .boardRow {
  193. height: 5px;
  194. cursor: default !important;
  195. }
  196. .scoreBoard span.active {
  197. border-bottom: 4px solid #F286A0;
  198. }