相约爱晚亭 发表于 2022-11-7 10:27

航天人之歌

<style>

#papa { margin-left: -14px; display: grid; place-items: center; width: 1024px; height: 640px; background: #000 url('https://s1.ax1x.com/2022/11/05/xOIgUJ.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; perspective: 1000px; overflow: hidden; user-select: none; position: relative; z-index: 1; }
#papa::after { position: absolute; content: '航 天 人 之 歌'; top: 20px;left:320px; font: bold 3em sans-serif; color: snow; text-shadow: 2px 2px 3px #ccc; opacity: .6; }
#mplayer { position: absolute; bottom: 20px; left:20px; z-index: 200; }
#btnwrap { display: block; fill: hsla(30, 20%, 80%, .9); cursor: pointer; }
#btnwrap:hover { fill: hsla(90, 100%, 100%, .9); }
#tmsg { fill: hsla(30, 100%, 90%, .9); stroke: none; font: bold 1em sans-serif; }
#dt1{ position: absolute; width: 110px; height: 75px; top: 200px; left: 530px; }
.stars { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: silver; transform-style: preserve-3d; }
@keyframes move { to { transform: rotate(0) translate3d(0, 0, 0); } }

</style>

<div id="papa">
      <svg id="mplayer" width="120" height="120">
                <g id="mama" transform="rotate(-90, 60, 60)" style="cursor: pointer;">
                        <circle id="track" cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke="hsla(240, 20%, 80%, .77)" />
                        <circle id="prog" cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke="hsla(240,100%,60%,.65)" />
                </g>
                <g id="btnwrap">
                        <path id="btnplay" d="M 50 50,50 70,70, 60 z"></path>
                        <path id="btnpause" d="M 52 50,52 70,57 70,57 50,52 50 z M 60 50,60 70,65 70,65 50,60 50 z" style="display: none;"></path>
                        <path d="M 57 50,60 50,60 70,57 70 z" fill="transparent" />
                </g>
                <path id="curPath" d="M 20 70 Q 60 0 100 70" fill="none" stroke="none"/>
                <path id="durPath" d="M 20 55 Q 60 110 100 55" fill="none" stroke="none"/>
                <g id="tmsg">
                        <text x="34" y="0"><textPath id="curMsg" xlink:href="#curPath" dominant-baseline="text-after-edge">00:00</textPath></text>
                        <text x="29" y="0"><textPath id="durMsg" xlink:href="#durPath" dominant-baseline="text-before-edge">00:00</textPath></text>
                </g>
      </svg>
<img id="dt1" src="https://wj.zp68.com/lxx/yunhua/2022/10/10/hq.gif" alt="" />
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1808956444.mp3" loop autoplay></audio>

<script>

(function() {
      (function() {for(j=0; j<500; j++) {let ele = document.createElement('span');ele.className = 'stars';ele.style.cssText += `left: ${Math.random() * 200 + 420}px;top: ${Math.random() * 100 + 260}px;background: hsla(${Math.random() * 255}, ${Math.random() * 50 + 40}%,${Math.random() * 40 + 20}%, ${Math.random() * .5 + .4});box-shadow: 0 0 5px hsla(0,10%,100%,.25);transform: rotate(${Math.random() * 720}deg) translate3d(${Math.random() * 500}px,${Math.random() * 300}px,${Math.random() * 1000}px);animation: move 30s infinite ${-10 - Math.random() * 20}s linear;`;papa.appendChild(ele);}})();
      let cc = { x: 1*track.getAttribute('cx'), y: 1*track.getAttribute('cy'), len: track.getTotalLength(),};
      prog.style.strokeDasharray = prog.style.strokeDashoffset =cc.len;
      btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
      mama.onclick = (e) => {let deg = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;deg += (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;aud.currentTime = aud.duration * deg / 360;};
      aud.addEventListener('pause', () => mState());
      aud.addEventListener('play', () => mState());
      aud.addEventListener('seeked', () => aud.play());
      aud.addEventListener('timeupdate', () => {prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration;curMsg.textContent = toMin(aud.currentTime);durMsg.textContent = toMin(aud.duration);});
      let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');
      let toMin = (val)=> {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if(min < 10) min = '0' + min;if(sec < 10) sec = '0' + sec;return min + ':' + sec;};
      document.title = 'Human Legacy';
})();

</script>
<br><br><br><br><br>

绿地水池 发表于 2022-11-7 11:18

谢谢分享。

非常开心 发表于 2022-11-7 12:37

欣赏楼主的新作，点赞在哪里学习的，用什么软件？

195400 发表于 2022-11-7 16:40

点赞！

怎么没加上歌词同步，相较歌曲进度歌词同步应该分量重些。

195400 发表于 2022-11-7 16:47


作词 : 李勤华（北冰洋暖流）
作曲 : 张海燕
东方红响彻日月星辰
五星红旗飞扬银河星际
长征五号托举嫦娥奔月
环游天际浩瀚万里长空
神舟飞船往返星河大地
航天大器巡游深空寰宇
长征五号助力北斗争辉
编织网络经纬气贯长虹
一代航天人寻梦宇宙
勇敢追梦星球天地传情
智慧洒满日月万丈光芒
知识点缀云河一道彩虹
飞天梦想古今夙愿成真
航天梦想百年追寻
百年追寻苍穹

东方红响彻日月星辰
五星红旗飞扬银河星际
长征五号托举嫦娥奔月
环游天际浩瀚万里长空
神舟飞船往返星河大地
航天大器巡游深空寰宇
长征五号助力北斗争辉
编织网络经纬气贯长虹
一代航天人圆梦神州
科技智慧光辉云天碧海
英雄儿女勇敢担当未来
科技强国有我中华儿女
航天强国有我航天英雄
驰骋太空日月同辉
日月同辉与共
日月同辉与共

相约爱晚亭 发表于 2022-11-7 16:58

绿地水池 发表于 2022-11-7 11:18
谢谢分享。

谢谢绿地水池的鼎力支持和鼓励！

相约爱晚亭 发表于 2022-11-7 16:59

非常开心 发表于 2022-11-7 12:37
欣赏楼主的新作，点赞在哪里学习的，用什么软件？

谢谢您的支持和鼓励！在花潮论坛学习。

相约爱晚亭 发表于 2022-11-7 17:00

195400 发表于 2022-11-7 16:40
点赞！

怎么没加上歌词同步，相较歌曲进度歌词同步应该分量重些。

本帖主要是学习黑黑老师的彩色粒子特效。

相约爱晚亭 发表于 2022-11-7 17:02

195400 发表于 2022-11-7 16:47


谢谢朋友提供了歌曲的LRC歌词。问好！

绿地水池 发表于 2022-11-7 19:24

相约爱晚亭 发表于 2022-11-7 16:58
谢谢绿地水池的鼎力支持和鼓励！

相约爱晚亭朋友晚上好。
页: [1] 2
查看完整版本: 航天人之歌