寻
<css-doodle grid="1" id="mplayer">:doodle {
@size: 1024px 640px;
background: url('https://638183.freep.cn/638183/t23/2/200.jpg') no-repeat center/cover;
box-shadow: 0 0 6px #000;
position: relative;
margin: 0 0 0 calc(50% - 593px);
z-index: 1;
--state: paused;
}
@size: 100px;
clip-path: @shape(
points: 200;
scale: .3;
x: 2 * cos(3t) + cos(t);
y: 2 * sin(t) + sin(2t);
);
position: absolute;
background: rgb(@m3(@r(255)));
offset-path: path('M212 180a300 120 0 1 0 600 0a300 120 0 1 0 -600 0z');
animation: move 40s infinite linear var(--state);
cursor: pointer;
@keyframes move { to { offset-distance: 100%;} }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2021178386" autoplay="autoplay" loop="loop"></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = '/css-doodle.min.js';
document.head.appendChild(script);
let mState = () => mplayer.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>
帖子代码
<css-doodle grid="1" id="mplayer">
:doodle {
@size: 1024px 640px;
background: url('https://638183.freep.cn/638183/t23/2/200.jpg') no-repeat center/cover;
box-shadow: 0 0 6px #000;
position: relative;
margin: 0 0 0 calc(50% - 593px);
z-index: 1;
--state: paused;
}
@size: 100px;
clip-path: @shape(
points: 200;
scale: .3;
x: 2 * cos(3t) + cos(t);
y: 2 * sin(t) + sin(2t);
);
position: absolute;
background: rgb(@m3(@r(255)));
offset-path: path('M212 180a300 120 0 1 0 600 0a300 120 0 1 0 -600 0z');
animation: move 40s infinite linear var(--state);
cursor: pointer;
@keyframes move { to { offset-distance: 100%;} }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2021178386" autoplay="autoplay" loop="loop"></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = '/css-doodle.min.js';
document.head.appendChild(script);
let mState = () => mplayer.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>
看看老师新贴中的新路径 这个黑黑用了圆弧的命令，圆弧里用了那么多参数，弄得我赶紧去复习之前的东西了{:4_173:} 这个播放器的图形选得漂亮，线路也设计得漂亮。给黑黑点赞{:4_199:} 南无月 发表于 2023-5-21 08:11
看看老师新贴中的新路径
椭圆路径，其实是两个弧形曲线凑成的 红影 发表于 2023-5-21 08:19
这个黑黑用了圆弧的命令，圆弧里用了那么多参数，弄得我赶紧去复习之前的东西了
数学学霸掌握这个东东没啥难度 红影 发表于 2023-5-21 08:20
这个播放器的图形选得漂亮，线路也设计得漂亮。给黑黑点赞
感谢支持。上午好 本帖最后由 亚伦影音工作室 于 2023-5-21 09:32 编辑
{:5_103:}啥东东看不懂！这个是绕椭圆，🐟鱼是绕三角！ 亚伦影音工作室 发表于 2023-5-21 09:26
啥东东看不懂！这个是绕椭圆，🐟鱼是绕三角！
绕绕挺好 还会变颜色的 红影 发表于 2023-5-21 08:20
这个播放器的图形选得漂亮，线路也设计得漂亮。给黑黑点赞
播放器啥样，我咋看不见 这曲子我也喜欢 这个播放器设计的有新意。 醉美水芙蓉 发表于 2023-5-21 11:19
黑黑老师设计真漂亮！
这个是极简风格 马黑黑 发表于 2023-5-21 11:25
这个是极简风格
黑黑老师，飞机是播放器吗？{:4_173:} 一斛珠 发表于 2023-5-21 11:34
黑黑老师，飞机是播放器吗？
它可以控制音乐，整个页面其实也都可以通过单击控制音乐 黑黑老师棒棒哒！赞！{:4_187:}