论坛 › 欢乐水吧 › 量子纠缠（学习黑师圆盘播放效果）

雨中悄然 发表于 2023-4-9 14:22

量子纠缠（学习黑师圆盘播放效果）

<style>
#papa {
      --state: paused;
      margin:80px 0 0 calc(50% - 593px);
      width: 1024px;
      height: 640px;
      border: 2px solid tan;
      border-image: linear-gradient(35deg,tan,purple,cyan,orange,red) 4;
      background: #3C3A50 url('https://s1.ax1x.com/2023/04/09/ppHobPx.jpg') center/cover no-repeat;
      box-shadow: 3px 8px 20px rgba(0,0,0,.6);
      overflow: hidden;
      display: grid;
      place-items: center;
      position: relative;
      animation: hue 10s infinite alternate var(--state);
}
#vid {
        position: absolute;
        width: 1400px;
        height: 100%;
        border-radius: 2%;
        opacity: .80;
        object-fit: cover;
        pointer-events: none;
}
#lrc {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translate(-50%);
    height: 50px;
    font: bold 30px/50px sans-serif;
    background: transparent;
    color: gray;
    display: grid;
    place-items: center start;
    pointer-events: none;
    --motion: cover2;
    --tt: 1s;
}

#lrc::before,
#lrc::after {
    position: absolute;
    content: '';
}

#lrc::before {
    content: attr(data-lrc);
    width: 0%;
    height: 100%;
    color: CornflowerBlue;
    white-space: pre;
    overflow: hidden;
    animation: var(--motion) var(--tt) linear forwards var(--state);
}

#lrc::after {
    width: 100px;
    height: 100px;
    left: -100px;
    border-radius: 50%;
    background:center/cover no-repeat;
    cursor: pointer;
    pointer-events: auto;
    animation: rot 4s infinite linear var(--state);
}

@keyframes cover1 {
    to {
      width: 100%;
    }
}

@keyframes cover2 {
    to {
      width: 100%;
    }
}

@keyframes rot {
    to {
      transform: rotate(360deg);
    }
}

#wrap {
      position: absolute;
      left: 340px;
      top: 360px;
      width: 320px;
      height: 200px;
      display: grid;
      place-items: center;
      cursor: pointer;
      animation: hue 10s infinite alternate var(--state);
}
#wrap > span {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 8px dashed black;
      transform: rotate(var(--deg));
      animation: rot var(--time) infinite linear var(--state);
}
@keyframes rot {
      from { transform: rotate(var(--deg)); }
      to { transform: rotate(calc(var(--deg) + 360deg)); }
}
@keyframes hue {
      to { filter: hue-rotate(360deg); }
}
</style>

<div id="papa"><video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/02/29/5b54a304deb3e.mp4" autoplay="" loop="" muted=""></video><div id="lrc" data-lrc="HCPlayer">HCPlayer</div>
      <div id="wrap" title="播放/暂停"></div>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1368101371" loop="loop"autoplay="autoplay"></audio>
</div>

<script>
let total = 60, spans = [];
let mKey = 0, mFlag = true;
let lrcAr = [
        ,
        ,
        ,
        ,
        ,
        ,
    ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
        ,
       
];
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, 'n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
aud.addEventListener('timeupdate', () => {for(let j = 0; j < lrcAr.length; j ++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});

Array.from({length:10}).forEach((item,key) => {
      let sp = document.createElement('span');
      sp.style.cssText += `
                --deg: ${Math.random()*(key+10)}deg;
                --time: ${Math.random()*10+10}s;
                width: ${key*18}px;
                height: ${key*18}px;
                border-color: hsla(${Math.ceil(Math.random()*360)},70%,50%,.75);
                border-width: ${key+6}px;
      `;
      wrap.appendChild(sp);
});

aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
wrap.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

雨中悄然 发表于 2023-4-9 14:23

@马黑黑 把昨天做的两个作业效果叠加一起了{:4_173:}

马黑黑 发表于 2023-4-9 16:54

非常完美

梦缘 发表于 2023-4-9 16:57

完美结合，欣赏问好！{:4_204:}

红影 发表于 2023-4-9 18:46

这个制作好甜啊，情人间的爱恋也是一种量子纠缠呢{:4_187:}

红影 发表于 2023-4-9 18:47

悄然这么快就把圆盘播放器做成帖子了，这个效果放在帖子里还很好看的呢{:4_431:}

樵歌 发表于 2023-4-9 19:04

哇，这量子太甜腻，千丝万缕永生永世心心相连{:4_173:}

小辣椒 发表于 2023-4-9 19:33

悄然就是棒{:4_199:}
质量数量都第一名{:4_170:}

小辣椒 发表于 2023-4-9 19:35

悄然这个图意都特别的温馨{:4_205:}

亦是金 发表于 2023-4-9 19:35

好帖！欣赏学习了！{:4_187:}

庶民 发表于 2023-4-10 07:35

创意无限

雨中悄然 发表于 2023-4-10 20:24

马黑黑 发表于 2023-4-9 16:54
非常完美

老师代码完美之极{:5_116:}

雨中悄然 发表于 2023-4-10 20:24

梦缘 发表于 2023-4-9 16:57
完美结合，欣赏问好！

问好梦缘，感谢临贴支持

雨中悄然 发表于 2023-4-10 20:27

红影 发表于 2023-4-9 18:46
这个制作好甜啊，情人间的爱恋也是一种量子纠缠呢

{:4_170:}嗯嗯，甜的东西可令人愉悦

雨中悄然 发表于 2023-4-10 20:28

红影 发表于 2023-4-9 18:47
悄然这么快就把圆盘播放器做成帖子了，这个效果放在帖子里还很好看的呢

这个效果本身会旋转变色，百搭，应该随意放都好看{:4_173:}

雨中悄然 发表于 2023-4-10 20:28

樵歌 发表于 2023-4-9 19:04
哇，这量子太甜腻，千丝万缕永生永世心心相连

感谢樵管支持

雨中悄然 发表于 2023-4-10 20:29

小辣椒 发表于 2023-4-9 19:33
悄然就是棒
质量数量都第一名

小辣椒夸我了。。乐。。碰到周末有空就出几个贴{:4_170:}

雨中悄然 发表于 2023-4-10 20:29

小辣椒 发表于 2023-4-9 19:35
悄然这个图意都特别的温馨

嗯嗯，看着舒服就好{:4_187:}

雨中悄然 发表于 2023-4-10 20:30

亦是金 发表于 2023-4-9 19:35
好帖！欣赏学习了！

谢谢临贴支持

雨中悄然 发表于 2023-4-10 20:30

庶民 发表于 2023-4-10 07:35
创意无限

感谢临贴回复

查看完整版本: 量子纠缠（学习黑师圆盘播放效果）