API tools faq
paste
Advertisement
Guest User

Have fun ;)

a guest
Aug 26th, 2019
111
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.11 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. /*
  6. Created on : 13.08.2019, 14:21:51
  7. Author : kruse
  8. */
  9.  
  10. /*
  11. Element 1
  12. Das Element fällt herunter beschleunigt, prallt noch oben ab, bremst ab und
  13. fällt wieder herunter, beschleunigt, usw. (im Prinzip ein prallender Ball)
  14. */
  15.  
  16. body {
  17. overflow: hidden;
  18. }
  19.  
  20. div.element1 {
  21. position: fixed;
  22. top: 0;
  23. left: 0;
  24. border-radius: 100px;
  25. width: 50px;
  26. height: 50px;
  27. background-color: blue;
  28. color: white;
  29. font-weight: bold;
  30. text-align: center;
  31. line-height: 50px;
  32. animation: element1 3s infinite;
  33. -webkit-animation: element1 3s infinite linear;
  34. }
  35. @keyframes element1 {
  36. 0% { top: 0; }
  37. 5% { top: 2.5%; }
  38. 10% { top: 5.8%; }
  39. 15% { top: 13.3%; }
  40. 20% { top: 21.5%; }
  41. 25% { top: 40.9%; }
  42. 30% { top: 56.8%; }
  43. 35% { top: 86.3%; }
  44. 40% { top: 89.5%; transform: scale(1.1, .9); }
  45. 50% { top: calc(100% - 50px); transform: scale(1.4, .6); }
  46. 55% { top: calc(92% - 50px); transform: scale(1.2, .8); }
  47. 60% { top: 78.4%; transform: scale(1.05, .95); }
  48. 65% { top: 62.5%; }
  49. 70% { top: 40.9%; }
  50. 75% { top: 21.5%; }
  51. 80% { top: 11.3%; }
  52. 85% { top: 6.8%; }
  53. 90% { top: 4.5%; }
  54. 95% { top: 2.5%; }
  55. 100% { top: 0; }
  56. }
  57. @-webkit-keyframes element1 {
  58. 0% { top: 0; }
  59. 5% { top: 2.5%; }
  60. 10% { top: 5.8%; }
  61. 15% { top: 13.3%; }
  62. 20% { top: 21.5%; }
  63. 25% { top: 40.9%; }
  64. 30% { top: 56.8%; }
  65. 35% { top: 86.3%; }
  66. 40% { top: 89.5%; transform: scale(1.1, .9); }
  67. 50% { top: calc(100% - 50px); transform: scale(1.4, .6); }
  68. 55% { top: calc(92% - 50px); transform: scale(1.2, .8); }
  69. 60% { top: 78.4%; transform: scale(1.05, .95); }
  70. 65% { top: 62.5%; }
  71. 70% { top: 40.9%; }
  72. 75% { top: 21.5%; }
  73. 80% { top: 11.3%; }
  74. 85% { top: 6.8%; }
  75. 90% { top: 4.5%; }
  76. 95% { top: 2.5%; }
  77. 100% { top: 0; }
  78. }
  79.  
  80. /*
  81. Element 2
  82. Das Element soll von der oberen linken Ecke, in die untere Ecke wandern. Dieser
  83. Vorgang soll 10x wiederholt werden. Der Start erfolgt erst nach 2 Sekunden.
  84. */
  85. div.element2 {
  86. background-color: green;
  87. top: 0;
  88. left: 0;
  89. width: 50px;
  90. height: 50px;
  91. border-radius: 100px;
  92. position: absolute;
  93. color: white;
  94. font-weight: bold;
  95. text-align: center;
  96. line-height: 50px;
  97. animation: element2 5s alternate linear;
  98. animation-iteration-count: 10;
  99. animation-delay: 2s;
  100. }
  101. @keyframes element2 {
  102. from {
  103. top: 0;
  104. left: 0;
  105. }
  106. to {
  107. top: calc(100% - 50px);
  108. left: calc(100% - 50px);
  109. }
  110. }
  111. @-webkit-keyframes element2 {
  112. from {
  113. top: 0;
  114. left: 0;
  115. }
  116. to {
  117. top: calc(100% - 50px);
  118. left: calc(100% - 50px);
  119. }
  120. }
  121.  
  122. /*
  123. Element 3
  124. Das Element hat zunächst eine Größe von 0 Pixel in Breite und Höhe. Dann soll es
  125. auf 300 x 300 Pixel anwachsen und zum Schluss über die Transparenz (opacity)
  126. ausgeblendet werden. Der Start erfolt nach 4 Sekunden, der Vorgang wird 6x
  127. wiederholt.
  128. */
  129. .element3 {
  130. background-color: red;
  131. width: 0;
  132. height: 0;
  133. top: 0;
  134. right: 0;
  135. position: absolute;
  136. color: white;
  137. font-weight: bold;
  138. text-align: center;
  139. border-radius: 100%;
  140. animation: element3 1s linear alternate;
  141. animation-iteration-count: 11;
  142. animation-delay: 4s;
  143. animation-fill-mode: forwards;
  144. }
  145. @keyframes element3 {
  146. 0% {
  147. width: 0;
  148. height: 0;
  149. font-size: 0;
  150. }
  151. 99.999% {
  152. width: 300px;
  153. height: 300px;
  154. font-size: 250px;
  155. }
  156. 100% {
  157. transition: opacity 4s;
  158. opacity: 0;
  159. }
  160. }
  161. @-webkit-keyframes element3 {
  162. 0% {
  163. width: 0;
  164. height: 0;
  165. }
  166. 99.999% {
  167. width: 300px;
  168. height: 300px;
  169. font-size: 250px;
  170. }
  171. 100% {
  172. background-color: black;
  173. }
  174. }
  175. </style>
  176. </head>
  177. <body>
  178. <div class="element1">1</div>
  179. <div class="element2">2</div>
  180. <div class="element3">3</div>
  181. </body>
  182. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!