div+css实现颜色块色卡效果代码
代码语言:html
所属分类:布局界面
代码描述: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