svg+css实现圆环状列表可点击显示文字详情效果代码
代码语言:html
所属分类:其他
代码描述:svg+css实现圆环状列表可点击显示文字详情效果代码,点击每个环会动画过渡出详细的文字介绍。
代码标签: 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%));
}
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0