js+css实现老虎机抽奖动画代码
代码语言:html
所属分类:大转盘
代码描述:js+css实现老虎机抽奖动画代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .debug { position: fixed; top: 4px; left: 50%; transform: translateX(-50%); padding: 4px; background: white; border: 1px solid rgba(0, 0, 0, 0.3); font-family: monospace; font-size: 1.6rem; } html, body { height: 100%; } body { display: flex; justify-content: center; align-items: center; background: linear-gradient(45deg, grey 0%, lightgray 100%); } .slots { position: relative; width: 276.5px; height: 237px; display: flex; justify-content: space-between; padding: 23.7px; background: linear-gradient(45deg, grey 0%, lightgray 100%); border-top: 1px solid rgba(255, 255, 255, 0.6); border-right: 1px solid rgba(255, 255, 255, 0.6); border-left: 1px solid rgba(0, 0, 0, 0.4); border-bottom: 1px solid rgba(0, 0, 0, 0.4); box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3); border-radius: 3px; } .slots::before, .slots::after { content: ""; position: absolute; top: 50%; width: 10px; height: 2px; background-color: rgba(0, 0, 0, 0.5); } .slots::before { left: 0; transform: translate(-200%, -50%); } .slots::after { right: 0; transform: translate(200%, -50%); } @-webkit-keyframes win1 { 0% { background: linear-gradient(45deg, orange 0%, yellow 100%); box-shadow: 0 0 80px orange; } 100% { background: linear-gradient(45deg, grey 0%, lightgrey 100%); box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3); } } @keyframes win1 { 0% { background: linear-gradient(45deg, orange 0%, yellow 100%); box-shadow: 0 0 80px orange; } 100% { background: linear-gradient(45deg, grey 0%, lightgrey 100%); box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3); } } @-webkit-keyframes win2 { 0% { background: linear-gradient(45deg, lightblue 0%, lightgreen 100%); box-shadow: 0 0 80px lightgreen; } 100% { background: linear-gradient(45deg, grey 0%, lightgrey 100%); box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3); } } @keyframes win2 { 0% { background: linear-gradient(45deg, lightblue 0%, lightgreen 100%); box-shadow: 0 0 80px lightgreen; } 100% { background: linear-gradient(45deg, grey 0%, lightgrey 100%); box-shadow: -2px 2px 3px rgba(0, 0, 0, 0.3); } } .slots.win1 { -webkit-animation: win1 200ms steps(2, end) i.........完整代码请登录后点击上方下载按钮下载查看
网友评论0