div+css布局实现扇形分散排列的颜色卡片代码-html代码-BFW代码库

div+css布局实现扇形分散排列的颜色卡片代码

代码语言：html

代码描述：div+css布局实现扇形分散排列的颜色卡片代码

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

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

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

  
  
  
<style>
body {
  background: #eee;
  margin: 2rem 0;
}
html {
    scrollbar-width: none;
}

section {
  container-type: inline-size;
  display: grid;
  place-items: end center;
}

section > * {
  --spread: progress(100cqi, 300px, 1440px);
  --end-degree: calc(var(--spread) * 45deg);
  --gap: 1ch;
  --rivet: 1.5rem;
  --start-degree: calc(var(--spread) * -45deg);
  --width: 265px;

  --has-active: 0;
  --is-active: 0;
  --is-before: 0;
  --is-after: 0;

  background-color: #FFF;
  border-radius: 2em;
  box-shadow: 0.5em 0.5em 1.5em -0.125em #0002;
  display: grid;
  font-family: system-ui, ui-sans-serif, sans-serif;
  grid-area: 1 / -1;
  margin: 0;
  padding-block-end: calc(10 * var(--gap));
  position: relative;
  rotate: calc(
    (var(--start-degree) + (var(--end-degree) - var(--start-degree)) * (sibling-index() - 1) / (sibling-count() - 1))
    * (1 - var(--is-active))
    - var(--is-before) * (var(--end-degree) - var(--start-degree)) * (sibling-index() - 1) / (sibling-count() - 1) * 0.85
    + var(--is-after) * (var(--end-degree) - var(--start-degree)) * (1 - (sibling-index() - 1) / (sibling-count() - 1)) * 0.85
  );
  row-gap: var(--gap);
  transform-origin: calc(100% - var(--rivet)) calc(100% - var(--rivet));
  transition: rotate .25s linear;
  width: var(--width);
  z-index: calc(sibling-count() - sibling-index());
  &:first-child {
    align-items: start;
    align-self: stretch;
    background: linear-gradient(180deg, #FE592A 70%, #FFF 0 70%);
    color: #FFF;

    header {
      text-orientation: mixed;
      writing-mode: sideways-lr;
    }

    h2 { font-size: 3rem; }
    h3 { font-size: 1.5rem; }

    /* rivet */
    &::after {
      aspect-ratio: 1;
      background: radial-gradient(circle at 35% 35%, #FFF 0%, #F5F5F5 30%, #E8E8E8 60%, #DDD 80%, #E0E0E0 100%);
      border-radius: 50%;
      bottom: var(--rivet);
      box-shadow:
        0 1px 2px 0 #0004,
        inset 0 -1px 1px 0 #0002,
        inset 0 1px 2px 0 #FFF8;
      content: "";
      display: block;
      height: var(--rivet);
      position: absolute;
      right: var(--rivet);
      scale: 1.5;
      width: var(--rivet);
    }
  }
}

/* State flags via selectors */
section:has(details[open]) > * { --has-active: 1; }
section > :has(~ details[open]) { --is-before: 1; }
details[open] { --is-active: 1; }
details[open] ~ * { --is-after: 1; }

/* Keep details content always visible */
details::details-content {
  content-visibility: visible;
  display: contents;
}
summary {
  list-style: none;
  &::-webkit-details-marker { display: none; }
}

:is(figcaption, summary) {
  display: flex.........完整代码请登录后点击上方下载按钮下载查看