本帖最后由 花简静 于 2025-2-27 20:49 编辑
<style>
#papa { margin: 130px 0 30px calc(50% - 931px); display: grid; place-items: center; width: 1700px; height: 900px; background: url('https://642303.freep.cn/642303/tu/20250219rose.webp') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; }
#lrc { position: absolute; bottom: 10px; font: bold 1.8em sans-serif; color: silver; text-shadow: 1px 1px 1px rgba(250,250,250,.75); --ani: lrcGo1; --duration: 1s; }
#lrc::before { position: absolute; content: attr(data-lrc); width: 100%; height: 100%; color: transparent;background: linear-gradient(white,DimGray); background-clip: text; -webkit-background-clip: text; clip-path: inset(0 100% 0 0); animation: var(--ani) var(--duration) linear forwards var(--state); }
#mplayer { position: absolute; bottom: 50px; text-align: center; color:DimGray;filter: hue-rotate(130deg); opacity: .7;}
#mplayer::before { position: absolute; content: attr(data-tt); left: 0; bottom: 25px; width: 100%; text-align-last: justify; }
#mprog { width: 280px; accent-color: Gray; outline: none; cursor: pointer; opacity: .7; }
#mprog:focus { accent-color: DarkGray; }
#btnplay { width: 50px; height: 50px; cursor: pointer; animation: rotating 6s infinite linear var(--state); }
#btnplay:hover { filter: invert(.2); }
#btnFs { position: absolute; left:10px;bottom: 10px; color: silver; background: none; opacity: 0; border: 2px solid silver; border-radius: 6px; padding: 4px; transition: all .75s; cursor: pointer; z-index: 100; }
#papa video { position: absolute; bottom: 0; width: 100%; height: calc(100% + 100px); object-fit: cover; mix-blend-mode: screen; pointer-events: none;opacity: .4;-webkit-mask: linear-gradient(to bottom,transparent,transparent,red); }
@keyframes rotating { to { transform: rotate(360deg); } }
@keyframes lrcGo0 { to { clip-path: inset(0 0 0 0); } }
@keyframes lrcGo1 { to { clip-path: inset(0 0 0 0); } }
@keyframes move { to { offset-distance: 100%; } }
</style>
<div id="papa">
<audio src="https://music.163.com/song/media/outer/url?id=1867217766.mp3"></audio>
<video src="https://img.tukuppt.com/video_show/15653652/01/12/35/6193af432daf8.mp4" muted loop></video>
<video src="" muted loop></video>
<div id="mplayer" data-tt="0:00 0:00">
<img id="btnplay" src="https://638183.freep.cn/638183/small/hxxb.webp" title="播放/暂停" alt="" /><br>
<input id="mprog" type="range" min="0" max="100" step="any" value="0" title="调节进度" />
</div>
<div id="btnFs">全屏观赏</div>
<div id="lrc" data-lrc="简静音画">简静音画</div>
</div>
<script>
let geci = [[2.0,"致你（演唱 ：yihuik苡慧）",3.1],[10.9,"作词 : 周萌",1.8],[12.75,"作曲 : 郭子阳",2.2],[16.96,"编曲 : 周智旭",9.4],[18.33,"恋恋不舍又念念不忘",4.0],[22.3,"被汹涌浪潮淹没",3.0],[26.11,"覆盖了属于我",2.4],[28.48,"最孤独的海洋",2.2],[30.67,"迷茫的游荡",3.7],[34.36,"不知去往何方",1.6],[35.94,"支离破碎",2.0],[38.21,"或遍体鳞伤",1.9],[40.09,"研磨成匆匆过往",3.2],[43.59,"一幕幕的相逢",2.6],[46.22,"都不甘于平庸",2.3],[48.48,"原谅我此番",3.4],[52.08,"不经意的设防",1.6],[53.69,"跌跌宕宕",2.3],[55.94,"你占据我的遐想",2.2],[58.09,"封上你路过的窗",3.1],[61.68,"你的声音",1.8],[63.63,"来来往往",1.8],[65.77,"穿梭在无人演出的剧场",4.4],[70.27,"若想念是凋谢的云",2.8],[73.05,"乘着风也飘向你",2.0],[75.1,"降落在你耳边低语",4.1],[79.22,"像沉默的打字机",2.7],[81.87,"满怀热烈情绪",2.3],[84.21,"写不出会别离太爱你",3.2],[87.38,"到最后",0.2],[87.56,"我只好小心翼翼",3.2],[90.78,"尝试着偷偷靠近",2.1],[92.89,"触碰你那透明的心",4.3],[97.17,"猜你启封的表情",2.3],[99.48,"只敢写下开篇的",2.5],[102.09,"致你",2.7],[125.19,"恋恋不舍又念念不忘",3.8],[129.04,"被汹涌浪潮淹没",3.3],[132.32,"覆盖了属于我",2.7],[135.02,"最孤独的海洋",2.3],[137.36,"迷茫的游荡",3.8],[141.18,"不知去往何方",1.5],[142.64,"支离破碎",2.0],[144.88,"或遍体鳞伤",1.9],[146.74,"研磨成匆匆过往",3.2],[150.48,"一幕幕的相逢",2.4],[152.91,"都不甘于平庸",2.3],[155.21,"原谅我此番",3.4],[158.72,"不经意的设防",1.6],[160.32,"跌跌宕宕",2.2],[162.47,"你占据我的遐想",2.2],[164.7,"封上你路过的窗",3.1],[167.94,"你的声音",1.8],[170.11,"来来往往",1.8],[172.57,"穿梭在无人演出的剧场",4.2],[177.13,"若想念是凋谢的云",2.5],[179.63,"乘着风也飘向你",2.1],[181.71,"降落在你耳边低语",4.2],[185.88,"像沉默的打字机",2.6],[188.48,"满怀热烈情绪",2.1],[190.62,"写不出会别离太爱你",3.4],[194.06,"到最后",1.2],[195.22,"我只好小心翼翼",2.2],[197.4,"尝试着偷偷靠近",2.1],[199.47,"触碰你那透明的心",4.0],[203.69,"猜你启封的表情",2.4],[206.14,"只敢写下开篇的",2.3],[209.11,"致你",2.0],[212.56,"若想念是凋谢的云",2.6],[215.14,"乘着风也飘向你",2.1],[217.26,"降落在你耳边低语",4.2],[221.47,"像沉默的打字机",2.5],[223.95,"满怀热烈情绪",2.4],[226.38,"写不出会别离太爱你",3.5],[229.83,"到最后",1.2],[231.01,"我只好小心翼翼",1.9],[232.86,"尝试着偷偷靠近",2.2],[235.05,"触碰你那透明的心",4.1],[239.11,"猜你启封的表情",2.5],[241.64,"只敢写下开篇的",2.4],[244.46,"致你",2.0]];
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/rangelrc_fs.js';
document.querySelector('body').appendChild(sF);
</script>
|
川公网安备51180202512072 )
