马黑黑 发表于 2023-2-28 21:37

这个也可以瞧瞧

<style>
#mplayer {
        --state: running;
        margin: 50px auto;
        width: 120px;
        height: 120px;
        position: relative;
        display: grid;
        place-items: center;
}
.ball {
        position: absolute;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        box-shadow: -5px 0 10px black inset;
}
@keyframes flash { to { box-shadow: 0 0 60px 20px gray, -2px -2px 8px snow inset; } }
</style>

<div id="mplayer"></div>

<script>
let total = 18;
for(let i = 0; i < total; i ++) {
        let ball = document.createElement('span');
        ball.className = 'ball';
        ball.style.cssText += `
                transform: rotate(${360/total*i}deg) translate(60px);
                animation: flash ${Math.random()+0.1}s infinite alternate var(--state);
        `;
        mplayer.appendChild(ball);
}
</script>

马黑黑 发表于 2023-2-28 21:38

代码
<style>
#mplayer {
        --state: running;
        margin: 50px auto;
        width: 120px;
        height: 120px;
        position: relative;
        display: grid;
        place-items: center;
}
.ball {
        position: absolute;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        box-shadow: -5px 0 10px black inset;
}
@keyframes flash { to { box-shadow: 0 0 60px 20px gray, -2px -2px 8px snow inset; } }
</style>

<div id="mplayer"></div>

<script>
let total = 18;
for(let i = 0; i < total; i ++) {
        let ball = document.createElement('span');
        ball.className = 'ball';
        ball.style.cssText += `
                transform: rotate(${360/total*i}deg) translate(60px);
                animation: flash ${Math.random()+0.1}s infinite alternate var(--state);
        `;
        mplayer.appendChild(ball);
}
</script>

红影 发表于 2023-2-28 23:25

用阴影的变化尽然可以做出这么多漂亮的效果，真棒{:4_199:}

庶民 发表于 2023-3-1 04:54

创意无限，精彩不断。

醉美水芙蓉 发表于 2023-3-1 07:07

马黑黑 发表于 2023-3-1 07:36

醉美水芙蓉 发表于 2023-3-1 07:07
不会制作，就瞧瞧老师的作品吧！

早

马黑黑 发表于 2023-3-1 07:37

红影 发表于 2023-2-28 23:25
用阴影的变化尽然可以做出这么多漂亮的效果，真棒

早上好

马黑黑 发表于 2023-3-1 07:37

庶民 发表于 2023-3-1 04:54
创意无限，精彩不断。

手链过去制作过，是纯手链，这个加了特效

樵歌 发表于 2023-3-1 11:08

脑洞大开，{:4_173:}

马黑黑 发表于 2023-3-1 12:09

樵歌 发表于 2023-3-1 11:08
脑洞大开，

补补

红影 发表于 2023-3-1 17:00

马黑黑 发表于 2023-3-1 07:37
早上好

我试着用这个做播放器，去加歌词，然后发现这个效果出不来了{:4_173:}

马黑黑 发表于 2023-3-1 18:16

红影 发表于 2023-3-1 17:00
我试着用这个做播放器，去加歌词，然后发现这个效果出不来了

那是肯定那里出错了

红影 发表于 2023-3-1 20:18

马黑黑 发表于 2023-3-1 18:16
那是肯定那里出错了

我用了手链的那个封装，这个只当作是动态效果，然后要么就是只能一直动，要么不动，不知道怎么样让它跟音乐关联起来。我看ball在JS里貌似跟音乐是关联的啊，不知道为什么自己去试就不行。

樵歌 发表于 2023-3-1 21:38

马黑黑 发表于 2023-3-1 12:09
补补

补天的

马黑黑 发表于 2023-3-1 21:40

樵歌 发表于 2023-3-1 21:38
补天的

七色石可以补补

马黑黑 发表于 2023-3-1 21:44

红影 发表于 2023-3-1 20:18
我用了手链的那个封装，这个只当作是动态效果，然后要么就是只能一直动，要么不动，不知道怎么样让它跟音 ...

transform的东东，每个元素要前后都有，少一个多一个都动不了，它很挑剔。简言之，元素里有过 transform 的任何一个属性，后面的都要跟着有

庶民 发表于 2023-3-2 05:14

马黑黑 发表于 2023-3-1 07:37
手链过去制作过，是纯手链，这个加了特效

用灵感制作快乐

红影 发表于 2023-3-2 09:57

马黑黑 发表于 2023-3-1 21:44
transform的东东，每个元素要前后都有，少一个多一个都动不了，它很挑剔。简言之，元素里有过 transform...

我明白了，我一直在css里折腾，实际JS里也要配套才行。现在终于能跟着播放器的点击一起暂停或播放了。谢谢黑黑{:4_187:}

马黑黑 发表于 2023-3-2 12:19

红影 发表于 2023-3-2 09:57
我明白了，我一直在css里折腾，实际JS里也要配套才行。现在终于能跟着播放器的点击一起暂停或播放了。谢 ...

{:4_190:}

马黑黑 发表于 2023-3-2 12:23

庶民 发表于 2023-3-2 05:14
用灵感制作快乐

没错
页: [1] 2
查看完整版本: 这个也可以瞧瞧