Trespass

马黑黑

:doodle { @size: 160px; background: radial-gradient(darkgreen,transparent 70%,transparent 0); cursor: pointer; } @shape: clover 3; @place: center; background: green; transform: rotate(calc(@i * 40deg)) translate(60px);

马黑黑

帖子代码

1. <style>
   
2. #papa {
   
3.         margin: 0 0 0 calc(50% - 593px);
   
4.         width: 1024px;
   
5.         height: 640px;
   
6.         background: lightblue url('https://638183.freep.cn/638183/t23/webp1/trespass.webp') no-repeat center / cover;
   
7.         box-shadow: 3px 3px 20px #000;
   
8.         position: relative;
   
9.         z-index: 1;
   
10.         --state: paused;
    
11. }
    
12. css-doodle {
    
13.         position: relative;
    
14.         left: 270px;
    
15.         top: 250px;
    
16.         animation: rot 6s infinite linear var(--state);
    
17. }
    
18. @keyframes rot { to { transform: rotate(1turn); } }
    
19. </style>
    
20. 
    
21. <div id="papa">
    
22.         <css-doodle grid="3" id="mplayer">
    
23.                 :doodle {
    
24.                         @size: 160px;
    
25.                         background: radial-gradient(darkgreen,transparent 70%,transparent 0);
    
26.                         cursor: pointer;
    
27.                 }
    
28.                 @shape: clover 3;
    
29.                 @place: center;
    
30.                 background: green;
    
31.                 transform: rotate(calc(@i * 40deg)) translate(60px);
    
32.         </css-doodle>
    
33.         <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2005021482" autoplay="autoplay" loop="loop"></audio>
    
34. </div>
    
35. 
    
36. <script>
    
37. (function() {
    
38.         let script = document.createElement('script');
    
39.         script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
    
40.         document.head.appendChild(script);
    
41.         let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
42.         aud.addEventListener('play', mState, false);
    
43.         aud.addEventListener('pause', mState, false);
    
44.         mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
45. })();
    
46. </script>

复制代码

樵歌

强盗来鸟的赶脚。怪吓人的

樵歌

看来酒喝爽了

马黑黑

樵歌 发表于 2023-6-3 06:55
强盗来鸟的赶脚。怪吓人的

你瞧得出来主题

马黑黑

樵歌 发表于 2023-6-3 06:55
看来酒喝爽了

爽歪歪滴

马黑黑

醉美水芙蓉 发表于 2023-6-3 07:06
汽车方向盘的感觉，不错喔！谢谢黑黑老师分享！

早

南无月

简单素雅，色调明快

红影

能把9个接成这样的形状，很开拓人的想象啊。原来不一定用单个的图案，还能用图案组图形呢

红影

transform: rotate(calc(@i * 40deg)) translate(60px);
40乘以9正好360度，这个挺好理解，后面的60px稍许有点费解：@size: 160px组成的3*3的格子，每个格子的宽高是53多点，我理解三叶草也是这样的大小吧，用这个数字组成的圆反算出来的半径比60大，要70多了。
可能三叶草的长宽不能用满格来计算吧。

红影

用单个图案组图形，这个思路太赞了。制作的背景和音乐形成的氛围也非常赞

马黑黑

红影 发表于 2023-6-3 09:54
用单个图案组图形，这个思路太赞了。制作的背景和音乐形成的氛围也非常赞

感谢支持与鼓励

马黑黑

南无月 发表于 2023-6-3 09:00
简单素雅，色调明快

感谢认可

马黑黑

红影 发表于 2023-6-3 09:43
能把9个接成这样的形状，很开拓人的想象啊。原来不一定用单个的图案，还能用图案组图形呢

多发挥想象力，会找到很多不同的实现方法

马黑黑

红影 发表于 2023-6-3 09:52
transform: rotate(calc(@i * 40deg)) translate(60px);
40乘以9正好360度，这个挺好理解，后面的60px稍许 ...

translate() 里的数字，实际上就是三叶草绕圈的半径，可大可小，不一定按父元素的尺寸做精准计算，一切根据需要来

红影

马黑黑 发表于 2023-6-3 12:20
感谢支持与鼓励

黑黑的设计总是那么出彩

红影

马黑黑 发表于 2023-6-3 12:22
多发挥想象力，会找到很多不同的实现方法

这说法太赞了

红影

马黑黑 发表于 2023-6-3 12:23
translate() 里的数字，实际上就是三叶草绕圈的半径，可大可小，不一定按父元素的尺寸做精准计算，一切根 ...

嗯，也可以计算个数值，然后在这附近调整，一切以想要的效果为准

马黑黑

红影 发表于 2023-6-3 16:39
嗯，也可以计算个数值，然后在这附近调整，一切以想要的效果为准

我这里是收缩半径。

当我们想让绕圈圈对象的中心点与圆周重合，才需要精确计算。