css实现饱和度色相变化的亮色暗色文字卡片效果代码-html代码-BFW代码库

css实现饱和度色相变化的亮色暗色文字卡片效果代码

代码语言：html

代码描述：css实现饱和度色相变化的亮色暗色文字卡片效果代码

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

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

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

  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600&display=swap");
@property --hue {
  syntax: "<number>";
  inherits: true;
  initial-value: 243.04;
}
@keyframes hue-anim {
  from {
    --hue: 360;
  }
  to {
    --hue: -360;
  }
}
:root {
  --hue: 243.04;
  --swatch-1: oklch(97.1% 0.05 var(--hue));
  --swatch-10: oklch(20.91% 0.05 var(--hue));
  --swatch-6: oklch(48.38% 0.11 var(--hue));
  font-family: "Space Grotesk", sans-serif;
  animation: 20s linear infinite hue-anim;
}

.card {
  display: grid;
  gap: 1ch;
  border-radius: 2ch;
  background: oklch(var(--l) 0.07 var(--hue));
  max-width: 50ch;
  margin: auto;
  padding: 2ch 4ch;
}
.card.light {
  box-shadow: inset 0px 1px 0 white, 0px 0.5px 0.6px oklch(20.91% 0.05 var(--hue)/0.03), 0px 1.6px 1.8px -0.8px oklch(20.91% 0.05 var(--hue)/0.02), 0px 4.1px 4.6px -1.7px oklch(20.91% 0.05 var(--hue)/0.32), 0px 10px 11.3px -2.5px oklch(20.91% 0.05 var(--hue)/0.32);
}
.card.dark {
  box-shadow: 0 0 2px white, 0 0 2px var(--swatch-1), 0 0 2ch var(--swatch-6), 0 0 1ch var(--swatch-6), 0 0 2ch var(--swatch-6), inset 0 0 1ch;
  -webkit-box-reflect: below -2ch linear-gradient(transparent 75%, rgba(255, 255, 255, 0.5));
}

h2 {
  margin-bo.........完整代码请登录后点击上方下载按钮下载查看