Css3 Slot Machine Animation
And that’s what this post is about, creating a simple CSS spinning loader animation similar to Twitter’s. Although Twitter’s is made from an SVG, it can also be created out of pure CSS using a simple CSS keyframe animation, with nothing but a single HTML element.
Css3 Slot Machine Animation Softwares
/** |
* 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; |
} |
} |
Slot Machine Logo Reveal is a dynamic animation featuring slot machine with editable icons, rotating gold coin with your logo on it and a Jackpot winning falling to your lap. There are no plugins required, works with any language and renders extremely fast. You can customize the project with ease – everything is linked to a control layer. Selecting a Venue Slot Machine Style I made an app that will pick a venue from a set at random when the user clicks a button. I wanted the random selection to look like a slot machine game. To do this, I decided to try CSS3 and JQuery for the animations. Initially I was using –webkit-keyframes and changing the background positions.
<!-- 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> |
Css3 Slot Machine Animation Tutorial
{'view':'split','fontsize':'100','seethrough':'','prefixfree':'1','page':'all'} |