老唱机
<style>#papa { min-height: 300px; position: relative; }
#wrap {
margin: 50px auto;
width: 240px;
height: 240px;
border: 1px solid gray;
cursor: pointer;
position: relative;
}
#wrap::before {
position: absolute;
content: '';
width: 200px;
height: 8px;
border-radius: 50% 0 0 50%;
background: linear-gradient(to right,tan,black);
right: 0;
transform-origin: 100% 50%;
transform: rotate(-5deg);
z-index: 10;
animation: var(--chg);
}
#pan {
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);
background-size: 50% 100%, 100% 50%, 100% 100%;
bottom: 0;
position: absolute;
animation: var(--rot);
}
#pan::before {
position: absolute;
content: '';
top: 50%; left: 50%;
margin: -35px;
border: solid 1px #d9a388;
width: 68px; height: 68px;
border-radius: 50%;
box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
background: #b5ac9a;
}
@keyframes chgAngle {
from { transform: rotate(-16deg); }
to { transform: rotate(-32deg); }
}
@keyframes rotate { to { transform: rotate(4turn); } }
</style>
<div id="papa">
<div id="wrap" title="点击运行">
<div id="pan"></div>
</div>
</div>
<script>
(function() {
wrap.onclick = () => {
pan.style.setProperty('--rot','');
wrap.style.setProperty('--chg','');
setTimeout( () => {
pan.style.setProperty('--rot','rotate 10s linear backwards');
wrap.style.setProperty('--chg','chgAngle 10s linear backwards');
},10);
}
})();
</script>
参考代码
<style>
#wrap {
margin: 50px auto;
width: 240px;
height: 240px;
border: 1px solid gray;
cursor: pointer;
position: relative;
}
#wrap::before {
position: absolute;
content: '';
width: 200px;
height: 8px;
border-radius: 50% 0 0 50%;
background: linear-gradient(to right,tan,black);
right: 0;
transform-origin: 100% 50%;
transform: rotate(-5deg);
z-index: 10;
animation: var(--chg);
}
#pan {
width: 200px;
height: 200px;
border-radius: 50%;
background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);
background-size: 50% 100%, 100% 50%, 100% 100%;
bottom: 0;
position: absolute;
animation: var(--rot);
}
#pan::before {
position: absolute;
content: '';
top: 50%; left: 50%;
margin: -35px;
border: solid 1px #d9a388;
width: 68px; height: 68px;
border-radius: 50%;
box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
background: #b5ac9a;
}
@keyframes chgAngle {
from { transform: rotate(-16deg); }
to { transform: rotate(-32deg); }
}
@keyframes rotate { to { transform: rotate(4turn); } }
</style>
<div id="wrap" title="点击运行">
<div id="pan"></div>
</div>
<script>
wrap.onclick = () => {
pan.style.setProperty('--rot','');
wrap.style.setProperty('--chg','');
setTimeout( () => {
pan.style.setProperty('--rot','rotate 10s linear backwards');
wrap.style.setProperty('--chg','chgAngle 10s linear backwards');
},10);
}
</script>
代码显得多，那是因为使用纯CSS模拟老唱机的缘故。碟子模拟的挺像，用一个独立的元素做成；唱针就随意了，就用 #wrap 选择器的 ::before 伪元素简单实现。
这里，以关键帧动画模拟老唱机的运行：碟子旋转，唱针跟着碟子的旋转不断地往里圈靠。实际应用到音画帖，则需要换一个实现机制——
唱针从 -16deg 旋转到 -32deg，其区间参与到 audio 的 duration 和 currentTime 的运算中，得出的值就是当前唱针应旋转的角度，这个通过监听 audio 的 timeupdate 事件驱动。可以参考圆形播放器插件里面的算法和做法。 以上，已经可以顺利工作了，希望能给亚伦提供参考。如何在帖子中由音乐播放来驱动唱机的的运行，代码并不难，知道原理了就可以编写了吧。 马黑黑 发表于 2023-4-4 12:50
代码显得多，那是因为使用纯CSS模拟老唱机的缘故。碟子模拟的挺像，用一个独立的元素做成；唱针就随意了， ...
完美，等有时间参考老师的！ 本帖最后由 亚伦影音工作室 于 2023-4-4 16:13 编辑
马黑黑 发表于 2023-4-4 12:53
以上，已经可以顺利工作了，希望能给亚伦提供参考。如何在帖子中由音乐播放来驱动唱机的的运行，代码并不难 ...
有个想法唱针通过歌曲音乐总时间段，来设置唱针动画从外向里移动的时间，不知道能行吗？ 本帖最后由 马黑黑 于 2023-4-4 17:48 编辑
亚伦影音工作室 发表于 2023-4-4 15:43
有个想法唱针通过歌曲音乐总时间段，来设置唱针动画从外向里移动的时间，不知道能行吗？
当然可以。这里的设计只是展示一下原理。
如果audio的操作句柄是 aud ，唱针旋转的角度区间是 16 度，则，唱针应旋转的角度按如下计算：
aud.currentTime * 16 / aud.dutation
考虑到起点在 -16 度开始，所以算法调整为：
-16 - (aud.currentTime * 16 / aud.dutation || 0)
上式，|| 0 是为了避免出错（开始时可能读取不到audio的相关数值）。用于驱动指针旋转，语句为（假如指针的操作句柄是 zhen）：
let angle = -16 - (aud.currentTime * 16 / aud.dutation || 0);
zhen.style.transform = 'rotate(' + angle + 'deg)';
以上JS语句由
aud.addEventListener('timeupdate', () => {
//code here
});
驱动，就OK了。
我是来点赞的 雨中悄然 发表于 2023-4-4 17:50
我是来点赞的
顺手点点老唱机就好 马黑黑 发表于 2023-4-4 17:50
顺手点点老唱机就好
点了，唱机是代码画出来的，不是图？ 雨中悄然 发表于 2023-4-4 17:52
点了，唱机是代码画出来的，不是图？
不是，一张图也木有使用 马黑黑 发表于 2023-4-4 12:50
代码显得多，那是因为使用纯CSS模拟老唱机的缘故。碟子模拟的挺像，用一个独立的元素做成；唱针就随意了， ...
代码比AI厉害 。画得真 雨中悄然 发表于 2023-4-4 17:52
代码比AI厉害 。画得真
偶尔有这么一点效果。AI也是用代码弄出的效果。 马黑黑 发表于 2023-4-4 17:52
不是，一张图也木有使用
{:4_199:}大写的服 雨中悄然 发表于 2023-4-4 17:54
大写的服
服不分大小写的 这个厉害，纯代码画出的唱片和指针，还能按需求让指针旋转。黑黑棒棒的{:4_199:} 红影 发表于 2023-4-4 19:10
这个厉害，纯代码画出的唱片和指针，还能按需求让指针旋转。黑黑棒棒的
果酱果酱 马黑黑 发表于 2023-4-4 20:07
果酱果酱
看着这个圆盘的设计，忽然觉得看得挺吃力，渐变色还是没学好{:4_173:} 红影 发表于 2023-4-4 21:50
看着这个圆盘的设计，忽然觉得看得挺吃力，渐变色还是没学好
三大渐变方式，线性渐变、径向渐变、角向渐变，可以认真查一下资料 马黑黑 发表于 2023-4-4 21:54
三大渐变方式，线性渐变、径向渐变、角向渐变，可以认真查一下资料
饿呢，你都讲过的。background-size: 50% 100%, 100% 50%, 100% 100%; 这个是什么意思？