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

代码语言：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 { outline-width: 0; }
circle, text, use { transition: all 1s ease-in-out; }
h1 {
  font-size: clamp(1.5rem, 0.4286rem + 3.4286vw, 3rem);
  font-weight: 600;
  margin-top: 0;
  text-wrap: balance;
}
li, menu { all: unset; }
menu {
  inset-inline-start: 0;
  position: absolute;
  text-align: center;
  transform: translateY(-150vh);
  transition: all 1s ease-in-out;
  width: 100%;
  z-index: 1;
}
menu p {
  color: hsla(0, 0%, 100%, 0.7);
  font-size: clamp(0.625rem, 1vw + 0.4rem, 1rem);
  line-height: 2;
  max-inline-size: 50ch;
  margin: 1ch auto;
}
menu span::after {
  content: "";
  display: block;
  height: 2px;
  background-image: linear-gradient(to right, transparent, hsl(46, 45%, 55%), transparent);
  margin-block-start: 1ch;
}
menu:target { transform: translateY(100px); }
menu:target ~ svg {
  --light: 35%;
  --txo: 0.5;
  --tx1: -75%;
  --ty1: -50%;
  --tx2: 66.5%;
  --ty2: -50%;
  --tx3: 0%;
  --ty3: -75%;
  --tx4: 0%;
  --ty4: 50%;
}
menu:target ~ svg circle {
  opacity: .15;
}
svg {
  margin-inline: auto;
  overflow: visible;
  position: relative;
  user-select: none;
  width: 100%;
}
text {
  opacity: var(--txo, 1);
}

.ring1 {
  stroke: var(--r1);
  stroke-width: var(--sw);
  transform: translate(var(--tx1, 0%), var(--ty1, 0%));
}
.ring2 {
  stroke: var(--r2);
  stroke-width: var(--sw);
  transform: translate(var(--tx2, 0%), var(--ty2, 0%));
}
.ring3 {
  stroke: var(--r3);
  stroke-width: var(--sw);
  transform: translate(var(--tx3, 0%), var(--ty3, 0%));
}
.ring4 {
  stroke: var(--r4);
  stroke-width: var(--sw);
  transform: translate(var(--tx4, 0%), var(--ty4, 0%));
}
</style>

  
</head>

<body translate="no">
  <p>★ The Michelin ★</p>
<h1>How was your dining experience?</h1>

<main>
  <menu id="s5">
    <li>
      <span>⋅ EXQUISITE ⋅</span>
      <p>From the first bite to the last, the exquisite flavors and impeccable presentation of the dishes transported me to a realm of culinary perfection.</p>
      <a href="#">CLOSE</a>
    </li>
  </menu>
  <menu id="s4">
    <li>
      <span>⋅ DELICIOUS ⋅</span>
      <p>Every bite was a delight to the senses, with each dish showcasing remarkable creativity and flawless execution.</p>
      <a href="#">CLOSE</a>
    </li>
  </menu>
  <menu id="s3">
    <li>
      <span>⋅ VERY GOOD ⋅</span>
      <p>The flavors were well-balanced, and the presentation was elegant, resulting in a satisfying culinary experience.</p>
      <a href="#">CLOSE</a>
    </li>
  </menu>
  <menu id="s2&quo.........完整代码请登录后点击上方下载按钮下载查看