jquery实现老虎机抽奖效果代码
代码语言:html
所属分类:其他
代码描述:jquery实现老虎机抽奖效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no"> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; } img { vertical-align: bottom; } .game-header { width: 100%; } .game-header img { width: 100%; } .game-content { position: relative; width: 100%; } .game-content img { width: 100%; } .game-goods-wrap { position: absolute; margin: 0 auto; top: 12%; left: 0; right: 0; bottom: 0; width: 64%; height: 50%; border-top-left-radius: 0.1875rem; border-top-right-radius: 0.1875rem; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; overflow: hidden; } .game-goods-wrap:before { position: absolute; top: -1PX; right: 0; bottom: 1PX; left: -1PX; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; width: 101%; height: 100%; content: ""; box-shadow: 0 1.25rem 1.25rem -1.25rem #000 inset; z-index: 12; } .game-goods-wrap:after { position: absolute; top: 1PX; right: 0; bottom: -1PX; left: -1PX; width: 101%; height: 100%; box-shadow: 0 -1.25rem 1.25rem -1.25rem #000 inset; z-index: 12; content: ""; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } .game-goods-list { height: 100%; overflow: hidden; } .game-goods { position: absolute; width: 32%; height: 100%; z-index: 10; overflow: hidden; } .game-goods:first-child { left: -32%; transform: translateX(100%); -ms-transform: translateX(100%); -moz-transform: translateX(100%); -webkit-transform: translateX(100%); -o-transform: translateX(100%); } .game-goods:nth-child(2) { left: 50%; transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); } .game-goods:last-child { left: 100%; transform: translateX(-100%.........完整代码请登录后点击上方下载按钮下载查看
网友评论0