中国风

马黑黑

中國風·致東籬

马黑黑

代码（自己机子上测试时.mama 选择器的 left: -214px 改为 margin: auto）：

1. <style type="text/css">
   
2. .mama { left: -214px; width: 1024px; height: 560px; background: #eee; overflow: hidden; box-shadow: 0 4px 30px #000; position: relative; }
   
3. .player { position: absolute; bottom: 10px; right: 10px; padding: 12px; cursor: pointer; }
   
4. .vid { position: absolute; top: -55px; width: 1024px; height: 615px; object-fit: cover; }
   
5. .circleTxt { position: relative; left: calc(50% - 150px); top: 120px; display: flex;  justify-content: center; width: 300px; height: 300px;  animation: fade 1.5s linear infinite alternate; }
   
6. .circleTxt span {   position: absolute;  font: bold 1.8em / 150px sans-serif;  text-align: center;  text-shadow: 1px 1px 2px #111;  border-radius: 50%;  color:#0B3B39;  display: block;  }
   
7. #lrcMsg { font: bold 1.5em / 2em sans-serif; display: block; color: #eee; text-shadow: 1px 1px 2px #000; }
   
8. #meter { width: 160px; cursor: pointer; }
   
9. @keyframes fade { to { opacity: .5; } }
   
10. </style>
    
11. 
    
12. <div class="mama">
    
13.         <video class="vid" src="https://img.tukuppt.com/video_show/14490244/00/16/53/5ea3335d1ac08.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
    
14.         <div class="circleTxt"></div>
    
15.         <div class="player">
    
16.                 <span id="lrcMsg">中國風·致東籬</span>
    
17.                 <meter id="meter" min="0" max="100" low="33" high="66" optimum = "70" value="0"></meter>
    
18.         </div>
    
19. </div>
    
20. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1386711437.mp3" autoplay="autoplay" loop="loop"></audio>
    
21. 
    
22. <script language="javascript">
    
23. let lrcMsg = document.querySelector('#lrcMsg'),
    
24.         player = document.querySelector('.player');
    
25.         aud = document.querySelector('#aud'),
    
26.         ct = document.querySelector('.circleTxt'),
    
27.         meter = document.querySelector('#meter');
    
28. 
    
29. circleText('勝日尋芳泗水濱無邊光景一時新等閑識得東風面萬紫千紅總是春',ct);
    
30. 
    
31. aud.addEventListener('timeupdate',() => playMsg());
    
32. aud.addEventListener('ended',() => lrcKey = 0);
    
33. 
    
34. player.onclick = () => aud.paused ? aud.play() : aud.pause();
    
35. 
    
36. let playMsg = () =>         meter.value = 100 * aud.currentTime / aud.duration;
    
37. 
    
38. function circleText(txt,ele) {
    
39.         let width = ele.clientWidth, total = txt.length; angle = 360 / total, str = "";
    
40.         for(j=0; j<total; j++) {
    
41.                 let transform =`rotate(${angle * j}deg) translateY(-${width / 2}px) rotate(${360 - angle*j}deg)`;
    
42.                 let color = `#${Math.random().toString(16).substr(-6)}`;
    
43.                 str += `<span style="color: ${color}; transform: ${transform};">${txt.charAt(j)}</span>\n`;
    
44.         }
    
45.         ele.innerHTML = str;
    
46. }
    
47. 
    
48. </script>
    

复制代码

加林森

太有意思了。

马黑黑

队长好早啊

马黑黑

加林森 发表于 2022-6-21 07:23
太有意思了。

主要是视频的效果好

加林森

马黑黑 发表于 2022-6-21 07:25
队长好早啊

这几天太热啦，睡不好就起来了。

加林森

马黑黑 发表于 2022-6-21 07:25
主要是视频的效果好

嗯嗯。挺好的。

马黑黑

加林森 发表于 2022-6-21 07:34
嗯嗯。挺好的。

确实不错的

马黑黑

加林森 发表于 2022-6-21 07:33
这几天太热啦，睡不好就起来了。

挺好，早起的鸟儿有虫吃

加林森

马黑黑 发表于 2022-6-21 07:35
确实不错的

加林森

马黑黑 发表于 2022-6-21 07:35
挺好，早起的鸟儿有虫吃

马黑黑

加林森 发表于 2022-6-21 07:46

额，忘记了，你不吃虫子

马黑黑

加林森 发表于 2022-6-21 07:45

队长，这个就是不要歌词的改装方法（当然，也加入了其他元素），你可以研究下

上海朝阳

这水墨动态感太美了，群雁飞，帆船过，红日高照，小荷摇曳晃清波。尤其这荷花像皮影戏的动态感。

加林森

马黑黑 发表于 2022-6-21 07:56
额，忘记了，你不吃虫子

当然了啊。

加林森

马黑黑 发表于 2022-6-21 07:57
队长，这个就是不要歌词的改装方法（当然，也加入了其他元素），你可以研究下

谢谢老黑。我正在研究呢。

马黑黑

上海朝阳 发表于 2022-6-21 07:59
这水墨动态感太美了，群雁飞，帆船过，红日高照，小荷摇曳晃清波。尤其这荷花像皮影戏的动态感。

这些元素都是原视频营造出来的

马黑黑

加林森 发表于 2022-6-21 08:01
当然了啊。

其实虫子营养挺好的

加林森

马黑黑 发表于 2022-6-21 08:02
其实虫子营养挺好的

我在想吃不吃你呢？

马黑黑

加林森 发表于 2022-6-21 08:02
谢谢老黑。我正在研究呢。

关键是看看JS部分：

<script language="javascript">
let lrcMsg = document.querySelector('#lrcMsg'),
        player = document.querySelector('.player');
        aud = document.querySelector('#aud'),
        ct = document.querySelector('.circleTxt'),
        meter = document.querySelector('#meter');

circleText('勝日尋芳泗水濱無邊光景一時新等閑識得東風面萬紫千紅總是春',ct);

aud.addEventListener('timeupdate',() => playMsg());
aud.addEventListener('ended',() => lrcKey = 0);

player.onclick = () => aud.paused ? aud.play() : aud.pause();

let playMsg = () => meter.value = 100 * aud.currentTime / aud.duration;


function circleText(txt,ele) {
        let width = ele.clientWidth, total = txt.length; angle = 360 / total, str = "";
        for(j=0; j<total; j++) {
                let transform =`rotate(${angle * j}deg) translateY(-${width / 2}px) rotate(${360 - angle*j}deg)`;
                let color = `#${Math.random().toString(16).substr(-6)}`;
                str += `<span style="color: ${color}; transform: ${transform};">${txt.charAt(j)}</span>\n`;
        }
        ele.innerHTML = str;
}

红色部分是和播放器有关的，当然前面的变量声明有部分也是，但核心在这里