大转盘效果-html代码-BFW代码库

大转盘效果

代码语言：html

所属分类：动画

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

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

<title>  Life&#39;s Wheel</title>
<style>
  @import url("https://fonts.googleapis.com/css?family=Atma:700|Source+Sans+Pro:900&display=swap");

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body {
    min-height: 100vh;
    font-family: "Source Sans Pro", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: hsl(0, 0%, 100%);
    background: url("data:image/svg+xml,%3Csvg opacity='0.1' xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100' width='350' height='350'%3E%3Cpath id='sign' d='M -25 25 a 25 25 0 0 1 -25 -25 25 25 0 0 1 50 0 25 25 0 0 0 50 0 25 25 0 0 0 -25 -25' fill='none' stroke='white' stroke-width='5' /%3E%3Cuse href='%23sign' x='50' y='50' /%3E%3Cuse href='%23sign' x='50' y='-50' /%3E%3Cuse href='%23sign' x='-50' y='50' /%3E%3Cuse href='%23sign' x='-50' y='-50' /%3E%3C/svg%3E"),
        hsl(300, 90%, 3%);
    background-size: 50px;
}

body > * + * {
    margin-top: 2rem;
}

h1 {
    text-align: center;
    font-size: 5rem;
    text-transform: uppercase;
    font-weight: 900;
    margin: 2rem 1rem;
    position: relative;
}

/* add a short instruction with a pseudo element */
h1:after {
    font-size: 1.25rem;
    position: absolute;
    bottom: 0%;
    left: 100%;
    transform: translateY(50%) rotate(20deg);
    content: "give it a spin!";
    font-family: "Atma", cursive;
    font-weight: 700;
}

/* remove the default properties from the button */
button {
    background: none;
    border: none;
    color: inherit;
    /* uh, apparently this works to change the color of the nested svg */
    transition: color 0.25s ease-in-out;
}

/* replicate the blue outline with a light glow on the svg and by showing the marker on the selected slice */
button:focus {
    outline: none;
}
button svg {
    transition: filter 0.25s ease-in-out;
}
button:focus svg {
    filter: drop-shadow(0 0 5px hsla(0, 0%, 100%, 0.2));
}
button #mark {
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
}
button:focus #mark {
    opacity: 1;
}

/* utility class changing the cursor
added to the button while the transition is ongoing
*/
.not-allowed {
    cursor: not-allowed;
}
</style>

</head>
<body translate="no">

<h1>Life</h1>
<button aria-label="Spin the wheel">

<svg aria-hidden="true" viewBox="-50 -50 100 100" width="300" height="300">

<defs>
<path id="semicircle" d="M -50 0 a 50 50 0 0 1 100 0" />
<path id="line" stroke-width="2" d="M -50 0 h 50" />
<mask id="mask--slice">
<use href="#semicircle" fill="hsl(0, 0%, 100%)" />
<use transform="rotate(36)" href="#semicircle" fill="hsl(0, 0%, 0%)" />

<use href="#line" stroke="hsl(0, 0%, 0%)" />
<use href="#line" stroke="hsl(0, 0%, 0%)" transform="rotate(36)" />
 <circle r="22" fill="hsl(0, 0%, 0%)" />
</mask>
<use id="slice" href="#semicircle" mask="url(#mask--slice)" />
</defs>

<g>
<use href="#slice" fill="hsl(0, 90%, 60%)" />
<use href="#slice" fill="hsl(36, 90%, 60%)" transform="rotate(36)" />
<use href="#slice" fill="hsl(72, 90%, 60%)" transform="rotate(72)" />
<use href="#slice" fill="hsl(108, 90%, 60%)" transform="rotate(108)" />
<us.........完整代码请登录后点击上方下载按钮下载查看