《哥哥妹妹趟过爱情河》 - 月下思故人/红蔷薇
本帖最后由 亦是金 于 2023-5-25 12:57 编辑 <br /><br /><div class="t_fsz"><table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1854145">
<div style="width: 1100px;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:20px;margin-LEFT: -250px;">
<style>
#papa {
left: 0px;
top: -80px;
width: 1100px;
height: 700px;
background: lightblue url('https://z4a.net/images/2023/04/24/0424.gif') center/cover no-repeat;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
.star5 { position: absolute; background: transparent; top: -0px; left: -0px; font: normal 18px /18px sans-serif; offset-distance: 0%; offset-path: path("m310,180c0,0 21,-18 21,-18c0,0 10,-23 10,-23c0,0 -16,-15 -16,-15c0,0 -39,-3 -39,-3c0,0 -42,7 -42,7c0,0 -48,15 -48,15c0,0 -39,25 -39,25c0,0 -23,28 -23,28c0,0 -9,52 -9,52c0,0 -16,31 -16,31c0,0 -33,24 -33,24c0,0 52,-25 52,-25c0,0 54,-15 54,-15c0,0 47,-15 47,-15c0,0 15,-18 16,-18c1,0 -10,-10 -10,-10c0,0 -27,12 -27,12c0,0 -16,14 -16,14c0,0 -1,11 -1,11c0,0 49,-18 49,-18c0,0 33,-25 34,-25c1,0 -3,14 -3,14c0,0 28,1 28,1c0,0 15,-16 16,-16c1,0 8,-8 8,-9c0,-1 -17,1 -17,1c0,0 2,9 2,9c0,0 25,-4 25,-4c0,0 44,-16 44,-16c0,0 0,-7 0,-7c0,0 -20,1 -20,1c0,0 -11,14 -11,14c0,0 12,11 12,11c0,0 27,-4 27,-4c0,0 37,-14 37,-14c0,0 21,-19 21,-19c0,0 4,-21 4,-21c0,0 -60,-7 -60,-7c0,0 -38,10 -38,10c0,0 -39,22 -39,22z"); text-shadow: 0 0 12px rgba(199,245,122,.75); animation: move 18s var(--ss) linear infinite; }
@keyframes move{to{offset-distance:100%}}
#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: 20.7%; /*145px;*/
left: 18.5%; /*538px;*/
width: 80px;
height: 80px;
background: #E94142;
transform: rotate(135deg);
opacity: 0;
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>
<style type="text/css">
@keyframes mv { from { background-position: 1200px 0; } to { background-position: 0 0; } }
body { overflow-x: hidden; }
#baiBox {
margin: auto;
width: 800px;
text-align: center;
font-family:微软简中圆;
font-size: 2.5rem;
font-weight: bold;
color: #f46ff6;
transform-origin: top;
animation: yao 1.0s linear infinite alternate;
}
@keyframes yao {
from{transform: perspective(800px) rotatex(30deg); }
to { transform: perspective(800px) rotatex(-30deg); }
}
.tit { position: relative;width: 300px;height: 30px;top:20px;LEFT: -250px;z-index: 100;filter: drop-shadow(-1px 1px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff) }
#tit:hover { color: green; }
/*标题位置 移动范围设置*/
</style>
<div id="hu" >
<div id="baiBox"
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:32px;">《哥哥妹妹趟过爱情河》</span>
<span style="color:#3d46f7;"><span style="font-size:18px;">- 月下思故人/红蔷薇</span></div>
<div style="position: relative;width: 500px;height: 50px;top:610px;LEFT: 900px;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:26px;"></span></span></span></p></div>
</style>
<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="http://chuangshicdn.data.mvbox.cn/music/yc/23/04/06/23040620504989297450.mp3" autoplay="" loop=""></audio>
<img src="https://z4a.net/images/2023/04/25/89034316_1.png" alt="" style="position: absolute; width: 850px;height: 480px;top: 190px; left: -130px; transform: rotate(-5deg);" />
<img src="https://z3.ax1x.com/2021/08/26/hujGMd.gif" alt="" style="position: absolute; width: 80px;height: 40px; transform: translate(350px, 260px); mix-blend-mode: multiply;" />
</div>
<script>
let setColor = () => Math.random().toString(16).substr(-6);
Array.from({length: 1}).forEach((ele,key) => {
ele = document.createElement('span');
ele.className = 'star5';
ele.innerText = '\u273f';
ele.style.cssText += `--ss: ${key * 0.5}s; color: #faf681;`;
papa.appendChild(ele);
});
</script>
<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>
<div style="position: relative;width: 1000px;height: 50px;top:20px;LEFT: -50px;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:26px;">提示：播放器隐藏了，点击love的图案即可播放，暂停歌曲！</span></span></span></p></div>
真漂亮的帖，欣赏问好！{:4_187:} 梦缘 发表于 2023-4-26 10:47
真漂亮的帖，欣赏问好！
问好梦缘！谢谢欣赏！{:4_187:} 醉美水芙蓉 发表于 2023-4-26 11:44
做得真漂亮！
问好醉美水芙蓉！谢谢欣赏！{:4_187:} 这个路径制作漂亮{:4_199:} 醉美水芙蓉 发表于 2023-4-26 11:46
老师动图拿什么软件做的？
love上面的花朵动画，用svg路径制作（移步：https://www.huachaowang.com/thread-68203-1-1.html）。整个背景运行多个swf,gif的htm网页，用“抠抠视频秀”截屏制得。 欣赏亦是金好制作{:4_178:} 桥，蝴蝶是在本帖中添加的代码中运行的！ 这个没有看见播放器？ 冬天的雨 发表于 2023-4-26 12:07
这个路径制作漂亮
谢谢欣赏！{:4_191:} 冬天的雨 发表于 2023-4-26 12:08
欣赏亦是金好制作
祝你欣赏愉快！{:4_191:} 冬天的雨 发表于 2023-4-26 12:11
这个没有看见播放器？
播放器隐藏了，点击love的图案即可播放，暂停歌曲！ 主要音乐不能点击停止，发现没有播放器出来 亦是金 发表于 2023-4-26 12:18
播放器隐藏了，点击love的图案即可播放，暂停歌曲！
哦，你还真得提醒一下，否则不清楚 冬天的雨 发表于 2023-4-26 12:20
哦，你还真得提醒一下，否则不清楚
谢谢你的建议！我在帖子的下方添加了提醒！{:4_191:} 欣赏精彩的制作，前辈这个路径我也是做了一个，谢谢你上次的那个分享 这个原来是隐藏播放器，我试了一下。{:4_178:} 醉美水芙蓉 发表于 2023-4-26 11:46
老师动图拿什么软件做的？
水芙蓉这个动图你不会？一直以为你会，看见亚伦做过许多动图的
就抠抠视频秀 非常简单的一个软件
页:
[1]
2