div+css实现排行榜单动态修改背景色hue效果代码-html代码-BFW代码库

div+css实现排行榜单动态修改背景色hue效果代码

代码语言：html

代码描述：div+css实现排行榜单动态修改背景色hue效果代码

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

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

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

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
@layer demo.colors {
  :root {
    --hue: 230;
    --primary: oklch(70% .2 var(--hue));
    --primary-highlight: oklch(97% .2 var(--hue));
    --header-bg: oklch(35% .01 200);
    --text: white;
  }
  
  li {
    --_bg: oklch(
      /* decrease lightness as list grows */
      calc(75% - (var(--i) * 5%)) 
      
      /* decrease chroma as list grows */
      calc(.2 - (var(--i) * .01)) 
      
      /* lightly rotate the hue as the list grows */
      calc(var(--hue) - (var(--i) + 5))
    );
  }
}

@layer demo.color-usage {
  html {
    background: radial-gradient(
      circle at center, 
      var(--primary-highlight), 
      var(--primary)
    );
  }
 .........完整代码请登录后点击上方下载按钮下载查看