#lottery { transform: scale(0.6); margin-left: -53px; } .wheel * { margin: 0; padding: 0; } .wheel { position: relative; padding: 25px; width: 400px; height: 400px; background: #fe6869; border-radius: 50%; transition:transform 6s; } .wheel ul { list-style: none; } .wheel-light li { position: absolute; z-index: 10; top: 0; bottom: 0; left: 0; right: 0; -moz-animation: "lightFlicker" 2s linear 0 infinite; -webkit-animation: "lightFlicker" 2s linear 0 infinite; -o-animation: "lightFlicker" 2s linear 0 infinite; -ms-animation: "lightFlicker" 2s linear 0 infinite; animation: "lightFlicker" 2s linear 0 infinite; } .wheel-light li i { position: absolute; display: block; width: 10px; height: 10px; background: #fbf087; border-radius: 50%; } .wheel-light li:nth-child(2) { -moz-transform: rotate(15deg); -webkit-transform: rotate(15deg); -o-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); } .wheel-light li:nth-child(3) { -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); -o-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } .wheel-light li:nth-child(4) { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .wheel-light li:nth-child(5) { -moz-transform: rotate(60deg); -webkit-transform: rotate(60deg); -o-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); } .wheel-light li:nth-child(6) { -moz-transform: rotate(75deg); -webkit-transform: rotate(75deg); -o-transform: rotate(75deg); -ms-transform: rotate(75deg); transform: rotate(75deg); } .wheel-light li i:nth-child(1) { top: 10px; left: 0; right: 0; margin: 0 auto; } .wheel-light li i:nth-child(2) { top: 0; bottom: 0; right: 10px; margin: auto 0; } .wheel-light li i:nth-child(3) { bottom: 10px; left: 0; right: 0; margin: 0 auto; } .wheel-light li i:nth-child(4) { top: 0; bottom: 0; left: 10px; margin: auto 0; } .wheel-light li:nth-child(2n) i { background: #ffffff; } .wheel-list { position: relative; z-index: 20; display: block; width: 400px; height: 400px; overflow: hidden; background: #fff; border-radius: 50%; transition: transform 6s; } .wheel-list li { position: absolute; top: 0; left: 0; width: 400px; height: 200px; -moz-transform-origin: center bottom; -webkit-transform-origin: center bottom; -o-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; } .wheel-list li i { position: absolute; top: 0; left: 0; margin-left: -50%; display: block; width: 100%; height: 100%; background: #fe6869; content: ''; -moz-transform-origin: right bottom; -webkit-transform-origin: right bottom; -o-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; } .wheel-list li:nth-child(2n) i { background: #ff8584; } .wheel-list .prize { position: relative; margin: 0 auto; padding-top: 10px; width: 50%; overflow: hidden; text-align: center; line-height: 25px; } .wheel-list .prize h3 { height: 25px; overflow: hidden; color: #FFFFFF; font-size: 18px; font-weight: 700; } .wheel-list .prize p { height: 25px; color: #FFFFFF; font-size: 14px; font-weight: 700; } .icon { width: 50%; padding-top: 30px; } .icon img { width: 38px; position: relative; top: 50%; left: 50%; } .wheel-pointer { position: absolute; z-index: 30; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100px; height: 100px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, .1); border-radius: 50%; } .wheel-pointer:before { position: absolute; top: -40px; left: 50%; display: block; width: 60px; height: 60px; border: 1px solid #fcef86; background: #fcef86; content: ''; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5); -moz-transform-origin: left top; -webkit-transform-origin: left top; -o-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; -moz-transform: rotate(30deg) skewY(30deg); -webkit-transform: rotate(30deg) skewY(30deg); -o-transform: rotate(30deg) skewY(30deg); -ms-transform: rotate(30deg) skewY(30deg); transform: rotate(30deg) skewY(30deg); } .wheel-pointer:after { position: relative; display: block; width: 100%; height: 100%; background: #fcef86; content: ''; border-radius: 50%; filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffcc00', endColorstr='#ffcc00', GradientType=1); } .wheel-pointer i { width: 70px; height: 70px; background: #ffdc44; z-index: 100; position: absolute; top: 15%; left: 15%; border-radius: 50%; color: #fe5b5c; text-align: center; font-size: 55px; font-style: normal; font-family: fantasy; }