《万水千山总是情》 - 梦之旅（学习雨中悄然“一天到晚游泳的鱼”代码）
本帖最后由 亦是金 于 2025-3-16 22:56 编辑 <br /><br /><div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1854145">
<style>
#papa {
--state: paused;
margin: -80px 0 0 calc(50% - 683px);
display: grid;
place-items: center;
width: 1200px;
height: 700px;
background: lightblue url('https://www.kumeiwp.com/sub/filestores/2023/03/11/a4019cbf8a42475be3fcea229b8637cb.gif') no-repeat center/cover;
box-shadow: 6px 3px 20px #000;
overflow:hidden;
user-select: none;
position: relative;
z-index: 1;
}
#btnFs {
position: absolute;
bottom: 70px;
right:70px;
width: fit-content;
height: fit-content;
padding: 6px;
border-radius: 6px;
border: 2px solid green;
color: lightgreen;
text-shadow: 1px 1px 1px #000;
display: none;
cursor: pointer;
}
#mplayer {
position: absolute;
left: 650;
top: 0;
width: 50px;
height: 50px;
background: hsla(120,100%,95%,.25);
border-radius: 50%;
box-shadow:
transform: rotate(-30deg);
animation: rot 2s ease-in-out infinite alternate var(--state);
cursor: pointer;
}
#mplayer::before {
position: absolute;
content: '';
left: -20px;
width: 100px;
height:580px;
}
#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; left: 300px; bottom: 50px; font: bold 2.4em sans-serif; color: hsl(20, 10%, 90%); -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95)); z-index: 99;}
#lrc::before { position: absolute; content: attr(data-lrc); width: 20%; height: 100%; color: transparent; overflow: hidden; white-space: pre; background: linear-gradient(180deg, hsla(100, 90%, 50%, .45), hsla(80, 90%, 50%, .6), hsla(0, 100%, 50%, .75)); filter: inherit; -webkit-background-clip: text; animation: var(--motion) var(--tt) linear forwards; animation-play-state: var(--state);z-index: 99; }
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(-10deg); } }}
.pic { position: absolute; width: 664px; height: 116px; top: -80px; object-fit: cover; opacity: 1; }
</style>
<img src="https://z3.ax1x.com/2021/08/26/hujGMd.gif" alt="" style="position: absolute; width: 100px;height: 50px; transform: translate(-850px, 400px); mix-blend-mode: multiply;" />
<div style="position: relative;width: 500px;height: 50px;top:620px;LEFT: 1080px;z-index: 100;filter: drop-shadow(-1px 1px 1px #e8f552)drop-shadow(0px -1px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)drop-shadow(0px 0px 1px #e8f552)">
<p><span style="color:#ff0000;"><span style="font-family:华文隶书;"><span style="font-size:24px;"></span></span></span></p></div>
<div id="papa"><div id="lrc" data-lrc="花潮lrc在线"></div>
<div id="mplayer"><img class="pic" src="https://www.kumeiwp.com/sub/filestores/2023/03/11/8be2bb980508261dd3a1178167c77fa3.png" alt="" /></div>
<div id="btnFs">全屏观赏</div><audio id="aud" src="https://music.163.com/song/media/outer/url?id=1882511450.mp3" autoplay="" loop=""></audio></div>
<script>
(function() {
let fs = false, timerId;
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
aud.addEventListener('ended', () => playNext());
papa.addEventListener('mousemove', (e) => {
clearTimeout(timerId);
btnFs.style.display = 'block';
timerId = setTimeout('btnFs.style.display = "none"', 3000);
});
btnFs.addEventListener('click', () => fs ? document.exitFullscreen() : papa.requestFullscreen());
document.addEventListener('fullscreenchange', () => document.fullscreenElement !== null ? (fs = true, btnFs.innerText = '退出全屏') : (fs = false, btnFs.innerText = '全屏观赏'));
let mKey = 0, mFlag = true;
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
aud.addEventListener('timeupdate', () => {
for (j = 0; j < lrcAr.length; j++) {
if (aud.currentTime >= lrcAr) {
if (mKey === j) showLrc(lrcAr);
else continue;
}
}
});
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></td></tr></table> 看不到。 俺也木看到{:4_203:} 我能看到的啊，水波动效果很漂亮{:4_199:} 庶民 发表于 2023-3-12 05:35
看不到。
现在能看到了，谢谢欣赏！{:4_191:} 樵歌 发表于 2023-3-12 07:57
俺也木看到
现在能看到了，谢谢欣赏！{:4_191:} 绿叶清舟 发表于 2023-3-12 11:06
我能看到的啊，水波动效果很漂亮
问好红影！谢谢欣赏！{:4_187:} 现在看见了，我上次也是没有看见{:4_189:} 这个制作很漂亮，标题字还用了糖葫芦的代码{:4_178:} 小辣椒 发表于 2023-3-12 16:10
这个制作很漂亮，标题字还用了糖葫芦的代码
问好小辣椒！{:4_187:}在这里有多多的好代码，我学习了一点皮毛，就迫不及待的显摆一下，见笑了！{:4_197:} 亦是金 发表于 2023-3-12 16:57
问好小辣椒！在这里有多多的好代码，我学习了一点皮毛，就迫不及待的显摆一下，见笑了！{:4_197 ...
哪里啊，你的作品都非常的好，小辣椒才喜欢摆显的，{:4_170:} 这个链接会不会有问题？背景图看见的，现在看不见了 亦是金 发表于 2023-3-12 11:34
现在能看到了，谢谢欣赏！
看到了，漂亮的{:4_190:} 欣赏佳作！{:4_204:}
页:
[1]