Created
January 5, 2014 22:09
-
-
Save iokaravas/8274608 to your computer and use it in GitHub Desktop.
Quick and easy CSS3 rolling-number/slot machine?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Quick and easy CSS3 rolling-number/slot machine? | |
| */ | |
| body { | |
| font-size: 700%; /* with this setup you get 1:1 em , so 1em is actually number 1 */ | |
| } | |
| #counter { | |
| height: 1em; | |
| overflow: hidden; | |
| } | |
| .digits { | |
| float:left; | |
| list-style-type: none; | |
| font-size: 1em; | |
| line-height: 1em; | |
| } | |
| .digits-first { | |
| margin-top: -4em; /* number 4! */ | |
| } | |
| .digits-second { | |
| margin-top: 0em; /* number 0! */ | |
| } | |
| .digits-third { | |
| margin-top: -4em; /* number 4! */ | |
| } | |
| .digits { | |
| animation-duration: 2s; | |
| animation-timing-function: ease; | |
| animation-delay: 2.2s; | |
| animation-fill-mode: forwards; | |
| } | |
| .luckie { | |
| animation-name: luckie; | |
| } | |
| /* Animations */ | |
| @keyframes luckie { | |
| 100% { | |
| margin-top: -7em; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- content to be placed inside <body>…</body> --> | |
| <div id="counter" class="animated"> | |
| <ul class="digits digits-first luckie"> <li> 0 <li> 1 <li> 2 <li> 3 <li> 4 <li> 5 <li> 6 <li> 7 <li> 8 <li> 9 </ul> | |
| <ul class="digits digits-second luckie"> <li> 0 <li> 1 <li> 2 <li> 3 <li> 4 <li> 5 <li> 6 <li> 7 <li> 8 <li> 9 </ul> | |
| <ul class="digits digits-third luckie"> <li> 0 <li> 1 <li> 2 <li> 3 <li> 4 <li> 5 <li> 6 <li> 7 <li> 8 <li> 9 </ul> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // alert('Hello world!'); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Ich schreibe aus Chur: Ein Forenpost über Three-Card Poker weckte meine Aufmerksamkeit, da ich selten Zeit für lange Runden habe; die kurzen Spielzyklen erschienen passend. https://spinogambino.ch/ Nach einigen Versuchen blieb ich geduldig, justierte Einsätze und erlebte schließlich einen Gewinn, der frühere Verluste ausglich. Auszahlung klappte reibungslos und die Regeln waren klar dargestellt — ideal für kurze, konzentrierte Sessions nach der Arbeit. Three-Card Poker ist echt gut geeignet für schnelle Runden; die Anleitung war knapp und hilfreich. Ich behielt Limits bei und spielte verantwortungsbewusst.