使用nth-child作为css变量（variable）

Use nth-child as CSS variable

css, 基本语法

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2030
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
  background-color: #222;
}
h1 {
  text-align: center;
  color: #999;
}
ul {
  counter-reset: num;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
li {
  box-sizing: border-box;
  width: 3em;
  height: 3em;
  border: 1px solid #222;
  display: flex;
  justify-content: center;
  align-items: center;
  counter-increment: num;
  --digit-1: 0;
  --digit-2: 0;
  --h: calc(var(--digit-1) + var(--digit-2));
  --delay: calc( (var(--digit-1) + var(--digit-2)) * 0.1s);
  background-color: hsla(var(--h), 100%, 60%, 0.9);
  animation: roll infinite 10s var(--delay) both;
}
li::before {
  /* css counter can not calc in variables. */
  content: counter(num);
}
li::after {
  counter-reset: i1 var(--h);
  color: #fff;
  text-shadow: 0 0 2px #000, 0 0 3px #000;
  /* if you want to check var(--h),Remove the comment of the line below. */
  /* content: counter( i1 ); */
}

/* Get element order */
li:nth-child(10n + 0) {
  --digit-1: 0;
}
li:nth-child(10n + 1) {
  --digit-1: 1;
}
li:nth-child(10n + 2) {
  --digit-1: 2;
}
li:nth-child(10n + 3) {
  --digit-1: 3;
}
li:nth-child(10n + 4) {
  --digit-1: 4;
}
li:nth-child(10n + 5) {
  --digit-1: 5;
}
li:nth-child(10n + 6) {
  --digit-1: 6;
}
li:nth-child(10n + 7) {
  --digit-1: 7;
}
li:nth-child(10n + 8) {
  --digit-1: 8;
}
li:nth-child(10n + 9) {
  --digit-1: 9;
}

li:nth-child(-n + 10) {
  --digit-2: 0;
}
li:nth-child(n + 10):nth-child(-n + 20) {
  --digit-2: 10;
}
li:nth-child(n + 20):nth-child(-n + 30) {
  --digit-2: 20;
}
li:nth-child(n + 30):nth-child(-n + 40) {
  --digit-2: 30;
}
li:nth-child(n + 40):nth-child(-n + 50) {
  --digit-2: 40;
}

@keyframes roll {
  0%,
  30% {
    transform: rotate(0turn);
  }
  50%,
  100% {
    transform: rotate(1turn);
  }
}

HTML

Use nth-child as CSS variable

css, 基本语法

编辑器支持Emmet

快捷键

Use nth-child as CSS variable

css, 基本语法

使用css-doodle.js实现的12个渐变（linear-gradient）图案背景

使用CSS变量、弹性盒（flexbox）和路径裁剪（clip-path）构建的响应式信息图

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：