漂亮的叶子（css-doodle版）

马黑黑

:doodle { @grid: 3 / 160px; margin: 50px auto 0; cursor: pointer; animation: rot 6s infinite linear var(--state); } @place-cell: center; background: linear-gradient(45deg, green 49.5%, lightblue 50.5%, green 0); border-radius: 0 100%; transform: rotate(calc(360deg / (@size() - 1) * @i())) translate(50px); @at(1,1) { border-radius: 50%; background: radial-gradient(snow, green 60%, green 0); transform: rotate(0) translate(0); } @keyframes rot { to { transform: rotate(-1turn); } }

马黑黑

代码

1. <css-doodle id="mplayer">
   
2.         :doodle {
   
3.                 @grid: 3 / 160px;
   
4.                 margin: 50px auto 0;
   
5.                 cursor: pointer;
   
6.                 animation: rot 6s infinite linear var(--state);
   
7.         }
   
8.         @place-cell: center;
   
9.         background: linear-gradient(45deg, green 49.5%, lightblue 50.5%, green 0);
   
10.         border-radius: 0 100%;
    
11.         transform: rotate(calc(360deg / (@size() - 1) * @i())) translate(50px);
    
12.         @at(1,1) {
    
13.                 border-radius: 50%;
    
14.                 background: radial-gradient(snow, green 60%, green 0);
    
15.                 transform: rotate(0) translate(0);
    
16.         }
    
17.         @keyframes rot { to { transform: rotate(-1turn); } }
    
18. </css-doodle>
    
19. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2035898287" autoplay loop></audio>
    
20. 
    
21. <script>
    
22. let scriptEle = document.createElement('script');
    
23. scriptEle.setAttribute('type','text/javascript');
    
24. scriptEle.setAttribute('src','https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js');
    
25. document.head.appendChild(scriptEle);
    
26. let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
    
27. mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
    
28. aud.addEventListener('play', mState, false);
    
29. aud.addEventListener('pause', mState, false);
    
30. </script>

复制代码

起个网名好难

欣赏！

css-doodle 是伪装成css的html 标签

马黑黑

起个网名好难 发表于 2023-4-19 21:17
欣赏！

css-doodle 是伪装成css的html 标签

前台代码是这样。实际上，css-doodle组件也属于css-in-js 类别的

马黑黑

醉美水芙蓉 发表于 2023-4-19 21:32
老师又有新播放器啦！

简单而美

红影

看晕了，明天再来看

马黑黑

红影 发表于 2023-4-19 23:21
看晕了，明天再来看

不急的

小辣椒

欣赏黑黑的漂亮緑叶播放器

红影

马黑黑 发表于 2023-4-19 23:30
不急的

昨天出去喝了点，虽然能走直线，但没能力看代码了

马黑黑

红影 发表于 2023-4-20 20:27
昨天出去喝了点，虽然能走直线，但没能力看代码了

路上看的时候是可以的，回到家了就不行

红影

马黑黑 发表于 2023-4-20 20:46
路上看的时候是可以的，回到家了就不行

我的意思我没喝太多，但还是看到代码就觉得晕了，比酒都厉害

马黑黑

红影 发表于 2023-4-20 22:11
我的意思我没喝太多，但还是看到代码就觉得晕了，比酒都厉害

路上经风，酒精的作用凸显

红影

马黑黑 发表于 2023-4-20 22:27
路上经风，酒精的作用凸显

也对，很多时候明明没喝多，被风一吹，酒意就上来了。

马黑黑

红影 发表于 2023-4-21 20:30
也对，很多时候明明没喝多，被风一吹，酒意就上来了。

风是很厉害的

雨中悄然

两种不同样子的叶片在转。

马黑黑

雨中悄然 发表于 2023-4-22 12:21
两种不同样子的叶片在转。

好像就一种吧

红影

马黑黑 发表于 2023-4-21 20:32
风是很厉害的

是酒意厉害，咋去怪风

马黑黑

红影 发表于 2023-4-22 19:53
是酒意厉害，咋去怪风

风是醉媒人

红影

马黑黑 发表于 2023-4-22 20:17
风是醉媒人

雨呢，是醒酒人？