我的楼兰 (DJ版) - DJ【本论坛js封装】
本帖最后由 亚伦影音工作室 于 2024-7-18 10:00 编辑 <br /><br /><style>#papa { margin: 140px 0 20px calc(50% - 781px); width: 1400px; height: 700px; box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 123465; position: relative; display: grid; place-items: center; }
#bjbs{animation: rotating 1s linear infinite;width: 200px; height:180px;position:absolute;z-index: 1;top: 10px;left: 85%;}
#bjbs img{ width: 100%; height: 100%;}
@keyframes rotating{50%{filter:hue-rotate(360deg)contrast(110%)brightness(100%);}}
#jzg{width: 320px; height:320px;position:absolute;z-index: 2;left: 55%;top: 35%;cursor: pointer;}
#jzg img{ width: 100%; height: 100%;}
#vid { position: absolute; width: 100%; height: 100%; top:0%; left: 0%;object-fit: cover; pointer-events: none;opacity: 1;z-index: -1;}
#lrc{left: 15%;top: 88%;}#lrcc {right:15%;top: 92%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, #880000, #880000);border:0px solid black;position: absolute;z-index: 2;font:normal 2.5em 华文隶书;color: #ccc;white-space: pre;-webkit-background-clip: text;z-index: 20;filter:drop-shadow(#000078 1px 0 0)drop-shadow(#000078 0 1px 0)drop-shadow(#000078 -1px 0 0) drop-shadow(#000078 0 -1px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: #880000;overflow: hidden;white-space: pre; animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
</style>
<div id="papa">
<div id="bjbs"><img id="Img" src="https://pic.imgdb.cn/item/661b0afd68eb935713287d17.png" alt="" /></div>
<video id="vid" src="https://www.kumeiwp.com/wj/221424/2024/07/17/f140f333dcde01a61d0c5b2b96775cec.mp4" muted autoplay loop></video>
<div id="jzg"title="暂停/播放"><img id="dtImg" src="https://pic.imgdb.cn/item/66933228d9c307b7e91c07e8.gif" alt="" /></div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/d9/bd/aa/9af2708608affb8724fc348a58910944/audio.mp3" autoplay loop></audio>
<span id="lrcStr" style="visibility: hidden;">
本论坛js封装测试
我的楼兰 (DJ版) - DJ.
作曲 : DJ
编曲 : DJ
想问沙漠借那一根曲线
缝件披风为你御寒
用肺腑去触摸你的灵魂
我就在那只火炉边取暖
想问姻缘借那一根红线
深埋生命血脉相连
用丝绸去润泽你的肌肤
我就在那个怀抱里缠绵
你总是随手把银簪
插在太阳上面
万道光芒蓬松着
你长发的波澜
我闻着芬芳跋涉着无限远
只为看清你的容颜
你总不小心把倩影
靠在月亮上面
万顷月光舞动着
你优美的梦幻
我闻着芬芳跋涉着无限远
只为看清你的容颜
谁与美人共浴沙河
互为一天地
谁与美人共枕夕阳
长醉两千年
从未说出我是你的尘埃
但你却是我的楼兰
想问姻缘借那一根红线
深埋生命血脉相连
用丝绸去润泽你的肌肤
我就在那个怀抱里缠绵
你总是随手把银簪
插在太阳上面
万道光芒蓬松着
你长发的波澜
我闻着芬芳跋涉着无限远
只为看清你的容颜
你总不小心把倩影
靠在月亮上面
万顷月光舞动着
你优美的梦幻
我闻着芬芳跋涉着无限远
只为看清你的容颜
谁与美人共浴沙河
互为一天地
谁与美人共枕夕阳
长醉两千年
从未说出我是你的尘埃
但你却是我的楼兰
想问沙漠借那一根曲线
缝件披风为你御寒
用肺腑去触摸你的灵魂
我就在那只火炉边取暖
想问姻缘借那一根红线
深埋生命血脉相连
用丝绸去润泽你的肌肤
我就在那个怀抱里缠绵
你总是随手把银簪
插在太阳上面
万道光芒蓬松着
你长发的波澜
我闻着芬芳跋涉着无限远
只为看清你的容颜
你总不小心把倩影
靠在月亮上面
万顷月光舞动着
你优美的梦幻
我闻着芬芳跋涉着无限远
只为看清你的容颜
谁与美人共浴沙河
互为一天地
谁与美人共枕夕阳
长醉两千年
从未说出我是你的尘埃
但你却是我的楼兰
想问姻缘借那一根红线
深埋生命血脉相连
用丝绸去润泽你的肌肤
我就在那个怀抱里缠绵
你总是随手把银簪
插在太阳上面
万道光芒蓬松着
你长发的波澜
我闻着芬芳跋涉着无限远
只为看清你的容颜
你总不小心把倩影
靠在月亮上面
万顷月光舞动着
你优美的梦幻
我闻着芬芳跋涉着无限远
只为看清你的容颜
谁与美人共浴沙河
互为一天地
谁与美人共枕夕阳
长醉两千年
从未说出我是你的尘埃
但你却是我的楼兰
</span>
<script >
/*以下是歌词插件和动图的插件及控件*/
document.write('<script src="attach://45716.rar" type="text/javascript" charset="utf-8"><\/script>');
document.write('<script src="attach://45715.rar" type="text/javascript" charset="utf-8"><\/script>');
document.write('<script src="attach://45717.rar" type="text/javascript" charset="utf-8"><\/script>');
</script>
<script>
(function() {let vid = document.querySelector('vid');
let mState = () => aud.paused ?vid.pause() :vid.play();
})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script>
怎一个美字了得！{:5_116:} 这唱机用得漂亮，伴随着大海的涛声呢。
大海的视频和流沙视频也好美，还有变色闪烁的花潮图标呢，太美了{:4_199:} 歌曲也极好听，谢谢亚伦老师的好帖{:4_199:} 亚伦这mp4效果加的好，和前面一个一样，mp4都很出彩{:4_199:} 但还是建议查一下什么原因，加分后就卡出论坛了 欣赏亚伦精彩制作，感谢分享{:4_187:}
页:
[1]