猫的舞步
<style>#mydiv {
width: 1024px;
height: 640px;
background: #ccc url('https://638183.freep.cn/638183/t23/1/r3.jpg') no-repeat center / cover;
box-shadow: 0 0 6px #000;
pointer-events: none;
z-index: 1;
position: relative;
margin: 0 0 0 calc(50% - 593px);
--clip: ''; --state: paused;
}
#mydiv::before, #mydiv::after {
position: absolute;
content: '';
width: 200px;
height: 200px;
left: 180px;
bottom: 50px;
border-radius: 50%;
pointer-events: auto;
cursor: pointer;
opacity: .75;
}
#mydiv::after {
background: #FEFEFE;
clip-path: var(--clip);
animation: scale 6s infinite alternate linear var(--state);
}
#mydiv::before {
background: url('https://638183.freep.cn/638183/t23/2/cat1b.gif') no-repeat center /cover;
filter: hue-rotate(145deg);
}
@keyframes scale {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(360deg) scale(.8); }
100% { transform: rotate(-360deg) scale(1); }
}
</style>
<div id="mydiv"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=523902194" autoplay="autoplay" loop="loop"></audio>
<script>
(function() {
let clipBox = (xx,points,thick) => {
let a = xx / 2, pointsAr = [`${xx}px 0, 0 0, 0 ${xx}px, ${xx}px ${xx}px, ${xx}px ${xx/2}px`];
for(let i = 0; i <= points; i ++) {
let hudu = Math.PI / 180 * 360 / points * i;
let x1 = a + Math.cos(hudu) * (a - thick), y1 = a + Math.sin(hudu) * (a - thick);
pointsAr.push(x1 + 'px ' + y1 + 'px');
}
pointsAr.push(`${xx}px ${xx/2}px`, `${xx}px 0px`);
return `polygon(${pointsAr.join(',')})`;
};
mydiv.style.setProperty('--clip',clipBox(200,6,2));
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
忙，没时间选图，旧图复用。帖子代码：
<style>
#mydiv {
width: 1024px;
height: 640px;
background: #ccc url('https://638183.freep.cn/638183/t23/1/r3.jpg') no-repeat center / cover;
box-shadow: 0 0 6px #000;
pointer-events: none;
z-index: 1;
position: relative;
margin: 30px auto;
--clip: ''; --state: paused;
}
#mydiv::before, #mydiv::after {
position: absolute;
content: '';
width: 200px;
height: 200px;
left: 180px;
bottom: 50px;
border-radius: 50%;
pointer-events: auto;
cursor: pointer;
opacity: .75;
}
#mydiv::after {
background: #FEFEFE;
clip-path: var(--clip);
animation: scale 6s infinite alternate linear var(--state);
}
#mydiv::before {
background: url('https://638183.freep.cn/638183/t23/2/cat1b.gif') no-repeat center /cover;
filter: hue-rotate(145deg);
}
@keyframes scale {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(360deg) scale(.8); }
100% { transform: rotate(-360deg) scale(1); }
}
</style>
<div id="mydiv"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=523902194" autoplay="autoplay" loop="loop"></audio>
<script>
(function() {
let clipBox = (xx,points,thick) => {
let a = xx / 2, pointsAr = [`${xx}px 0, 0 0, 0 ${xx}px, ${xx}px ${xx}px, ${xx}px ${xx/2}px`];
for(let i = 0; i <= points; i ++) {
let hudu = Math.PI / 180 * 360 / points * i;
let x1 = a + Math.cos(hudu) * (a - thick), y1 = a + Math.sin(hudu) * (a - thick);
pointsAr.push(x1 + 'px ' + y1 + 'px');
}
pointsAr.push(`${xx}px ${xx/2}px`, `${xx}px 0px`);
return `polygon(${pointsAr.join(',')})`;
};
mydiv.style.setProperty('--clip',clipBox(200,6,2));
let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
这是HTML单标签帖子。
帖子使用两个伪元素做播放控制器，尺寸、位置、边框属性一致；内容和其他一些属性则不同：伪元素 ::before 有背景图片，::after 则裁剪成内镂空、并执行关键帧动画。
问好老师，欣赏精彩佳作，谢谢分享，点赞！{:4_190:} 这个厉害了，直接在JS里设计路径，想要多大就多大，想要几边形就几边形，太好了{:4_199:} 马黑黑 发表于 2023-6-19 11:58
这是HTML单标签帖子。
帖子使用两个伪元素做播放控制器，尺寸、位置、边框属性一致；内容和其他一些属性则 ...
这个很奇妙，伪元素 ::before 也是镂空并有动作，加的背景图却不转的也不放大。 @keyframes scale 这个的变化没看懂，怎么好像变化的是镂空的厚度。 来加分分{:4_199:} 这个播放器设计得真有趣，听到这首乐曲，仿佛看到了猫的舞步。 马黑黑 发表于 2023-6-19 11:58
这是HTML单标签帖子。
帖子使用两个伪元素做播放控制器，尺寸、位置、边框属性一致；内容和其他一些属性则 ...
伪元素还挺厉害，啥都能解决的样子。。。 这个JS是新鲜的~~{:4_173:}跟以住的又不一样了。。。。{:4_203:} 南无月 发表于 2023-6-19 18:06
这个JS是新鲜的~~跟以住的又不一样了。。。。
控制音乐的部分是一样的。加两个自定义函数，用于裁剪。 南无月 发表于 2023-6-19 18:06
伪元素还挺厉害，啥都能解决的样子。。。
不是啥都能解决。物尽其用。 梦油 发表于 2023-6-19 17:12
这个播放器设计得真有趣，听到这首乐曲，仿佛看到了猫的舞步。
{:4_190:} 樵歌 发表于 2023-6-19 16:00
来加分分
谢分 梦缘 发表于 2023-6-19 12:38
问好老师，欣赏精彩佳作，谢谢分享，点赞！
下午好 红影 发表于 2023-6-19 14:50
@keyframes scale 这个的变化没看懂，怎么好像变化的是镂空的厚度。
关键帧动画，用了transform的两个方法，一是 scale，将元素变小或变大，二是 rotate，这个不用解释。
一个元素，用 scale 将其变大变小是，是按比例放大或缩小的 红影 发表于 2023-6-19 14:44
这个很奇妙，伪元素 ::before 也是镂空并有动作，加的背景图却不转的也不放大。
镂空伪元素仅一个 红影 发表于 2023-6-19 14:26
这个厉害了，直接在JS里设计路径，想要多大就多大，想要几边形就几边形，太好了
这个新改的自定义函数可以收藏起来备用 马黑黑 发表于 2023-6-19 18:08
控制音乐的部分是一样的。加两个自定义函数，用于裁剪。
控制音乐的那部分我知道，就是新加的陌生的紧{:4_173:}