论坛 › 『唯美音画』 › 绿岛小夜曲 二胡演奏

宁静 发表于 2023-6-20 21:49

绿岛小夜曲 二胡演奏

<style>
#papa {left: -260px;top:150px; width: 1389px; height: 647px; background: #eee url('https://wj.zp68.com/lxx/yunhua/2023/06/17/GIF.gif') no-repeat; box-shadow: 2px 2px 2px #333; border-radius: 20px; display:grid; place-items: center; position: relative; }
#canv { position: absolute;left: 200px;top:560px; }
#disc { position: absolute; width: 40px; height: 40px; left: 320px; top: 460px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
#lrcbox { position: absolute; left: 370px; top: 460px;font: bold 22px / 40px sans-serif; color: #478478; text-shadow: 1px 1px 2px #222; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
<div style="position: absolute; right:20px; top: 0px; width:180px;">

                <img alt="" src="https://wj.zp68.com/lxx/yunhua/2023/06/17/yez.gif"/>
                </div>
<div style="position: absolute; right:15px; top:100px; width:180px;">
                <img alt="" src="https://wj.zp68.com/lxx/yunhua/2023/06/17/yez.gif"/>
                </div>
      <canvas id="canv" width="1200" height="180"></canvas>
      <span id="disc"></span>
      <span id="lrcbox">绿岛小夜曲</span>
</div><br><br><br><br><br><br>

<script>
let ctx = canv.getContext('2d');
let w = canv.width, h = canv.height;
let txtAr = ['音乐诗画·春　谁在唱歌 嗓音空过蠢蠢欲动的荒野 划出一抹抹羞涩的浅绿妩媚的春色'];
let lineNow = 0, lineHeight = 20, charIdx = 0;


(function drawText() {
      ctx.clearRect(0, 0, w, h);
      ctx.fillStyle ='#78a7a4';
      ctx.shadowOffsetX = 1;
      ctx.shadowOffsetY = 1;
      ctx.shadowBlur = 2;
      ctx.shadowColor = '#0e3130';
      ctx.font = 'bold 26px snas-serif';
      for(let k = 0; k < lineNow; k ++) {
                ctx.fillText(txtAr, 40, lineHeight * k + lineHeight);
      }
      let txtstr = txtAr.substring(0, charIdx);
      ctx.fillText(txtstr, 20, lineHeight * lineNow + lineHeight);
      charIdx ++;
      if(charIdx > txtAr.length) {
                lineNow += 1;
                charIdx = 0;
      }
      if(lineNow > txtAr.length - 1) {
                setTimeout(function() {
                lineNow = 0;
                drawText();
                }, 10000);
      } else {
                setTimeout(drawText, 500);
      }
})();
let aud = new Audio();      
aud.src = 'https://wj.zp68.com/lxx/yunhua/2023/06/17/01.mp3';
aud.loop = true;
aud.autoplay = true;

disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');
</script>
<br><br><br><br><br>

宁静 发表于 2023-6-20 21:52

手机点击小转盘播放器

沉默 发表于 2023-6-20 22:07

虽然迟了一点，还是第一个冲进来的，刚才有点事，估计你已经下了

沉默 发表于 2023-6-20 22:08

欣赏优美的风景画{:9022:}

沉默 发表于 2023-6-20 22:08

原来二胡也是这么好听{:9022:}

沉默 发表于 2023-6-20 22:09

第一次听二胡演奏这首緑岛小夜曲

沉默 发表于 2023-6-20 22:14

再进来欣赏

撒哈拉的雨 发表于 2023-6-21 11:17

这个单图我喜欢，做的好漂亮，{:7_270:}

撒哈拉的雨 发表于 2023-6-21 11:20

这绿岛像一只船，在月夜里摇呀摇~~~~~

撒哈拉的雨 发表于 2023-6-21 11:21

你也在我的心海里飘呀飘，让我的歌声随那微风，

查看完整版本: 绿岛小夜曲 二胡演奏