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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0