光辉岁月--孙露（学习黑黑的扭动字效果）
<style>
#papa { left: -414px; width: 1400px; height: 711px;top:150px; background: gray url('http://wx.ttt.dj/data/nfs/img/1400X711.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; overflow: hidden; user-select: none; position: relative; z-index: 1; }
.btnplay { position: absolute; top: 0px; left: 100px; width: 80px; height: 80px; border-radius: 50%; box-shadow: 15px 10px 0 0 orange; cursor: pointer; z-index: 10; animation: swing 1s linear infinite alternate; }
.btnplay::before { position: absolute; content: ''; left: 20px; top: 12px; width: 100%; height: 100%; }
.btnplay::after { position: absolute; content: ''; left: 25px; top: 25px; width: 40%; height: 40%; border-radius: 50%; background: tan; box-shadow: 0 0 30px 0px purple, 0 0 100px 0 snow; }
#lrc { --motion: cover1; --tt: 1s; --state: paused; position: absolute; bottom: 200px;left: 150px; font: bold 2.4em sans-serif; color: hsl(60,100%,90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0,100%,0%,.85)); }
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: nowrap; background: linear-gradient(180deg,hsla(0,100%,50%,.75),hsla(60,100%,50%,.65)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state); }
#svg { position: absolute; font: bold 10em sans-serif; }
.text { fill: none; stroke-width: 3; stroke-dasharray: 0 300; stroke-dashoffset: 0; }
.text:nth-child(3n + 1) { stroke: orange; animation: stroke1 30s ease-in-out infinite alternate; }
.text:nth-child(3n + 2) { stroke: red; animation: stroke2 30s ease-in-out infinite alternate; }
.text:nth-child(3n + 3) { stroke: snow; animation: stroke3 30s ease-in-out infinite alternate; }
.text:hover { fill: teal; opacity: .45; }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes swing { from { transform: rotate(0deg); } to { transform: rotate(30deg); } }
@keyframes stroke1 { to { stroke-dashoffset: 1000; stroke-dasharray: 80 160; } }
@keyframes stroke2 { to { stroke-dashoffset: 1080; stroke-dasharray: 80 160; } }
@keyframes stroke3 { to { stroke-dashoffset: 1160; stroke-dasharray: 80 160; } }
</style>
<div id="papa">
<svg id="svg" width="1400" height="640">
<symbol id="s-text"><text text-anchor="middle" x="35%" y="30%" dy=".35em">光辉岁月</text></symbol>
<use xlink:href="#s-text" class="text"></use>
<use xlink:href="#s-text" class="text"></use>
<use xlink:href="#s-text" class="text"></use>
</svg>
<span class="btnplay" title="播放/暂停"></span>
<span style="position: absolute; transform: rotate(270deg); bottom: -120px; left: 80px; ">
<span class="btnplay" style="filter:blur(3px); opacity: .45; cursor: default;"></span>
</span>
<span id="lrc" data-lrc="花潮论坛lrc在线">花潮论坛lrc在线</span>
</div>
<script>
(function() {
let mKey = 0, mFlag = true, aud = new Audio();
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let btnplay = document.querySelector('.btnplay');
aud.src = 'https://wx.ttt.dj/data/nfs/mp3/ghss.mp3';
aud.loop = false;
aud.play();
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('ended', () => { mKey = 0; aud.play(); });
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {if (mKey === j) showLrc(lrcAr);else continue;}}});
let mState = () => aud.paused ? (btnplay.style.animationPlayState = 'paused', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.animationPlayState = 'running', lrc.style.setProperty('--state', 'running'));
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrc.dataset.lrc = lrcAr;lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};
})();
</script>
<br><br><br><br><br><br><br><br><br> @马黑黑
黑黑这个好像是我出去之前就发的，今天学习做一个 小辣椒 发表于 2022-10-19 20:32
@马黑黑
黑黑这个好像是我出去之前就发的，今天学习做一个
不是今天发的吗 马黑黑 发表于 2022-10-19 20:34
不是今天发的吗
今天发的是扭动字？我白天手机没有注意的，这个我是前几天下载的 小辣椒 发表于 2022-10-19 20:35
今天发的是扭动字？我白天手机没有注意的，这个我是前几天下载的
下载没标明时间{:4_170:} 马黑黑 发表于 2022-10-19 20:37
下载没标明时间
是的，我也是好几个没有做了，现在搞糊涂了{:4_189:} 小辣椒 发表于 2022-10-19 20:38
是的，我也是好几个没有做了，现在搞糊涂了
正常正常 马黑黑 发表于 2022-10-19 20:39
正常正常
昨天晚上做了一个，感觉不满意，修改后再说了 一直觉得这个文字特别漂亮。亲爱的这首歌还是国语版的，好听。欣赏亲爱的好帖{:4_187:} 制作的真漂亮！赞！{:4_199:} 红影 发表于 2022-10-19 20:51
一直觉得这个文字特别漂亮。亲爱的这首歌还是国语版的，好听。欣赏亲爱的好帖
前几天下载的源码，我没有时间做，很喜欢这个扭动字，学习做一下，就这个播放器没有滚动条，歌词同步我就直接手动修改了一下 加林森 发表于 2022-10-19 20:53
制作的真漂亮！赞！
谢谢队长欣赏，队长今天人感觉好一点吗 小辣椒 发表于 2022-10-19 20:53
前几天下载的源码，我没有时间做，很喜欢这个扭动字，学习做一下，就这个播放器没有滚动条，歌词同步我就 ...
进度条需要拼凑一下是可以的 小辣椒 发表于 2022-10-19 20:54
谢谢队长欣赏，队长今天人感觉好一点吗
好多了。 欣赏精美音画佳作！ 马黑黑 发表于 2022-10-19 20:55
进度条需要拼凑一下是可以的
就这样也是不错{:4_189:} 加林森 发表于 2022-10-19 21:28
好多了。
队长也是就上来看看学习学习黑黑的教程，不要急着做帖，不要累了 相约爱晚亭 发表于 2022-10-19 21:40
欣赏精美音画佳作！
谢谢爱晚亭欣赏{:4_187:} 小辣椒 发表于 2022-10-19 21:58
就这样也是不错
觉得好就好 马黑黑 发表于 2022-10-19 22:01
觉得好就好
很好肯定没有的，黑黑我得下了，去捣鼓昨天那个弄一半的帖
明天见