div+css实现颜色块色卡效果代码

代码语言:html

所属分类:布局界面

代码描述:div+css实现颜色块色卡效果代码

代码标签: div css 颜色 色卡

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

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

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
.ac .a {
  background-color: hsl(calc(var(--a) * 10deg), 75%, calc(var(--l) * 6% + 15%));
  inset: 0;
}

div {
  box-sizing: border-box;
  transform-style: preserve-3d;
}

.cont {
  top: calc(50vh - 20vmin);
  left: calc(50vw - 20vmin);
  container-type: size;
  width: 40vmin;
  height: 40vmin;
  border-radius: 100vmax;
  position: relative;
  perspective: 40em;
  transition: 2s linear;
}
.cont .ac {
  pointer-events: none;
  position: absolute;
  container-type: size;
  height: 15cqh;
  width: 100cqw;
  top: 50%;
  left: 50%;
  transform: rotatez(270deg);
  clip-path: polygon(0 0, 100% 100%, 100% 0);
  transition: 1s ease-in-out;
  offset-path: border-box;
  offset-distance: calc(var(--a) * 10% / 3.6);
  display: flex;
}
.cont .ac .a {
  width: 10cqw;
  height: 100cqh;
  border: 1px solid var(--clr);
  border-width: 0 0.25cqmin;
  transition: 1s ease-in-out;
}

.cont:hover {
  rotate: 360deg;
}
.cont:hover .ac {
  flex-direction: row-reverse;
  transform: rotatez(360deg);
  clip-path: polygon(50% 50%, 0 0, 0 100%);
}

body {
  --clr: #F9F6EF;
  min-height: 100vh;
  margin: 0;
  background-color: var(--clr);
}

.cont:after {
  content: "";
  position: absolute;
  width: 200%;
  height: 10%;
  border-radius: 100%;
  background-color: #0005;
  filter: blur(1em);
  transition: 2s linear;
  offset-path: border-box;
  offset-anchor: 50% -65vmin;
  offset-distance: 0%;
}

.cont:hover:after {
  width: 150%;
  offset-distance: -100%;
}
</style>

  
  
  
</head>

