找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 675|回复: 60

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

[复制链接]

313

主题

1万

回帖

7万

积分

超级版主

积分
74677
发表于 2024-4-10 12:31:18 | 显示全部楼层 |阅读模式 IP:亚太地区
[i=s] 本帖最后由 老谟深虑 于 2024-4-23 16:29 编辑 [/i]

 

评分

参与人数 11金币 +96 收起 理由
风清 + 10 赞一个!
筱亭 + 8 赞一个!
老钟 + 8 赞一个!
七彩童年 + 8 赞一个!
丁香 + 8 很给力!
月婵 + 10 赞一个!
蓝朵1111 + 8 赞一个!
童声韵灵 + 8 赞一个!
抚德 + 8 赞一个!
西湖 + 10 赞一个!
庶民 + 10 很给力!

查看全部评分

313

主题

1万

回帖

7万

积分

超级版主

积分
74677
 楼主| 发表于 2024-4-10 12:33:49 | 显示全部楼层 IP:亚太地区
  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. #mydiv::after {
  24.         left: var(--begin2);
  25.         transform: scale(-1,1);
  26. }
  27. #play {
  28.         position: absolute;
  29.         left: calc(50% - 50px);
  30.         bottom: 10px;
  31.         width: 100px;
  32.         cursor: pointer;
  33.         animation: rotating 5s linear infinite var(--state);
  34. }
  35. @keyframes rotating { to { transform: rotate(360deg); } }

  36. #dt2{ position: absolute; width:305px; height: 242px; top: 370px; left: 500px; }
  37. #dt3{ position: absolute; width: 201px; height: 109px; top: 20px; left: 300px; }

  38. </style>

  39. <div id="mydiv">
  40. <img id="dt2" src="https://pic.imgdb.cn/item/66151ada68eb935713469028.gif" alt="" />

  41. <img id="dt3" src="https://pic.imgdb.cn/item/6615150c68eb9357133d5b5d.gif" alt="" />

  42.         <audio id="aud" src="https://file.uhsea.com/2404/771c6568cd4c7db6b229d135ea4d42acH6.mp3" autoplay></audio>
  43.         <img id="play" src="https://pic.imgdb.cn/item/661013c568eb93571345cc0c.png" alt="" />
  44. </div>

  45. <script>

  46. var ww = mydiv.offsetWidth;
  47. var step = 0.2, begin1 = 0, begin2 = -ww, raf;

  48. aud.loop = false;
  49. aud.onpause = aud.onplaying = () =>  moving();
  50. aud.onseeked = () => cancelAnimationFrame(raf);
  51. aud.onended = () => { cancelAnimationFrame(raf); aud.play(); };

  52. play.onclick = () => { aud.paused ? aud.play() : aud.pause(); };

  53. var moving = () => {
  54.         begin1 += step;
  55.         begin2 += step;
  56.         if(begin1 >= ww) begin1 = -ww;
  57.         if(begin2 >= ww) begin2 = -ww;
  58.         mydiv.style.setProperty('--begin1', begin1 + 'px');
  59.         mydiv.style.setProperty('--begin2', begin2 + 'px');
  60.         aud.paused
  61.                 ? (cancelAnimationFrame(raf), mydiv.style.setProperty('--state', 'paused'))
  62.                 : (raf = requestAnimationFrame(moving), mydiv.style.setProperty('--state', 'running'));
  63. };

  64. </script>
复制代码


119

主题

6078

回帖

2万

积分

蓬莱仙人

积分
26366
发表于 2024-4-10 13:16:32 | 显示全部楼层 IP:河北秦皇岛
很有意境,动感也强。

125

主题

4227

回帖

2万

积分

荣誉版主

积分
27862
发表于 2024-4-10 13:44:47 | 显示全部楼层 IP:辽宁抚顺

风景太漂亮了,欣赏精彩制作!

313

主题

1万

回帖

7万

积分

超级版主

积分
74677
 楼主| 发表于 2024-4-10 14:46:44 | 显示全部楼层 IP:亚太地区
庶民 发表于 2024-4-10 13:16
很有意境,动感也强。

       谢谢老乡的美评,下午好!

313

主题

1万

回帖

7万

积分

超级版主

积分
74677
 楼主| 发表于 2024-4-10 14:48:29 | 显示全部楼层 IP:亚太地区
西湖 发表于 2024-4-10 13:34
桂林山水甲天下!欣赏老友新作。

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

313

主题

1万

回帖

7万

积分

超级版主

积分
74677
 楼主| 发表于 2024-4-10 14:49:27 | 显示全部楼层 IP:亚太地区
抚德 发表于 2024-4-10 13:44
风景太漂亮了,欣赏精彩制作!

        谢谢老哥的欣赏点评,问好!

197

主题

1万

回帖

6万

积分

版主

积分
62237
发表于 2024-4-10 15:16:47 | 显示全部楼层 IP:山东
桂林山水甲天下。桂林歌声也不差。好歌声。好意境。点个大大的赞。

313

主题

1万

回帖

7万

积分

超级版主

积分
74677
 楼主| 发表于 2024-4-10 15:19:51 | 显示全部楼层 IP:亚太地区
西湖 发表于 2024-4-10 15:04
看到了,谢无私的奉献!

        老友客气了,资源共享。

313

主题

1万

回帖

7万

积分

超级版主

积分
74677
 楼主| 发表于 2024-4-10 15:20:59 | 显示全部楼层 IP:亚太地区
童声韵灵 发表于 2024-4-10 15:16
桂林山水甲天下。桂林歌声也不差。好歌声。好意境。点个大大的赞。

        谢谢老友的大赞鼓励,我好高兴!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|离退休论坛 ( 浙B2-20100176 )

GMT+8, 2024-11-22 11:04 , Processed in 0.085638 second(s), 21 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表