亚伦影音工作室 发表于 2024-7-3 17:00

弹吉他 播放器 《酒儿 - 我怕的不是夜 (DJ彭锐版)》本论坛js封装

本帖最后由 亚伦影音工作室 于 2024-7-3 18:53 编辑 <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: 1; position: relative; display: grid; place-items: center; }
#bjbs{animation: rotating 1s linear infinite;width: 1400px; height:710px;position:absolute;z-index: 1;top: 10px;}
#bjbs img{ width: 100%; height: 100%;}
@keyframes rotating{50%{filter:hue-rotate(360deg)contrast(110%)brightness(100%);}}
#jzg{width: 300px; height:360px;position:absolute;z-index: 2;left: 2%;top: 45%;cursor: pointer;}
#jzg img{ width: 100%; height: 100%;}
#lrc{left: 35%;top: 85%;}#lrcc {right:15%;top: 90%;}
#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/6684a789d9c307b7e9400679.gif" alt="" /></div>
<div id="jzg"title="暂停/播放"><img id="dtImg" src="https://pic.imgdb.cn/item/652e017cc458853aef6f610b.gif" alt="" /></div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
</div>
<audio id="aud" src="https://music.qms23.com/60855.mp3" autoplay loop></audio>
<span id="lrcStr" style="visibility: hidden;">
本论坛js封装测试
酒儿 - 我怕的不是夜 (DJ彭锐版)
走过风雨却没有
走到一起
有过承诺却没有
美好结局
曾经拼命去爱
最后做回甲乙
我们怎么会是这种结局
已经很久没听到
你的声音
已经很久没得到
你的消息
思念穿行万里
到不了你心底
爱你恨你我都无能为力
我怕的不是夜
是怕黑夜没有你
我流的不是泪
是我心里的委屈
你曾说过这辈子
不离也不弃
怎么突然之间和我
断了联系
我怕的不是夜
是怕黑夜没有你
我喝的不是酒
是你给我的回忆
你离开我的世界
一去无归期
从牵手到陌路
竟是如此无语
~Music~
已经很久没听到
你的声音
已经很久没得到
你的消息
思念穿行万里
到不了你心底
爱你恨你我都无能为力
我怕的不是夜
是怕黑夜没有你
我流的不是泪
是我心里的委屈
你曾说过这辈子
不离也不弃
怎么突然之间和我
断了联系
我怕的不是夜
是怕黑夜没有你
我喝的不是酒
是你给我的回忆
你离开我的世界
一去无归期
从牵手到陌路
竟是如此无语
我怕的不是夜
是怕黑夜没有你
我流的不是泪
是我心里的委屈
你曾说过这辈子
不离也不弃
怎么突然之间和我
断了联系
我怕的不是夜
是怕黑夜没有你
我喝的不是酒
是你给我的回忆
你离开我的世界
一去无归期
从牵手到陌路
竟是如此无语
☆谢谢欣赏☆
</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>


亚伦影音工作室 发表于 2024-7-3 17:53

本帖最后由 亚伦影音工作室 于 2024-7-3 18:55 编辑

attach://45715.rar

attach://45716.rar
attach://45717.rar




红影 发表于 2024-7-3 18:44

这个漂亮，还以为动态是视频，原来是动图加上颜色变化，这个设计巧妙{:4_199:}

红影 发表于 2024-7-3 18:48

欣赏亚伦老师好帖{:4_187:}

梦油 发表于 2024-7-3 21:00

亚伦影音工作室 发表于 2024-7-3 17:53
attach://45715.rar

attach://45716.rar


欣赏佳作，问候亚伦。
页: [1]
查看完整版本: 弹吉他 播放器 《酒儿 - 我怕的不是夜 (DJ彭锐版)》本论坛js封装