马黑黑 发表于 2023-4-19 21:02

漂亮的叶子（css-doodle版）

<css-doodle id="mplayer">
        :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); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2035898287" autoplay loop></audio>

<script>
let scriptEle = document.createElement('script');
scriptEle.setAttribute('type','text/javascript');
scriptEle.setAttribute('src','https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js');
document.head.appendChild(scriptEle);
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
</script>

马黑黑 发表于 2023-4-19 21:03

代码
<css-doodle id="mplayer">
        :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); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2035898287" autoplay loop></audio>

<script>
let scriptEle = document.createElement('script');
scriptEle.setAttribute('type','text/javascript');
scriptEle.setAttribute('src','https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js');
document.head.appendChild(scriptEle);
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
</script>

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

欣赏！

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

马黑黑 发表于 2023-4-19 21:30

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

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

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

醉美水芙蓉 发表于 2023-4-19 21:32

马黑黑 发表于 2023-4-19 21:33

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

简单而美{:5_106:}

红影 发表于 2023-4-19 23:21

看晕了，明天再来看{:4_173:}

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

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

不急的

小辣椒 发表于 2023-4-19 23:46

欣赏黑黑的漂亮緑叶播放器{:4_178:}

红影 发表于 2023-4-20 20:27

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

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

马黑黑 发表于 2023-4-20 20:46

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

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

红影 发表于 2023-4-20 22:11

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

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

马黑黑 发表于 2023-4-20 22:27

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

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

红影 发表于 2023-4-21 20:30

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

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

马黑黑 发表于 2023-4-21 20:32

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

风是很厉害的

雨中悄然 发表于 2023-4-22 12:21

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

马黑黑 发表于 2023-4-22 12:42

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

好像就一种吧

红影 发表于 2023-4-22 19:53

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

是酒意厉害，咋去怪风{:4_173:}

马黑黑 发表于 2023-4-22 20:17

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

风是醉媒人

红影 发表于 2023-4-22 23:26

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

雨呢，是醒酒人？
页: [1] 2
查看完整版本: 漂亮的叶子（css-doodle版）