马黑黑 发表于 2023-4-19 13:32

彼岸花

<style>
#papa {
        margin: auto;
        width: 652px;
        height: 500px;
        background: tan url('https://638183.freep.cn/638183/t23/webp1/audd.webp') center/cover no-repeat;
        box-shadow: 0 0 10px gray;
        display: grid;
        place-items: center;
}
</style>

<div id="papa">

<css-doodle id="mplayer">
        @grid: 1 / 120px;
        cursor: pointer;
        background: radial-gradient(yellow, #E91F63, #fff);
        clip-path: @shape( fill-rule: evenodd; split: 500; scale: .6; r: cos(7t)^2 + sin(7t) + .3;);
        animation: rot 6s infinite linear var(--state);
        @keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>

</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=532931" autoplay loop></audio>

<script>
(function() {
        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 = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

山人 发表于 2023-4-19 13:35

播放器样式使用 css-doodle 官网的一个图形案例

山人 发表于 2023-4-19 13:36

帖子<style>
#papa {
        margin: 20px auto;
        width: 652px;
        height: 500px;
        background: tan url('./web/pic/webp/audd.webp') center/cover no-repeat;
        box-shadow: 0 0 10px gray;
        display: grid;
        place-items: center;
}
</style>

<div id="papa">

<css-doodle id="mplayer">
        @grid: 1 / 120px;
        cursor: pointer;
        background: radial-gradient(yellow, #E91F63, #fff);
        clip-path: @shape( fill-rule: evenodd; split: 500; scale: .6; r: cos(7t)^2 + sin(7t) + .3;);
        animation: rot 6s infinite linear var(--state);
        @keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>

</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=532931" autoplay loop></audio>

<script>
(function() {
        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 = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
参考代码

花飞飞 发表于 2023-4-19 17:55

css-doodle 论坛测试成功

花飞飞 发表于 2023-4-19 17:57

{:4_199:}可以喝一杯

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

花飞飞 发表于 2023-4-19 17:55
css-doodle 论坛测试成功

{:4_181:}

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

花飞飞 发表于 2023-4-19 17:57
可以喝一杯

喝高了

花飞飞 发表于 2023-4-19 18:03

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


怎么祝贺一下呢

花飞飞 发表于 2023-4-19 18:04

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


我们外行人看着从不能发到能发，挺不容易的 。{:4_170:}

花飞飞 发表于 2023-4-19 18:04

马黑黑 发表于 2023-4-19 18:03
喝高了

值得的，继续。。。。

花飞飞 发表于 2023-4-19 18:04

马黑黑 发表于 2023-4-19 18:03
喝高了

先撤了哈。。。。再聊{:4_170:}

马黑黑 发表于 2023-4-19 18:05

花飞飞 发表于 2023-4-19 18:04
先撤了哈。。。。再聊

{:4_181:}

马黑黑 发表于 2023-4-19 18:05

花飞飞 发表于 2023-4-19 18:04
值得的，继续。。。。

{:4_181:}

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

梦缘 发表于 2023-4-19 19:50

欣赏问好，感谢分享！{:4_187:}

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

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

千羽 发表于 2023-4-19 20:35

这个花花播放器挺漂亮{:4_181:}

马黑黑 发表于 2023-4-19 20:56

千羽 发表于 2023-4-19 20:35
这个花花播放器挺漂亮

挺好看的

梦油 发表于 2023-4-19 21:12

你设计的播放器不断创新啊。
页: [1] 2 3 4
查看完整版本: 彼岸花