学习代码音画《桂林山水之歌》

老谟深虑

[i=s] 本帖最后由 老谟深虑 于 2024-4-23 16:29 编辑 [/i]

 

老谟深虑

1. <style>
   
2. #mydiv {
   
3.         margin: 120px 0 0 calc(50% - 483px);
   
4.         width: 1302px;
   
5.         height: 753px;
   
6.         background: lightgreen url('https://s21.ax1x.com/2024/04/09/pFOKF1O.jpg') no-repeat center/cover;
   
7.         box-shadow: 4px 4px 8px gray;
   
8.         box-sizing: border-box;
   
9.         overflow: hidden;
   
10.         z-index: 1;
    
11.         position: relative;
    
12. }
    
13. #mydiv::before , #mydiv::after {
    
14.         position: absolute;
    
15.         content: '';
    
16.         left: var(--begin1);
    
17.         top: 0px;
    
18.         width: 100%;
    
19.         height: 100%;
    
20.         background: url('https://s21.ax1x.com/2024/04/09/pFOKF1O.jpg') no-repeat center/cover;
    
21.         z-index: -1;
    
22. }
    
23. 
    
24. #mydiv::after {
    
25.         left: var(--begin2);
    
26.         transform: scale(-1,1);
    
27. }
    
28. #play {
    
29.         position: absolute;
    
30.         left: calc(50% - 50px);
    
31.         bottom: 10px;
    
32.         width: 100px;
    
33.         cursor: pointer;
    
34.         animation: rotating 5s linear infinite var(--state);
    
35. }
    
36. @keyframes rotating { to { transform: rotate(360deg); } }
    
37. 
    
38. #dt2{ position: absolute; width:305px; height: 242px; top: 370px; left: 500px; }
    
39. #dt3{ position: absolute; width: 201px; height: 109px; top: 20px; left: 300px; }
    
40. 
    
41. </style>
    
42. 
    
43. <div id="mydiv">
    
44. <img id="dt2" src="https://pic.imgdb.cn/item/66151ada68eb935713469028.gif" alt="" />
    
45. 
    
46. <img id="dt3" src="https://pic.imgdb.cn/item/6615150c68eb9357133d5b5d.gif" alt="" />
    
47. 
    
48.         <audio id="aud" src="https://file.uhsea.com/2404/771c6568cd4c7db6b229d135ea4d42acH6.mp3" autoplay></audio>
    
49.         <img id="play" src="https://pic.imgdb.cn/item/661013c568eb93571345cc0c.png" alt="" />
    
50. </div>
    
51. 
    
52. <script>
    
53. 
    
54. var ww = mydiv.offsetWidth;
    
55. var step = 0.2, begin1 = 0, begin2 = -ww, raf;
    
56. 
    
57. aud.loop = false;
    
58. aud.onpause = aud.onplaying = () =>  moving();
    
59. aud.onseeked = () => cancelAnimationFrame(raf);
    
60. aud.onended = () => { cancelAnimationFrame(raf); aud.play(); };
    
61. 
    
62. play.onclick = () => { aud.paused ? aud.play() : aud.pause(); };
    
63. 
    
64. var moving = () => {
    
65.         begin1 += step;
    
66.         begin2 += step;
    
67.         if(begin1 >= ww) begin1 = -ww;
    
68.         if(begin2 >= ww) begin2 = -ww;
    
69.         mydiv.style.setProperty('--begin1', begin1 + 'px');
    
70.         mydiv.style.setProperty('--begin2', begin2 + 'px');
    
71.         aud.paused
    
72.                 ? (cancelAnimationFrame(raf), mydiv.style.setProperty('--state', 'paused'))
    
73.                 : (raf = requestAnimationFrame(moving), mydiv.style.setProperty('--state', 'running'));
    
74. };
    
75. 
    
76. </script>

复制代码

庶民

很有意境，动感也强。

抚德

老谟深虑 发表于 2024-4-10 12:33

风景太漂亮了，欣赏精彩制作！

老谟深虑

庶民 发表于 2024-4-10 13:16
很有意境，动感也强。

       谢谢老乡的美评，下午好！

老谟深虑

西湖 发表于 2024-4-10 13:34
桂林山水甲天下！欣赏老友新作。

        谢谢老友的欣赏点评，代码已经附后，请老友学习。

老谟深虑

抚德 发表于 2024-4-10 13:44
风景太漂亮了，欣赏精彩制作！

        谢谢老哥的欣赏点评，问好！

童声韵灵

桂林山水甲天下。桂林歌声也不差。好歌声。好意境。点个大大的赞。

老谟深虑

西湖 发表于 2024-4-10 15:04
看到了，谢无私的奉献！

        老友客气了，资源共享。

老谟深虑

童声韵灵 发表于 2024-4-10 15:16
桂林山水甲天下。桂林歌声也不差。好歌声。好意境。点个大大的赞。

        谢谢老友的大赞鼓励，我好高兴！