svg+css实现圆环状列表可点击显示文字详情效果代码-html代码-BFW代码库

svg+css实现圆环状列表可点击显示文字详情效果代码

代码语言：html

所属分类：其他

代码描述：svg+css实现圆环状列表可点击显示文字详情效果代码，点击每个环会动画过渡出详细的文字介绍。

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

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

<head>
  <meta charset="UTF-8">
  


  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');
* {
  box-sizing: border-box;
}
html {
  height: -webkit-fill-available;
  scroll-behavior: smooth;
}
body {
  --l: 0.6;
  --light: 75%;
  --sw: 75;
  --r1: oklch(var(--l) 0.1 60 / 0.75);
  --r2: oklch(calc(var(--l) + 0.05) 0.1 71 / 0.75);
  --r3: oklch(calc(var(--l) + 0.10) 0.1 82 / 0.75);
  --r4: oklch(calc(var(--l) + 0.15) 0.1 93 / 0.75);

  background-image: linear-gradient(60deg, hsl(40, 100%, 0%), hsl(330, 100%, 10%));
  color: hsl(46, 45%, 55%);
  display: grid;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1rem, 1.1vw + 0.8rem, 1.5rem);
  height: 100dvh;
  justify-content: center;
  letter-spacing: 3px;
  margin: 0;
  overflow-x: hidden;
  padding-inline: 1ch;
  place-content: start center;
  text-align: center;
  text-transform: uppercase;
}

body:before {
  content: "";
  position: fixed;
  inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black);
          mask-image: linear-gradient(to bottom, transparent, black);
  background: linear-gradient(40deg, hsl(330, 100%, 20%), hsl(270, 50%, 0%));	
}

a { color: inherit; text-decoration: none; }
a:focus-visible { outlin.........完整代码请登录后点击上方下载按钮下载查看