马黑黑 发表于 2022-1-25 13:38

这个是啥？

<style type="text/css">

.paBox {
        margin: 10px auto;
        width: 400px;
        height: 400px;
        border:1px solid;
        position: relative;
        border-radius: 50%;
        background: darkred;
}

.paBox::before {
        content:"";
        position: absolute;
        left: 0; top: 0;
        background: repeating-radial-gradient(circle, transparent, black,transparent, gray 8%);
        width: 400px;
        height: 400px;
        border-radius: 50%;
        opacity: 0.9;
}

</style>

<div class="paBox"></div>

马黑黑 发表于 2022-1-25 13:40

本帖最后由 马黑黑 于 2022-1-25 13:47 编辑

可以尝试这样修改一些特定值：


<div class="paBox" style="background: repeating-radial-gradient(circle, transparent, black,transparent, gray 18%); "></div>

马黑黑 发表于 2022-1-25 13:40

本帖最后由 马黑黑 于 2022-1-25 13:45 编辑 <br /><br /><div class="paBox" style="background: repeating-radial-gradient(circle, transparent, black,transparent, gray 28%); "></div>

马黑黑 发表于 2022-1-25 13:48

本帖最后由 马黑黑 于 2022-1-25 13:51 编辑

一楼源码：


<style type="text/css">

.paBox {
        margin: 10px auto;
        width: 400px;
        height: 400px;
        border:1px solid;
        position: relative;
        border-radius: 50%;
        background: darkred;
}

.paBox::before {
        content:"";
        position: absolute;
        left: 0; top: 0;
        background: repeating-radial-gradient(circle, transparent, black,transparent, gray 8%);
        width: 400px;
        height: 400px;
        border-radius: 50%;
        opacity: 0.9;
}

</style>

<div class="paBox"></div>

红影 发表于 2022-1-25 13:58

哇，这个纯代码弄出来的图案很有质感啊。黑黑厉害{:4_187:}

红影 发表于 2022-1-25 14:01

马黑黑 发表于 2022-1-25 13:40
可以尝试这样修改一些特定值：

哦，好像百分比大把红都给挤没了

我不去动颜色，来试试把百分比降低点，例如
<div class="paBox" style="background: repeating-radial-gradient(circle, transparent, black,transparent, gray 4%); "></div>

红影 发表于 2022-1-25 14:01


<div class="paBox" style="background: repeating-radial-gradient(circle, transparent, black,transparent, gray 4%); "></div>

红影 发表于 2022-1-25 14:07

<style type="text/css">

.paBox1 {
      margin: 10px auto;
      width: 400px;
      height: 400px;
      border:1px solid;
      position: relative;
      border-radius: 50%;
      background: darkblue;
}

.paBox1::before {
      content:"";
      position: absolute;
      left: 0; top: 0;
      background: repeating-radial-gradient(circle, transparent, black,transparent, gray 16%);
      width: 400px;
      height: 400px;
      border-radius: 50%;
      opacity: 0.9;
}

</style>

<div class="paBox1"></div>

红影 发表于 2022-1-25 14:08

这个是，打靶：十环{:4_173:}

加林森 发表于 2022-1-25 17:51

<style type="text/css">

.paBox {
      margin: 10px auto;
      width: 400px;
      height: 400px;
      border:1px solid;
      position: relative;
      border-radius: 50%;
      background: darkred;
}

.paBox::before {
      content:"";
      position: absolute;
      left: 0; top: 0;
      background: repeating-radial-gradient(circle, transparent, black,transparent, gray 8%);
      width: 400px;
      height: 400px;
      border-radius: 50%;
      opacity: 0.9;
}

</style>

<div class="paBox"></div>

加林森 发表于 2022-1-25 17:52


<div class="paBox" style="background: repeating-radial-gradient(circle, transparent, black,transparent, gray 14%); "></div>

加林森 发表于 2022-1-25 17:53

<div class="paBox" style="background: repeating-radial-gradient(circle, transparent, black,transparent, gray 20%); "></div>

加林森 发表于 2022-1-25 17:54

老黑的代码很厉害啊。佩服佩服。{:4_199:}

马黑黑 发表于 2022-1-25 20:33

加林森 发表于 2022-1-25 17:54
老黑的代码很厉害啊。佩服佩服。

感谢支持

加林森 发表于 2022-1-25 20:35

马黑黑 发表于 2022-1-25 20:33
感谢支持

应该的应该的

马黑黑 发表于 2022-1-25 20:40

加林森 发表于 2022-1-25 20:35
应该的应该的

{:4_190:}

马黑黑 发表于 2022-1-25 20:42

红影 发表于 2022-1-25 14:08
这个是，打靶：十环

挺好。不过，其实这个，应该用两个独立的 div 叠加，这样操纵的自由度会高得多。

加林森 发表于 2022-1-25 20:57

马黑黑 发表于 2022-1-25 20:40


{:4_191:}

马黑黑 发表于 2022-1-25 21:13

{:4_206:}

东篱闲人 发表于 2022-1-25 21:19

蚊香。
页: [1] 2
查看完整版本: 这个是啥？