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

《美丽故事》- 池珍熙+金城武


<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/2629112/00/01/73/5b496be9c9ba2.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/16/c15bbe1c94d0663b4936316f2283a98d.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 14:20

队长又是一个带转圈文字的，真快啊{:4_204:}

梦油 发表于 2022-6-21 14:31

字幕设计的很精巧。

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

红影 发表于 2022-6-21 14:20
队长又是一个带转圈文字的，真快啊

三个足够了。{:4_189:}

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

梦油 发表于 2022-6-21 14:31
字幕设计的很精巧。

好看吧。

梦油 发表于 2022-6-21 20:47

加林森 发表于 2022-6-21 17:36
好看吧。

好看，好看！

加林森 发表于 2022-6-21 21:24

梦油 发表于 2022-6-21 20:47
好看，好看！

那就好。

梦油 发表于 2022-6-22 10:09

加林森 发表于 2022-6-21 21:24
那就好。

我很喜欢你的作品。

加林森 发表于 2022-6-22 12:37

梦油 发表于 2022-6-22 10:09
我很喜欢你的作品。

很好嘛。你喜欢就好。

梦油 发表于 2022-6-22 14:28

加林森 发表于 2022-6-22 12:37
很好嘛。你喜欢就好。

希望经常看到你的佳作。

加林森 发表于 2022-6-22 16:11

梦油 发表于 2022-6-22 14:28
希望经常看到你的佳作。

我每天都会发几个出来给大家欣赏的。

梦油 发表于 2022-6-22 17:27

加林森 发表于 2022-6-22 16:11
我每天都会发几个出来给大家欣赏的。

好极了。

加林森 发表于 2022-6-22 17:30

梦油 发表于 2022-6-22 17:27
好极了。

嗯嗯。
页: [1]
查看完整版本: 《美丽故事》- 池珍熙+金城武