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

代码语言：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: var(--cap-size);
        }

        /* Hide select dropdown from SVG import file */
        .cap select {
            display: none;
        }

        .cap svg {
            width: 100%;
        }

        .ticker {
            position: relative;
            left: calc(var(--size) /-15);
            width: calc(var(--size) /10);
            height: calc(var(--size) /20);
            background: var(--lg);
            z-index: 1;
            -webkit-clip-path: polygon(20% 0, 100% 50%, 20% 100%, 0% 50%);
            clip-path: polygon(20% 0, 100% 50%, 20% 100%, 0% 50%);
            transform-origin: center left;
        }

        .btn-spin {
            color: hsl(0deg 0% 100%);
            background: var(--lg);
            border: none;
            font-family: inherit;
            font-size: inherit;
            line-height: inherit;
            text-transform: inherit;
            padding: 0.9rem 2rem 1rem;
            border-radius: 0.25rem;
            cursor: pointer;
            transition: opacity 200ms ease-out;
        }

        .btn-spin:focus {
            outline-offset: 2px;
        }

        .btn-spin:active {
            transform: translateY(1px);
        }

        .btn-spin:disabled {
            cursor: progress;
            opacity: 0.25;
        }

        /* Spinning animation */
        .is-spinning .spinner {
            transition: transform 8s cubic-bezier(0.1, -0.01, 0, 1);
        }

        .is-spinning .ticker {
            -webkit-animation: tick 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
            animation: tick 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
        }

@-webkit-keyframes tick {
            40% {
                transform: rotate(-12deg);
            }
        }

@keyframes tick {
            40% {
                transform: rotate(-12deg);
            }
        }

        /* Selected prize animation */
        .prize.selected .text {
            color: white;
            -webkit-animation: selected 800ms ease;
            animation: selected 800ms ease;
        }

@-webkit-keyframes selected {
            25% {
                transform: scale(1.25);
                text-shadow: 1vmin 1vmin 0 hsla(0 0% 0% / 0.1);
            }
            40% {
                transform: scale(0.92);
                text-shadow: 0 0 0 hsla(0 0% 0% / 0.2);
            }
            60% {
                transform: scale(1.02);
                text-shadow: 0.5vmin 0.5vmin 0 hsla(0 0% 0% / 0.1);
            }
            75% {
                transform: scale(0.98);
            }
            85% {
                transform: scale(1);
            }
        }

@keyframes selected {
            25% {
                transform: scale(1.25);
                text-shadow: 1vmin 1vmin 0 hsla(0 0% 0% / 0.1);
            }
            40% {
                transform: scale(0.92);
                text-shadow: 0 0 0 hsla(0 0% 0% / 0.2);
            }
            60% {
                transform: scale(1.02);
                text-shadow: 0.5vmin 0.5vmin 0 hsla(0 0% 0% / 0.1);
            }
            75% {
                transform: scale(0.98);
            }
            85% {
                transform: scale(1);
            }
        }
    </style>

</head>
<body>


    <div class="deal-wheel">
        <ul class="spinner"></ul>
        <figure class="cap">
            <!-- Grim reaper SVG import -->
            <select id="select-reaction" class="select">
                <option value="resting">resting</option>
                <option value="dancing">dancing</option>
                <option value="laughing">laughing</option>
                <option value="shocked">shocked</option>
            </select>

            <svg class="grim-reaper" data-reaction="resting" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 582 653">
                <defs>
                    <clipPath id="clip-path">
                        <circle class="cls-1" cx="295.6" cy="286.3" r="286.3" />
                    </clipPath>
                    <clipPath id="clip-path-2">
                        <path class="cls-1" d="M460 250c0 130-126 222-151 209-39-22-194-110-194-239S280 54 356 54c33 1 104 66 104 196z" />
                    </clipPath>
                    <clipPath id="clip-path-3">
                        <path class="cls-1" d="M122 426l-100 7s28 161 167 156c37-2 69-27 66-31s-28 13-71-13c-58-35-62-119-62-119z" />
                    </clipPath>
                    <style>
                        .cls-1,
                        .cls-17 {
                            fill: none
                        }

                        .cls-4 {
                            fill: #141414
                        }

                        .cls-5 {
                            fill: #111010
                        }

                        .cls-6 {
                            fill: #fff
                        }

                        .cls-7 {
                            fill: #5c382b
                        }

                        .cls-9 {
                            fill: #232323
                        }

                        .cls-15 {
                            fill: #2d221e
                        }

                        .cls-16 {
                            fill: #4f2610;
                            opacity: .6;
                        }

                        .cls-17 {
                            stroke: #9b8029;
                            stroke-miterlimit: 10;
                            stroke-width: 2.5px
                        }

                        .cls-18 {
                       .........完整代码请登录后点击上方下载按钮下载查看