index.html #22
Description
<title>jSlots Slot Machine - Matthew Lein</title>
<style type="text/css">
ul {
padding: 0;
margin: 0;
list-style: none;
}
.jSlots-wrapper {
overflow: hidden;
height: 20px;
display: inline-block; /* to size correctly, can use float too, or width*/
border: 1px solid #999;
}
.slot {
float: left;
}
input[type="button"] {
display: block;
}
/* ---------------------------------------------------------------------
FANCY EXAMPLE
--------------------------------------------------------------------- */
.fancy .jSlots-wrapper {
overflow: hidden;
height: 100px;
display: inline-block; /* to size correctly, can use float too, or width*/
border: 1px solid #999;
}
.fancy .slot li {
width: 100px;
line-height: 100px;
text-align: center;
font-size: 70px;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
font-family: 'Gravitas One', serif;
border-left: 1px solid #999;
}
.fancy .slot:first-child li {
border-left: none;
}
.fancy .slot li:nth-child(7) {
background-color: #FFCE29;
}
.fancy .slot li:nth-child(6) {
background-color: #FFA22B;
}
.fancy .slot li:nth-child(5) {
background-color: #FF8645;
}
.fancy .slot li:nth-child(4) {
background-color: #FF6D3F;
}
.fancy .slot li:nth-child(3) {
background-color: #FF494C;
}
.fancy .slot li:nth-child(2) {
background-color: #FF3333;
}
.fancy .slot li:nth-child(1),
.fancy .slot li:nth-child(8) {
background-color: #FF0000;
}
.fancy .slot li span {
display: block;
}
/* ---------------------------------------------------------------------
ANIMATIONS
--------------------------------------------------------------------- */
@-webkit-keyframes winner {
0%, 50%, 100% {
-webkit-transform: rotate(0deg);
font-size:70px;
color: #fff;
}
25% {
-webkit-transform: rotate(20deg);
font-size:90px;
color: #FF16D8;
}
75% {
-webkit-transform: rotate(-20deg);
font-size:90px;
color: #FF16D8;
}
}
@-moz-keyframes winner {