马黑黑 发表于 2025-7-16 17:43

看看这个造型

<style>
    .wrap { position: relative; height: 460px; display: grid; place-items: center; }
    .box {
      width: 100px;
      height: 100px;
      border: 4px solid teal;
      border-radius: 0 50% 50%;
      animation: rot 8s linear infinite;
      display: grid;
      place-items: center;
      position: absolute;
    }
    .box::before, .box::after {
      position: absolute;
      content: '';
      width: 180%;
      height: 180%;
      background: repeating-linear-gradient(
            to top right,
            transparent 0%,
            transparent calc(50% - 2px),
            teal 50%,
            transparent calc(50% + 2px),
            transparent 0
      ) 50% 50% / 20% 20%;
    }
    .box::after {
      transform: rotate(90deg);
    }
    @keyframes rot {
      to {
            transform: rotate(360deg);
      }
    }
</style>

<div class="wrap">
    <div class="box"></div>
</div>

马黑黑 发表于 2025-7-16 17:43

参考代码：

<style>
    .box {
      margin: 0 auto;
      margin-top: 150px;
      width: 100px;
      height: 100px;
      border: 4px solid teal;
      border-radius: 0 50% 50%;
      animation: rot 8s linear infinite;
      display: grid;
      place-items: center;
      position: relative;
    }
    .box::before, .box::after {
      position: absolute;
      content: '';
      width: 180%;
      height: 180%;
      background: repeating-linear-gradient(
            to top right,
            transparent 0%,
            transparent calc(50% - 2px),
            teal 50%,
            transparent calc(50% + 2px),
            transparent 0
      ) 50% 50% / 20% 20%;
    }
    .box::after {
      transform: rotate(90deg);
    }
    @keyframes rot {
      to {
            transform: rotate(360deg);
      }
    }
</style>

<div class="box"></div>

梦江南 发表于 2025-7-16 18:46

老师的这个造型很特别，精彩。

马黑黑 发表于 2025-7-16 18:54

梦江南 发表于 2025-7-16 18:46
老师的这个造型很特别，精彩。

{:4_190:}

杨帆 发表于 2025-7-16 21:00

造型优美，动作优雅，谢谢老师分享{:4_190:}

马黑黑 发表于 2025-7-16 21:55

杨帆 发表于 2025-7-16 21:00
造型优美，动作优雅，谢谢老师分享

{:4_191:}

红影 发表于 2025-7-17 10:47

那个线条的格网以前黑黑应该讲过的，但是遇到repeating-之类的感觉一下子就变复杂，这个在一句里同时有了横向和纵向的平铺，更复杂{:4_187:}

马黑黑 发表于 2025-7-17 18:10

红影 发表于 2025-7-17 10:47
那个线条的格网以前黑黑应该讲过的，但是遇到repeating-之类的感觉一下子就变复杂，这个在一句里同时有了横 ...

原理是一样的，repeating 只是重复

红影 发表于 2025-7-17 21:48

马黑黑 发表于 2025-7-17 18:10
原理是一样的，repeating 只是重复

单个的比较容易，重复的要想想才行。

马黑黑 发表于 2025-7-17 21:51

红影 发表于 2025-7-17 21:48
单个的比较容易，重复的要想想才行。

你如果不重复，有些连续性的东东是表现不出来的。

有些重复，可以通过 repeating-* 实现，有时候，也可以通过设置 repeat、repeatX/Y 配合·背景尺寸实现

红影 发表于 2025-7-17 22:13

马黑黑 发表于 2025-7-17 21:51
你如果不重复，有些连续性的东东是表现不出来的。

有些重复，可以通过 repeating-* 实现，有时候，也 ...

后面的那些，比如配合背景尺寸的，感觉更难。

马黑黑 发表于 2025-7-17 22:47

红影 发表于 2025-7-17 22:13
后面的那些，比如配合背景尺寸的，感觉更难。

这是早起最常用的方法，后来出现 repeating-*，可玩性更强

红影 发表于 2025-7-18 20:45

马黑黑 发表于 2025-7-17 22:47
这是早起最常用的方法，后来出现 repeating-*，可玩性更强

可玩性强，被弄迷糊的时候也多了{:4_173:}

马黑黑 发表于 2025-7-18 21:24

红影 发表于 2025-7-18 20:45
可玩性强，被弄迷糊的时候也多了

迷迷糊糊最幸福

红影 发表于 2025-7-18 22:00

马黑黑 发表于 2025-7-18 21:24
迷迷糊糊最幸福

也只能这样认为了{:4_173:}

马黑黑 发表于 2025-7-19 12:48

红影 发表于 2025-7-18 22:00
也只能这样认为了

挺不错的

红影 发表于 2025-7-19 21:39

马黑黑 发表于 2025-7-19 12:48
挺不错的

那就继续迷糊着吧{:4_204:}

马黑黑 发表于 2025-7-19 23:48

红影 发表于 2025-7-19 21:39
那就继续迷糊着吧

墙裂支持
页: [1]
查看完整版本: 看看这个造型