《玫瑰心语》 - 王馨&李青（学习黑总“爱的命运”代码）
本帖最后由 亦是金 于 2023-3-13 09:59 编辑 <br /><br /><div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1854145">
<div class="cont-area">
<div style="width: 1200px;height: 700px;box-shadow:0px 0px 1px 2px #045768, 0px 0px 0px 8px #99e5f5,0px 0px 5px 15px #045768;overflow:hidden;border-radius:1%;margin-top:100px;margin-LEFT: -310px;">
<style>
#papa {
margin: auto;
width: 1200px;
height: 700px;
top: -50px;
left: 0px;
background: lightblue url('https://www.kumeiwp.com/sub/filestores/2023/03/12/e7451316b263313522adb7aee3ac746e.gif') center/cover no-repeat;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
#btnFs {
position: absolute;
bottom: 80px;
right:80px;
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;
top: 34.7%; /*145px;*/
left: 58.5%; /*538px;*/
width: 80px;
height: 80px;
background: #E94142;
transform: rotate(135deg);
opacity: .8;
filter: drop-shadow(260px -280px 20px #000);
animation: beat .45s infinite alternate var(--state);
cursor: pointer;
--state: paused;
}
#mplayer::before,
#mplayer::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
border-radius: 50%;
background: inherit;
}
#mplayer::before { top: 50px; }
#mplayer::after { left: -50px; }
#mplayer:hover { background: red; }
@keyframes beat { to { transform: rotate(135deg) scale(0.9); } }
#lrc { --motion: cover1; --tt: 5s; --state: paused; position: absolute; left: 200px; 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>
<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="" alt="" /></div>
<div id="btnFs">全屏观赏</div><audio id="aud" src="https://www.kumeiwp.com/sub/filestores/2023/03/12/3c8968fdbf9e7400a4b728e8e876ca10.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> 这个好玩，新新的 前辈 你这个图图我看不见呢，可能我的速度慢 就看见上下2颗心 可能图片太大了，我也看不到图图呢。 小辣椒 发表于 2023-3-12 18:40
就看见上下2颗心
酷美失联，现在恢复了，可以看见了！谢谢欣赏！{:4_187:} 红影 发表于 2023-3-12 18:58
可能图片太大了，我也看不到图图呢。
原因是酷美失联，现在恢复了，可以看见了！谢谢欣赏！{:4_187:} 醉美水芙蓉 发表于 2023-3-12 20:03
现在看见了！很漂亮！
问好醉美水芙蓉，谢谢欣赏！{:4_187:} 庶民 发表于 2023-3-12 18:14
这个好玩，新新的
问好庶民朋友！谢谢欣赏！{:4_191:} 做得漂亮，欣赏美图 绿叶清舟 发表于 2023-3-12 20:45
做得漂亮，欣赏美图
问好绿叶清舟！祝你欣赏愉快！{:4_187:} 亦是金 发表于 2023-3-12 20:08
原因是酷美失联，现在恢复了，可以看见了！谢谢欣赏！
看见了，很漂亮的制作{:4_187:} 红影 发表于 2023-3-12 22:47
看见了，很漂亮的制作
问好红影！祝你欣赏愉快！{:4_187:} 亦是金 发表于 2023-3-14 12:38
问好红影！祝你欣赏愉快！
这个制作非常浪漫。欣赏亦是金老师好帖{:4_204:}
页:
[1]