css背景

<style>
  css-doodle {
    --color: #E63946,#F1FAEE,#A8DADC,#457B9D,#1D3557;
    --pos: @p(0 0, 0 100%, 100% 0, 100% 100%);
    --size: calc(@r(100%) / @N * @n) calc(@r(100%) / @N * @n);
    --rule: (
      :doodle {
        @grid: 1x120 / 100vw 100vh;
        grid-template: auto / repeat(auto-fill, @r(2vmax));
        grid-auto-rows: @lr;
        grid-auto-flow: dense;
        grid-gap: 1vmax;
        overflow: hidden;
        background: @p(var(--color));
      }

      :container {
        @size: 105%;
      }

      --pos1: var(--pos);
      --pos2: var(--pos);

      grid-column-end: span @ri(12);
      grid-row-end: span @ri(18);

      background:
        radial-gradient(
          circle at var(--pos),
          @stripe(transparent, @p(var(--color)) 1px, transparent)
        )
        @var(--pos1) / @r(100%) @lr
        no-repeat,

        @m(@r8, (
          linear-gradient(@p(var(--color)), @lp)
          @var(--pos1) / var(--size)
          no-repeat
        )),
        radial-gradient(
          circle at var(--pos),
          @p(var(--color)) @r(70%), #0000 0)
          @r(100%) @r(100%) / @r(20vmax, 50vmax) @lr
          @p(round, space),
        linear-gradient(
          @r(360deg),
          @p(var(--color)) @r(20%), #0000 0)
          @r(100%) @r(100%) / @r(5px, 10px) @lr
          @p(round, space);

      :after, :before {
        content: '';
        @size: @r(100%);
        background:
          @m(@r2, (
            linear-gradient(@p(var(--color)), @lp)
            @var(--pos2) / var(--size)
            no-repeat
          )),
          radial-gradient(
            circle at var(--pos),
            @p(var(--color)) @r(70%), #0000 0)
            @r(100%) @r(100%) / @r(5vmax, 25vmax) @lr
            @p(round, space),
          linear-gradient(
            @r(360deg),
            @p(var(--color)) @r(20%), #0000 0)
            @r(100%) @r(100%) / @r(2px, 5px) @lr
            @p(round, space);
      }
    );
  }
  body { 
    margin: 0
  }
</style>
<css-doodle use="var(--rule)" click-to-update></css-doodle>

©️李联华的博客网 当前IP地址：18.226.82.32，归属地:俄亥俄州Dublin ，欢迎您的访问！