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地址:3.233.242.67,欢迎您的访问!

温馨提示 : 非特殊注明,否则均为李联华的博客原创文章,本站文章未经授权禁止任何形式转载
文章链接:https://www.ooize.com/css-background.html

订阅文章

在下面输入您的电子邮件地址以订阅我们的文章

订阅
提醒
guest

0 评论
内联反馈
查看所有评论
Loading...