Css3 Slot Machine Animation
Css3 Slot Machine Animation Average ratng: 5,0/5 5052 reviews
Quick and easy CSS3 rolling-number/slot machine?
dabblet.css
| /** |
| * 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; |
| } |
| } |
The slot machine display rotates, but since it has large diameter, it looks more like a continues scroll. You will need to distort the top and bottom of the images, in order to make them look realistic. If you blurry the top and bottom (transparent gif or css3 indented shadow), you might get close to the desired effect. The configuration screen is where you'll customize your video slot with your own colors, graphics for the reel symbols, name and starting cash for players. On the right side there are 5 boxes; 4 to customize your slot and the 5th containing a button to get your HTML code. The first is for your slot machine's name/title.
dabblet.html
Css3 Slot Machine Animation Software
| <!-- content to be placed inside <body>…</body> --> |
| <divid='counter' class='animated'> |
| <ulclass='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> |
| <ulclass='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> |
| <ulclass='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> |
dabblet.js
settings.json
Css3 Slot Machine Animation Games
| {'view':'split','fontsize':'100','seethrough':'','prefixfree':'1','page':'all'} |
Css3 Slot Machine Animation Tutorial
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment