|
|

楼主 |
发表于 2023-5-25 21:36
|
显示全部楼层
代码
- <css-doodle grid="4">
- :doodle {
- @size: 200px;
- border: 6px solid black;
- border-radius: 50%;
- background: @m60(radial-gradient(black 50%, black 0) @plot(r: 1) / 2px 2px no-repeat), @m12(radial-gradient(black 50%, black 0) @plot(r: 1) / 4px 4px no-repeat);
- }
- @place: center;
- position: absolute;
- @match(i ≤ 12) {
- :before { content: '@pn(4,5,6,7,8,9,10,11,12,1,2,3)'; }
- transform: rotate(calc(@i * 30deg)) translate(80px) rotate(calc(@i * -30deg));
- }
- @nth(13) {
- @size: 10px;
- @shape: circle;
- background: black;
- }
- @nth(14) {
- @size: 2px 100px;
- top: 60px;
- background: black;
- transform-origin: 1px 86px;
- transform: rotate(120deg);
- }
- @nth(15) {
- @size: 3px 80px;
- top: 56px;
- background: black;
- transform-origin: 1.5px 80px;
- transform: rotate(30deg);
- }
- @nth(16) {
- @size: 4px 60px;
- top: 66px;
- background: black;
- transform-origin: 2px 60px;
- transform: rotate(15deg);
- }
- </css-doodle>
- <script>
- let script = document.createElement('script');
- script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
- document.head.appendChild(script);
- </script>
复制代码
|
|