svg+js实现一个大转盘效果代码-html代码-BFW代码库

svg+js实现一个大转盘效果代码

代码语言：html

所属分类：大转盘

代码描述：svg+js实现一个大转盘效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
@import url("https://fonts.googleapis.com/css2?family=Girassol&display=swap");

        * {
            box-sizing: border-box;
        }

        html,
        body {
            height: 100%;
        }

        body {
            display: grid;
            place-items: center;
            overflow: hidden;
        }

        .deal-wheel {
            --size: clamp(250px, 80vmin, 700px);
            --lg-hs: 0 3%;
            --lg-stop: 50%;
            --lg: linear-gradient(
            hsl(var(--lg-hs) 0%) 0 var(--lg-stop),
            hsl(var(--lg-hs) 20%) var(--lg-stop) 100%
            );

            position: relative;
            display: grid;
            grid-gap: calc(var(--size) /20);
            align-items: center;
            grid-template-areas:
            "spinner"
            "trigger";
            font-family: "Girassol", sans-serif;
            font-size: calc(var(--size) /21);
            line-height: 1;
            text-transform: lowercase;
        }

        .deal-wheel > * {
            grid-area: spinner;
        }

        .deal-wheel .btn-spin {
            grid-area: trigger;
            justify-self: center;
        }

        .spinner {
            position: relative;
            display: grid;
            align-items: center;
            grid-template-areas: "spinner";
            width: var(--size);
            height: var(--size);
            transform: rotate(calc(var(--rotate,25) * 1deg));
            border-radius: 50%;
            box-shadow: inset 0 0 0 calc(var(--size) / 40) hsl(0deg 0% 0% / 0.06);
        }

        .spinner * {
            grid-area: spinner;
        }

        .prize {
            position: relative;
            display: flex;
            align-items: center;
            padding: 0 calc(var(--size) / 6) 0 calc(var(--size) / 20);
            width: 50%;
            height: 50%;
            transform-origin: center right;
            transform: rotate(var(--rotate));
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .cap {
            --cap-size: calc(var(--size) /4);
            position: relative;
            justify-self: center;
            width: var(--cap-size);
            height:.........完整代码请登录后点击上方下载按钮下载查看