论坛 › 马黑黑教程专版 › 老唱机

马黑黑 发表于 2023-4-4 12:43

老唱机

<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>

马黑黑 发表于 2023-4-4 12:43

参考代码
<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>

马黑黑 发表于 2023-4-4 12:50

代码显得多，那是因为使用纯CSS模拟老唱机的缘故。碟子模拟的挺像，用一个独立的元素做成；唱针就随意了，就用 #wrap 选择器的 ::before 伪元素简单实现。

这里，以关键帧动画模拟老唱机的运行：碟子旋转，唱针跟着碟子的旋转不断地往里圈靠。实际应用到音画帖，则需要换一个实现机制——

唱针从 -16deg 旋转到 -32deg，其区间参与到 audio 的 duration 和 currentTime 的运算中，得出的值就是当前唱针应旋转的角度，这个通过监听 audio 的 timeupdate 事件驱动。可以参考圆形播放器插件里面的算法和做法。

马黑黑 发表于 2023-4-4 12:53

以上，已经可以顺利工作了，希望能给亚伦提供参考。如何在帖子中由音乐播放来驱动唱机的的运行，代码并不难，知道原理了就可以编写了吧。

亚伦影音工作室 发表于 2023-4-4 13:30

马黑黑 发表于 2023-4-4 12:50
代码显得多，那是因为使用纯CSS模拟老唱机的缘故。碟子模拟的挺像，用一个独立的元素做成；唱针就随意了， ...

完美，等有时间参考老师的！

亚伦影音工作室 发表于 2023-4-4 15:43

本帖最后由 亚伦影音工作室 于 2023-4-4 16:13 编辑

马黑黑 发表于 2023-4-4 12:53
以上，已经可以顺利工作了，希望能给亚伦提供参考。如何在帖子中由音乐播放来驱动唱机的的运行，代码并不难 ...
有个想法唱针通过歌曲音乐总时间段，来设置唱针动画从外向里移动的时间，不知道能行吗？

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

本帖最后由 马黑黑 于 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:50
我是来点赞的

顺手点点老唱机就好

雨中悄然 发表于 2023-4-4 17:52

马黑黑 发表于 2023-4-4 17:50
顺手点点老唱机就好

点了，唱机是代码画出来的，不是图？

马黑黑 发表于 2023-4-4 17:52

雨中悄然 发表于 2023-4-4 17:52
点了，唱机是代码画出来的，不是图？

不是，一张图也木有使用

雨中悄然 发表于 2023-4-4 17:52

马黑黑 发表于 2023-4-4 12:50
代码显得多，那是因为使用纯CSS模拟老唱机的缘故。碟子模拟的挺像，用一个独立的元素做成；唱针就随意了， ...

代码比AI厉害 。画得真

马黑黑 发表于 2023-4-4 17:53

雨中悄然 发表于 2023-4-4 17:52
代码比AI厉害 。画得真

偶尔有这么一点效果。AI也是用代码弄出的效果。

雨中悄然 发表于 2023-4-4 17:54

马黑黑 发表于 2023-4-4 17:52
不是，一张图也木有使用

{:4_199:}大写的服

马黑黑 发表于 2023-4-4 17:55

雨中悄然 发表于 2023-4-4 17:54
大写的服

服不分大小写的

红影 发表于 2023-4-4 19:10

这个厉害，纯代码画出的唱片和指针，还能按需求让指针旋转。黑黑棒棒的{:4_199:}

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

红影 发表于 2023-4-4 19:10
这个厉害，纯代码画出的唱片和指针，还能按需求让指针旋转。黑黑棒棒的

果酱果酱

红影 发表于 2023-4-4 21:50

马黑黑 发表于 2023-4-4 20:07
果酱果酱

看着这个圆盘的设计，忽然觉得看得挺吃力，渐变色还是没学好{:4_173:}

马黑黑 发表于 2023-4-4 21:54

红影 发表于 2023-4-4 21:50
看着这个圆盘的设计，忽然觉得看得挺吃力，渐变色还是没学好

三大渐变方式，线性渐变、径向渐变、角向渐变，可以认真查一下资料

红影 发表于 2023-4-4 23:02

马黑黑 发表于 2023-4-4 21:54
三大渐变方式，线性渐变、径向渐变、角向渐变，可以认真查一下资料

饿呢，你都讲过的。background-size: 50% 100%, 100% 50%, 100% 100%; 这个是什么意思？

查看完整版本: 老唱机