加林森 发表于 2022-6-21 08:43

《故乡的原风景》- 宗次郎

本帖最后由 加林森 于 2022-6-21 09:24 编辑 <br /><br /><style type="text/css">
.mama { left: -214px; width: 1024px; height: 560px; background: #eee; overflow: hidden; box-shadow: 0 4px 30px #000; position: relative; }
.player { position: absolute; bottom: 10px; right: 10px; padding: 12px; cursor: pointer; }
.vid { position: absolute; top: -55px; width: 1024px; height: 615px; object-fit: cover; }
.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; }
.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;}
#lrcMsg { font: bold 1.5em / 2em sans-serif; display: block; color: #eee; text-shadow: 1px 1px 2px #000; }
#meter { width: 160px; cursor: pointer; }
@keyframes fade { to { opacity: .5; } }
</style>

<div class="mama">
      <video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/16/30/5e9d530b2c3b0.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
      <div class="circleTxt"></div>
      <div class="player">
                <span id="lrcMsg">故乡的原风景-宗次郎</span>
                <meter id="meter" min="0" max="100" low="33" high="66" optimum = "70" value="0"></meter>
      </div>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/06/18/c5f20b1544312d255428602d376c8605.mp3" autoplay="autoplay" loop="loop"></audio>

<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;
}

</script>

加林森 发表于 2022-6-21 08:43

@马黑黑

红影 发表于 2022-6-21 10:29

队长学得很快呢，这个视频背景选得好，帖子做得也很成功。厉害{:4_187:}

加林森 发表于 2022-6-21 11:01

红影 发表于 2022-6-21 10:29
队长学得很快呢，这个视频背景选得好，帖子做得也很成功。厉害

谢谢红影支持啊！我先选了2个视频的。一个是大海的，另外就是这个了。

马黑黑 发表于 2022-6-21 12:14

想仔细瞅瞅骑车美驴有点难度{:4_170:}

加林森 发表于 2022-6-21 12:34

马黑黑 发表于 2022-6-21 12:14
想仔细瞅瞅骑车美驴有点难度

就是让你心痒痒才行。{:4_172:}

红影 发表于 2022-6-21 16:48

加林森 发表于 2022-6-21 11:01
谢谢红影支持啊！我先选了2个视频的。一个是大海的，另外就是这个了。

感觉应该是这个更符合乐曲呢。

醉美水芙蓉 发表于 2022-6-21 16:53

加林森 发表于 2022-6-21 17:31

红影 发表于 2022-6-21 16:48
感觉应该是这个更符合乐曲呢。

嗯嗯，那就好。没有选错的。

加林森 发表于 2022-6-21 17:31

醉美水芙蓉 发表于 2022-6-21 16:53
队长厉害！做得好漂亮哦！

谢谢水芙蓉。
页: [1]
查看完整版本: 《故乡的原风景》- 宗次郎