js+css实现金额数字抽奖大转盘效果代码
代码语言:html
所属分类:大转盘
代码描述:js+css实现金额数字抽奖大转盘效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Anton+SC&display=swap'> <style> html, body { height: 100%; overflow: hidden; } body { background-color: #333; display: grid; justify-content: center; } .score, .round { color: white; font-family: monospace; position: fixed; top: 10px; } .score { left: 10px; } .round { right: 10px; } @-webkit-keyframes jolt { from { transform: translate(-50%, -16px) rotate(150deg); } to { transform: translate(-50%, -16px) rotate(180deg); } } @keyframes jolt { from { transform: translate(-50%, -16px) rotate(150deg); } to { transform: translate(-50%, -16px) rotate(180deg); } } .casing { margin-top: 100px; position: relative; width: 400px; height: 400px; border: 2px solid grey; border-radius: 1000px; box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2); } .casing .wheel { position: absolute; left: 0; top: 0; width: 400px; height: 400px; overflow: hidden; border-radius: 1000px; cursor: pointer; } .casing .wheel.rotating { cursor: initial; } .casing .wheel .cap { position: absolute; top: 200px; left: 200px; width: 100px; height: 100px; border-radius: 1000px; background-color: black; border: 2px solid white; transform: translate(-50%, -50%); box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2); } .casing .wheel .center { position: absolute; top: 200px; left: 200px; } .casing .wheel .center .segment { position: absolute; top: 0; height: 0; width: 0; border-style: solid; transform-origin: 50% 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .casing .wheel .center .txt { position: absolute; top: 0; left: 0; height: 200px; color: white; transform: translate(-50%, -16px) rotate(180deg); font-size: 28px; display: flex; justify-content: center; align-items: flex-start; line-height: 1; font-family: "Anton SC", sans-serif; font-weight: 400; font-style: normal; text-shadow: 0 0 3px orange; } .casing .wheel .center .divider { position: absolute; height: 200px; top: 0; left: 0; width: 1px; background-color: black; transform-origin: 50% 0; } .casing .wheel .center .divider::after { position: absolute; content: ""; width: 6px; height: 6px; border-radius: 1000px; background-color: white; left: 0; bottom: 2px; transform: translateX(-1px); box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2); } .casing .pin { position: absolute; width: 10px; height: 10px; top: 0; left: 50%; transform: translate(-50%, -16px) rotate(180deg); transform-origin: 50%, 4px; width: 0px; height: 0px; border-style: solid; border-width: 0 10px 20px 10px; border-color: transparent transparent #ffffff transparent; border-radius: 4px; } .casing .pin.jolt { -webkit-animation: jolt 250ms ease-out forwards; animation: jolt 250ms ease-out forwards; } </style> </head> <body translate="no"> <div class="casing"> <div id="w" class="wheel"> <div id="c" class="center"></div> <div class="cap"></div> </div> <div id="p" class="pin"></div> </div> <div id="s" class="score">0</div> <div id="r" class="round">0</div> <script> const rewards = [ [5000, "#FF0000"], [10, "#0000FF"], [500, "#FFDD00"], [100, "#FFA500"], [2500, "#4B0082"], [50, "#00CC00"], [250, "#EE82EE"], ["x2", "#FF0000"], // double [100, "#FFA500"], [":2", "#FFDD00"], // half [100.........完整代码请登录后点击上方下载按钮下载查看
网友评论0