css的random实现大转盘代码-html代码-BFW代码库

css的random实现大转盘代码

代码语言：html

所属分类：大转盘

代码描述：css的random实现大转盘代码，需要浏览器支持css的random()

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
<style>
@import url(https://fonts.bunny.net/css?family=jura:300,700);
@layer base,notes, demo;

@layer demo{
  :root{
    --items: 12;
    --spin-easing: cubic-bezier(0, 0.061, 0, 1.032);
    /* define angles for wheel background gradient */
    --slice-angle: calc(360deg / var(--items));
    --start-angle: calc(var(--slice-angle) / 2);

    --wheel-radius: min(40vw, 300px);
    --wheel-size: calc(var(--wheel-radius) * 2);
  	--wheel-padding: 10%;
  	--item-radius: calc(var(--wheel-radius) - var(--wheel-padding));

    /* bacgkround colors for wheel */
    --wheel-bg-1: oklch(0.80 0.16 30);
    --wheel-bg-2: oklch(0.74 0.16 140);
    --wheel-bg-3: oklch(0.80 0.16 240);
    --wheel-bg-4: oklch(0.74 0.16 320);

    --marker-bg-color: black;
    --button-text-color: white;

    

    /* random values - Safari only */
   
    /* duration of the spin to add randomness */
    --spin-duration: random(1s, 3s);
    .........完整代码请登录后点击上方下载按钮下载查看