纯css实现多彩多色旋转按钮效果-html代码-BFW代码库

纯css实现多彩多色旋转按钮效果

代码语言：html

代码描述：纯css实现多彩多色旋转按钮效果

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


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

<style>
* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: grid;
  place-content: center;
  background-color: #2b2e43;
  margin: 0;
}

.wheel {
  width: 70vmin;
  height: 70vmin;
  background-color: white;
  position: relative;
  border-radius: 50%;
  border: 8px solid white;
  box-shadow: 0 0 5px #ccc;
  background-image: radial-gradient(white 45%, #ccc 45%, 46%, transparent 46%), radial-gradient(black, transparent 55%, transparent 65%, black), conic-gradient(from calc(36deg / 2), hsl(calc(36deg * 1), 80%, 60%) calc(36deg * 1), hsl(calc(36deg * (1 + 1)), 80%, 60%) calc(36deg * 1), hsl(calc(36deg * 2), 80%, 60%) calc(36deg * 2), hsl(calc(36deg * (2 + 1)), 80%, 60%) calc(36deg * 2), hsl(calc(36deg * 3), 80%, 60%) calc(36deg * 3), hsl(calc(36deg * (3 + 1)), 80%, 60%) calc(36deg * 3), hsl(calc(36deg * 4), 80%, 60%) calc(36deg * 4), hsl(calc(36deg * (4 + 1)), 80%, 60%) calc(36deg * 4), hsl(calc(36deg * 5), 80%, 60%) calc(36deg * 5), hsl(calc(36deg * (5 + 1)), 80%, 60%) calc(36deg * 5), hsl(calc(36deg * 6), 80%, 60%) calc(36deg * 6), hsl(calc(36deg * (6 + 1)), 80%, 60%) calc(36deg * 6), hsl(calc(36deg * 7), 80%, 60%) calc(36deg * 7), hsl(calc(36deg * (7 + 1)), 80%, 60%) calc(36deg * 7), hsl(calc(36deg * 8), 80%, 60%) calc(36deg * 8), hsl(calc(36deg * (8 + 1)), 80%, 60%) calc(36deg * 8), hsl(calc(36deg * 9), 80%, 60%) calc(36deg * 9), hsl(calc(36deg * (9 + 1)), 80%, 60%) calc(36deg * 9), hsl(calc(36deg * 10), 80%, 60%) calc(36deg * 10), hsl(calc(36deg * (10 + 1)), 80%, 60%) calc(36deg * 10));
  filter: drop-shadow(0 0.1rem 0.4rem rgba(0, 0, 0, 0.35));
  animation: spin 3s ease-in-out infinite;
}

.wheel:before {
  --s: 36deg;
  --gap: 1deg;
  --i: 35deg;
  --mask: repeating-conic-gradient(
    from calc(var(--gap) / 20),
    transparent,
    transparent var(--gap),
    white var(--gap),
    white calc(var(--i) - var(--gap)),
    transparent calc(var(--i) - var(--gap)),
    transparent calc(var(--i) + var(--gap))
  );
  con.........完整代码请登录后点击上方下载按钮下载查看