<body translate="no">
  <div class="cont">
  <div class="ac" style="--a:1">
    <div class="a" style="--l:1"></div>
    <div class="a" style="--l:2"></div>
    <div class="a" style="--l:3"></div>
    <div class="a" style="--l:4"></div>
    <div class="a" style="--l:5"></div>
    <div class="a" style="--l:6"></div>
    <div class="a" style="--l:7"></div>
    <div class="a" style="--l:8"></div>
    <div class="a" style="--l:9"></div>
    <div class="a" style="--l:10"></div>
  </div>
  <div class="ac" style="--a:2">
    <div class="a" style="--l:1"></div>
    <div class="a" style="--l:2"></div>
    <div class="a" style="--l:3"></div>
    <div class="a" style="--l:4"></div>
    <div class="a" style="--l:5"></div>
    <div class="a" style="--l:6"></div>
    <div class="a" style="--l:7"></div>
    <div class="a" style="--l:8"></div>
    <div class="a" style="--l:9"></div>
    <div class="a" style="--l:10"></div>
  </div>
  <div class="ac" style="--a:3">
    <div class="a" style="--l:1"></div>
    <div class="a" style="--l:2"></div>
    <div class="a" style="--l:3"></div>
    <div class="a" style="--l:4"></div>
    <div class="a" style="--l:5"></div>
    <div class="a" style="--l:6"></div>
    <div class="a" style="--l:7"></div>
    <div class="a" style="--l:8"></div>
    <div class="a" style="--l:9"></div>
    <div class="a" style="--l:10"></div>
  </div>
  <div class="ac" style="--a:4">
    <div class="a" style="--l:1"></div>
    <div class="a" style="--l:2"></div>
    <div class="a" style="--l:3"></div>
    <div class="a" style="--l:4"></div>
    <div class="a" style="--l:5"></div>
    <div class="a" style="--l:6"></div>
    <div class="a" style="--l:7"></div>
    <div class="a" style="--l:8"></div>
    <div class="a" style="--l:9"></div>
    <div class="a" style="--l:10"></div>
  </div>
  <div class="ac" style="--a:5">
    <div class="a" style="--l:1"></div>
    <div class="a" style="--l:2"></div>
    <div class="a" style="--l:3"></div>
    <div class="a" style="--l:4"></div>
    <div class="a" style="--l:5"></div>
    <div class="a" style="--l:6"></div>
    <div class="a" style="--l:7"></div>
    <div class="a" style="--l:8"></div>
    <div class="a" style="--l:9"></div>
    <div class="a" style="--l:10"></div>
  </div>
  <div class="ac" style="--a:6">
    <div class="a" style="--l:1"></div>
    <div class="a" style="--l:2"></div>
    <div class="a" style="--l:3"></div>
    <div class="a" style="--l:4"></div>
    <div class="a" style="--l:5"></div>
    <div class="a" style="--l:6"></div>
    <div class="a" style="--l:7"></div>
    <div class="a" style="--l:8"></div>
    <div class="a" style="--l:9"></div>
    <div class="a" style="--l:10"></div>
  </div>
  <div class="ac" style="--a:7">
    <div class="a" style="--l:1"></div>
    <div class="a" style="--l:2"></div>
    <div class="a" style="--l:3"></div>
    <div class="a" style="--l:4"></div>
    <div class="a" style="--l:5"></div>
    <div class="a" style="--l:6"></div>
    <div class="a" style="--l:7"></div>
    <div class="a" style="--l:8"></div>
    <div class="a" style="--l:9"></div>
    <div class="a" style="--l:10"></div>
  </div>
  <div class="ac" style="--a:8">
    <div class="a" style="--l:1"></div>
    <div class="a" style="--l:2"></div>
    <div class="a" style="--l:3"></div>
    <div class="a" style="--l:4"></div>
    <div class="a" style="--l:5"></div>
    <div class="a" style="--l:6"></div>
    <div class="a" style="--l:7"></div>
    <div class="a" style="--l:8"></div>
    <div class="a" style="--l:9"></div>
    <div class="a" style="--l:10"></div>
  </div>
  <div class="ac" style="--a:9">
    <div class="a" style="--l:1"></div>
    <div class="a" style="--l:2"></div>
    <div class="a" style="--l:3"></div>
    <div class="a" style="--l:4"></div>
    <div class="a" style="--l:5"></div>
    <div class="a" style="--l:6"></div>
    <div class="a" style="--l:7"></div>
    <div class="a" style="--l:8"></div>
    <div class="a" style="--l:9"></div>
    <div class="a" style="--l:10"></div>
  </div>
  <div class="ac" style="--a:10">
    <div class="a" style="--l:1"></div>
    <div class="a" style="--l:2"></div>
    <div class="a" style="--l:3"></div>
    <div class="a" style="--l:4"></div>
    <div class="a" style="--l:5"></div>
    <div class="a" style="--l:6"></div>
    <div class="a" style="--l:7"></div>
    <div class="a" style="--l:8"></div>
    <div class="a" style="--l:9"></div>
    <div class="a" style="--l:10"></div>
  </div>
  <div class="ac" style="--a:11">
    <div class="a" style="--l:1"></div>
    <div class="a" style="--l:2"></div>
    <div class="a" style="--l:3"></div>
    <div class="a" style="--l:4"></div>
    <div class="a" style="--l:5"></div>
    <div class="a" style="--l:6"></div>
    <div class="a" style="--l:7"></div>
    <div class="a" style="--l:8"></div>
    <div class="a" style="--l:9"></div>
    <div class="a" style="--l:10"></div>
  </div>
  <div class="ac" style="--a:12">
    <div class="a" style="--l:1"></div>
    <div class="a" style="--l:2"></div>
    <div class="a" style="--l:3"></div>
    <div class="a" style="--l:4"></div>
    <div class="a" style="--l:5"></div>
    <div class="a" style="--l:6"></div>
    <div class="a" style="--l:7"></div>
    <div class="a" style="--l:8"></div>
    <div class="a" style="--l:9"></div>
    <div class="a" style="--l:10"></div>
  </div>
  <div class="ac" style="--a:13">
    <div class="a" style="--l:1"></div>
    <div class="a" style="--l:2"></div>
    <div class="a" style="--l:3"></div>
    <div class="a" style="--l:4"></div>
    <div class="a" style="--l:5"></div>
    <div class="a" style="--l:6"></div>
    <div class="a" style="--l:7"></div>
    <div class="a" style="--l:8"></div>
    <div class="a" style="--l:9"></div>
    <div class="a" style="--l:10"></div>
  </div>
  <div class="ac" style="--a:14">
    <div class="a" style="--l:1"></div>
    <div class="a" style="--l:2"></div>
    <div class="a" style="--l:3"></div>
    <div class="a" style="--l:4"></div>
    <div class="a" style="--l:5"></div>
    <div class="a" style="--l:6"></div>
    <div class="a" style="--l:7"></div>
    <div class="a" style="--l:8"></div>
    <div class="a" style="--l:9"></div>
    <div class="a" style="--l:10"></div>
  </div>
  <div class="ac" style="--a:15">
    <div class="a" style="--l:1"></div>
    <div class="a" style="--l:2"></div>
    <div class="a" style="--l:3"></div>
    <div class="a" style="--l:4"></div>
    <div class="a" style="--l:5"></div>
    <div class="a" style="--l:6"></div>
    <div class="a" style="--l:7"></div>
    <div class="a" style="--l:8"></div>
    <div class="a" style="--l:9"></div>
    <div class="a" style="--l:10"></div>
  </div>
  <div class="ac" style="--a:16">
    <div class="a" style="--l:1"></div>
    <div class="a" style="--l:2"></div>
    <div class="a" style="--l:3"></div>
    <div class="a" style="--l:4"></div>
    <div class="a" style="--l:5"></div>
    <div class="a" style="--l:6"></div>
    <div class="a" style="--l:7"></div>
    <div class="a" style="--l:8"></div>
    <div class="a" style="--l:9"></div>
    <div class="a" style="--l:10"></div>
  </div>
  <div class="ac" style="--a:17">
    <div class="a" style="--l:1"></div>
    <div class="a" style="--l:2"></div>
    <div class="a" style="--l:3"></div>
    <div class="a" style="--l:4"></div>
    <div class="a" style="--l:5"></div>
    <div class="a" style="--l:6"></div>
    <div class="a" style="--l:7"></div>
    <div class="a" style="--l:8"></div>
    <div class="a" style="--l:9"></div>
    <div class=".........完整代码请登录后点击上方下载按钮下载查看

网友评论0