起个网名好难 发表于 2024-9-30 14:08

领航

本帖最后由 起个网名好难 于 2024-10-1 07:46 编辑 <br /><br /><style>
#oBlk {
    margin: 30px 0 30px calc(50% - 721px);
    width: 1280px;
    height: 700px;
    box-shadow: 2px 2px 6px #333;
    pointer-events: none;
    position: relative;
    overflow: hidden;
        text-align:center;
}
#vid {
    width: 110%;
    mmmmix-blend-mode: screen;
    position: absolute;
    left: 0px;
    bottom: 0px;
        pointer-events: none;
}

#svgObj        {
        position: absolute;
        left: -10px; bottom:-10px;
        z-index:999;
        pointer-events:auto;
}
</style>
<div id="oBlk">
<video id="vid" src="https://img.tukuppt.com/video_show/4559687/01/31/37/62d7aa3535c02.mp4" loop autoplay></video>
<svg width='240' viewBox="-200 -200 400 400" xmlns="http://www.w3.org/2000/svg" id="svgObj">
        <defs>
                <g id="circle">
                        <circle cx="0" cy="0" r='5' stroke="none"/>
                </g>
        </defs>
        <use href="#circle" r='10' fill='transparent'/>
</svg>
</div>
<script>
{
    let numLevel = 3, numCols = 10;
        let deflect = 360 / numCols, hRadius = svgObj.getAttribute('width') / 2, dInc = hRadius / numLevel;
        dInc = 25;
    for(i = 0; i < 360; i += deflect)   {
      for(k = dInc; k < hRadius; k += dInc) {
            let uObj = document.createElementNS('http://www.w3.org/2000/svg', 'use');
            uObj.setAttribute('href', '#circle');
            uObj.setAttribute('transform', `rotate(${i}) translate(${k - 4})`);
          uObj.setAttribute('fill', "#" + Math.random().toString(16).substring(2,8));
            svgObj.appendChild(uObj);
      }
    }
        let uObjs = svgObj.querySelectorAll('use');

        function chgColor() {if(!vid.paused) uObjs.forEach(item => {item.setAttribute('fill', "#" + Math.random().toString(16).substring(2,8))}) }
        setInterval(chgColor , 1000);
        let aniObj = svgObj.animate(
                [{ transform: "rotate(360deg) "} ],
                { duration: 10800, iterations: Infinity, },
        );
       
        svgObj.onclick = () =>         vid.paused ? (aniObj.play(), vid.play()) : (aniObj.pause() , vid.pause());
}
</script>

梦江南 发表于 2024-9-30 14:23

欣赏老师美帖！{:4_187:}

梦江南 发表于 2024-9-30 14:23

这歌词出现很特别，赞！

起个网名好难 发表于 2024-9-30 14:33

梦江南 发表于 2024-9-30 14:23
欣赏老师美帖！

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

起个网名好难 发表于 2024-9-30 14:34

梦江南 发表于 2024-9-30 14:23
这歌词出现很特别，赞！

就是做个播放控制试验，其他基本是现成的。

梦江南 发表于 2024-9-30 14:36

老师的头像换了“难”字？

梦江南 发表于 2024-9-30 14:38

起个网名好难 发表于 2024-9-30 14:34
就是做个播放控制试验，其他基本是现成的。

这个播放控制用空间帖代码了？

起个网名好难 发表于 2024-9-30 14:44

梦江南 发表于 2024-9-30 14:36
老师的头像换了“难”字？

是啊， 就是个难{:5_106:}

起个网名好难 发表于 2024-9-30 14:45

梦江南 发表于 2024-9-30 14:38
这个播放控制用空间帖代码了？

不是空间帖，参考https://www.huachaowang.com/forum.php?mod=viewthread&tid=78563做了些改变

梦江南 发表于 2024-9-30 15:12

起个网名好难 发表于 2024-9-30 14:45
不是空间帖，参考https://www.huachaowang.com/forum.php?mod=viewthread&tid=78563做了些改变

哦，主要看到这个http://www.w3.org/2000/svg代码。

起个网名好难 发表于 2024-9-30 15:18

梦江南 发表于 2024-9-30 15:12
哦，主要看到这个http://www.w3.org/2000/svg代码。

跟那帖形似但差别还是有的

梦江南 发表于 2024-9-30 15:31

起个网名好难 发表于 2024-9-30 14:44
是啊， 就是个难

是什么也“难”不到的寓言！

起个网名好难 发表于 2024-9-30 15:36

梦江南 发表于 2024-9-30 15:31
是什么也“难”不到的寓言！

错了错了，是“千难万难”{:5_102:}

老谟深虑 发表于 2024-9-30 15:45

         欣赏老师的佳作，下午好！

起个网名好难 发表于 2024-9-30 15:57

老谟深虑 发表于 2024-9-30 15:45
欣赏老师的佳作，下午好！

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

红影 发表于 2024-9-30 18:09

这个小播漂亮，还有颜色的变化呢，欣赏难难好帖{:4_199:}

起个网名好难 发表于 2024-9-30 18:41

红影 发表于 2024-9-30 18:09
这个小播漂亮，还有颜色的变化呢，欣赏难难好帖

https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif

红影 发表于 2024-9-30 21:25

起个网名好难 发表于 2024-9-30 18:41


不客气啊，问好难难，节日快乐{:4_187:}

小辣椒 发表于 2024-10-1 00:52

发现难难这个播放器和黑黑前面那个有点不一样

小辣椒 发表于 2024-10-1 00:53

欣赏难难好制作，背景效果大气恢弘，歌曲也是用的好{:4_178:}
页: [1] 2
查看完整版本: 领航