看看这个造型

马黑黑

马黑黑

参考代码：

1. <style>
   
2.     .box {
   
3.         margin: 0 auto;
   
4.         margin-top: 150px;
   
5.         width: 100px;
   
6.         height: 100px;
   
7.         border: 4px solid teal;
   
8.         border-radius: 0 50% 50%;
   
9.         animation: rot 8s linear infinite;
   
10.         display: grid;
    
11.         place-items: center;
    
12.         position: relative;
    
13.     }
    
14.     .box::before, .box::after {
    
15.         position: absolute;
    
16.         content: '';
    
17.         width: 180%;
    
18.         height: 180%;
    
19.         background: repeating-linear-gradient(
    
20.             to top right,
    
21.             transparent 0%,
    
22.             transparent calc(50% - 2px),
    
23.             teal 50%,
    
24.             transparent calc(50% + 2px),
    
25.             transparent 0
    
26.         ) 50% 50% / 20% 20%;
    
27.     }
    
28.     .box::after {
    
29.         transform: rotate(90deg);
    
30.     }
    
31.     @keyframes rot {
    
32.         to {
    
33.             transform: rotate(360deg);
    
34.         }
    
35.     }
    
36. </style>
    
37. 
    
38. <div class="box"></div>

复制代码

梦江南

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

马黑黑

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

杨帆

造型优美，动作优雅，谢谢老师分享

马黑黑

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

红影

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

马黑黑

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

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

红影

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

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

马黑黑

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

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

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

红影

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

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

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

马黑黑

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

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

红影

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

可玩性强，被弄迷糊的时候也多了

马黑黑

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

迷迷糊糊最幸福

红影

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

也只能这样认为了

马黑黑

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

挺不错的

红影

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

那就继续迷糊着吧

马黑黑

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

墙裂支持