仿作一帖（画面、字体大小自适应）
<style type="text/css">
@import "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css";
@import "http://cesholl.cn3v.work/sstyle/lrcPlayerX.min.css";
.wddiv {
position: relative;
width:80vw; height:60vw; margin:80px 16px 80px -100px; overflow: hidden;
background:url(https://z3.ax1x.com/2021/08/26/hujGMd.gif)85% 5% no-repeat,url(https://s1.ax1x.com/2022/08/27/vW9dOK.jpg)0 0/100% 100%;
border:#d0d0d0 15px groove;
}
#img1{
box-shadow: 0px 0px 0px 2px #bebebe;
width:75%; height:75%;
position: absolute;top:5%; left:12.5%;
border-radius:10%;overflow:hidden;
}
.mCtrl {width:20px;height:20px;}
.lrcShow ul li.active{ font-size:5vw;margin-top:16px;}
</style>
<!--中画网left:0px; 老网left:-200px; -->
<div style="position:relative;width:1000px; height:800px; top:0px;left:0px;" >
<div class="wddiv" >
<img src="https://s4.ax1x.com/2022/02/21/HjQUW4.jpg" id="img1" class='animate__slower animate__animated '/>
<divclass="lrcShow twinkle" id='sLRC'></div>
<divid="mDisk" class='mCtrl'></div>
</div></div>
<script src="http://cesholl.cn3v.work/scripts/lrcPlayerX.min.js" type="text/javascript">
</script>
<script type="text/javascript">
var imgs=[
"https://s4.ax1x.com/2022/02/20/HLE3X4.jpg","https://s4.ax1x.com/2022/02/20/HLE3X4.jpg",
"https://s4.ax1x.com/2022/02/20/HLE1cF.jpg","https://s4.ax1x.com/2022/02/20/HLE1cF.jpg",
"https://s4.ax1x.com/2022/02/20/HLEl1U.jpg","https://s4.ax1x.com/2022/02/20/HLEl1U.jpg",
"https://s4.ax1x.com/2022/02/20/HLEQpT.jpg","https://s4.ax1x.com/2022/02/20/HLEQpT.jpg",
"https://s4.ax1x.com/2022/02/20/HLEKhV.jpg","https://s4.ax1x.com/2022/02/20/HLEKhV.jpg",
"https://s4.ax1x.com/2022/02/20/HLEut0.jpg","https://s4.ax1x.com/2022/02/20/HLEut0.jpg",
"https://s4.ax1x.com/2022/02/20/HLEnkq.jpg","https://s4.ax1x.com/2022/02/20/HLEnkq.jpg",
"https://s4.ax1x.com/2022/02/20/HLEe7n.jpg","https://s4.ax1x.com/2022/02/20/HLEe7n.jpg",
"https://s4.ax1x.com/2022/02/20/HLEZ0s.jpg","https://s4.ax1x.com/2022/02/20/HLEZ0s.jpg",
"https://s4.ax1x.com/2022/02/20/HLEVmj.jpg","https://s4.ax1x.com/2022/02/20/HLEVmj.jpg",
"https://s4.ax1x.com/2022/02/20/HLEAXQ.jpg","https://s4.ax1x.com/2022/02/20/HLEAXQ.jpg",
"https://s4.ax1x.com/2022/02/20/HLEk6g.jpg","https://s4.ax1x.com/2022/02/20/HLEk6g.jpg",
"https://s4.ax1x.com/2022/02/20/HLEF1S.jpg","https://s4.ax1x.com/2022/02/20/HLEF1S.jpg",
"https://s4.ax1x.com/2022/02/19/HqB3Sf.jpg","https://s4.ax1x.com/2022/02/19/HqB3Sf.jpg",
"https://s4.ax1x.com/2022/02/19/HqBlfP.jpg","https://s4.ax1x.com/2022/02/19/HqBlfP.jpg",
"https://s4.ax1x.com/2022/02/19/HqBQYt.jpg","https://s4.ax1x.com/2022/02/19/HqBQYt.jpg",
"https://s4.ax1x.com/2022/02/19/HqBMFI.jpg","https://s4.ax1x.com/2022/02/19/HqBMFI.jpg",
"https://s4.ax1x.com/2022/02/19/HqBuTA.jpg","https://s4.ax1x.com/2022/02/19/HqBuTA.jpg",
"https://s4.ax1x.com/2022/02/19/HqBnwd.jpg","https://s4.ax1x.com/2022/02/19/HqBnwd.jpg",
"https://s4.ax1x.com/2022/02/19/HqBmeH.jpg","https://s4.ax1x.com/2022/02/19/HqBmeH.jpg",
"https://s4.ax1x.com/2022/02/19/HqBZOe.jpg","https://s4.ax1x.com/2022/02/19/HqBZOe.jpg",
"https://s4.ax1x.com/2022/02/19/HqBVyD.jpg","https://s4.ax1x.com/2022/02/19/HqBVyD.jpg",
"https://s4.ax1x.com/2022/02/19/HqBASK.jpg","https://s4.ax1x.com/2022/02/19/HqBASK.jpg",
"https://s4.ax1x.com/2022/02/19/HqBFW6.jpg","https://s4.ax1x.com/2022/02/19/HqBFW6.jpg",
"https://s4.ax1x.com/2022/02/19/HqBiJx.jpg","https://s4.ax1x.com/2022/02/19/HqBiJx.jpg",
"https://s4.ax1x.com/2022/02/19/HqBPF1.jpg","https://s4.ax1x.com/2022/02/19/HqBPF1.jpg",
"https://s4.ax1x.com/2022/02/19/HqB9oR.jpg","https://s4.ax1x.com/2022/02/19/HqB9oR.jpg",
"https://s4.ax1x.com/2022/02/19/HqBpw9.jpg","https://s4.ax1x.com/2022/02/19/HqBpw9.jpg",
"https://s4.ax1x.com/2022/02/19/HqBSeJ.jpg","https://s4.ax1x.com/2022/02/19/HqBSeJ.jpg",
"https://s4.ax1x.com/2022/02/19/Hq0xL4.jpg","https://s4.ax1x.com/2022/02/19/Hq0xL4.jpg",
"https://s4.ax1x.com/2022/02/19/Hq0vyF.jpg","https://s4.ax1x.com/2022/02/19/Hq0vyF.jpg",
"https://s4.ax1x.com/2022/02/19/Hq0jQU.jpg","https://s4.ax1x.com/2022/02/19/Hq0jQU.jpg",
"https://s4.ax1x.com/2022/02/19/Hq0OzT.jpg","https://s4.ax1x.com/2022/02/19/Hq0OzT.jpg",
"https://s4.ax1x.com/2022/02/19/Hq0LWV.jpg","https://s4.ax1x.com/2022/02/19/Hq0LWV.jpg",
"https://s4.ax1x.com/2022/02/19/Hq0qJ0.jpg","https://s4.ax1x.com/2022/02/19/Hq0qJ0.jpg",
"https://s4.ax1x.com/2022/02/19/Hq0biq.jpg","https://s4.ax1x.com/2022/02/19/Hq0biq.jpg",
"https://s4.ax1x.com/2022/02/19/Hq07on.jpg","https://s4.ax1x.com/2022/02/19/Hq07on.jpg",
"https://s4.ax1x.com/2022/02/19/Hq0Tds.jpg","https://s4.ax1x.com/2022/02/19/Hq0Tds.jpg",
"https://s4.ax1x.com/2022/02/19/Hq0oZj.jpg","https://s4.ax1x.com/2022/02/19/Hq0oZj.jpg",
"https://s4.ax1x.com/2022/02/19/Hq05LQ.jpg","https://s4.ax1x.com/2022/02/19/Hq05LQ.jpg",
"https://s4.ax1x.com/2022/02/19/Hq04sg.jpg","https://s4.ax1x.com/2022/02/19/Hq04sg.jpg",
"https://z3.ax1x.com/2021/08/29/h88Uyt.jpg","https://z3.ax1x.com/2021/08/29/h88Uyt.jpg",
"https://z3.ax1x.com/2021/08/29/h88NQI.jpg","https://z3.ax1x.com/2021/08/29/h88NQI.jpg",
"https://z3.ax1x.com/2021/08/29/h88tSA.jpg","https://z3.ax1x.com/2021/08/29/h88tSA.jpg",
"https://z3.ax1x.com/2021/08/29/h88JWd.jpg","https://z3.ax1x.com/2021/08/29/h88JWd.jpg",
"https://s4.ax1x.com/2022/02/21/HjQUW4.jpg","https://s4.ax1x.com/2022/02/21/HjQUW4.jpg",
"https://s4.ax1x.com/2022/02/21/HjQsw6.jpg","https://s4.ax1x.com/2022/02/21/HjQsw6.jpg",
"https://s4.ax1x.com/2022/02/21/HjQrex.jpg","https://s4.ax1x.com/2022/02/21/HjQrex.jpg",
"https://s4.ax1x.com/2022/02/21/HjQBO1.jpg","https://s4.ax1x.com/2022/02/21/HjQBO1.jpg",
"https://s4.ax1x.com/2022/02/21/HjQ0yR.jpg","https://s4.ax1x.com/2022/02/21/HjQ0yR.jpg",
"https://s4.ax1x.com/2022/02/21/HjQwl9.jpg","https://s4.ax1x.com/2022/02/21/HjQwl9.jpg",
"https://s4.ax1x.com/2022/02/21/HjQdSJ.jpg","https://s4.ax1x.com/2022/02/21/HjQdSJ.jpg",
"https://s4.ax1x.com/2022/02/21/HjQNYF.jpg","https://s4.ax1x.com/2022/02/21/HjQNYF.jpg",
"https://s4.ax1x.com/2022/02/21/HjQtFU.jpg","https://s4.ax1x.com/2022/02/21/HjQtFU.jpg",
"https://s4.ax1x.com/2022/02/21/HjQJoT.jpg","https://s4.ax1x.com/2022/02/21/HjQJoT.jpg",
"https://s4.ax1x.com/2022/02/21/HjQGwV.jpg","https://s4.ax1x.com/2022/02/21/HjQGwV.jpg",
"https://s4.ax1x.com/2022/02/21/HjQ8e0.jpg","https://s4.ax1x.com/2022/02/21/HjQ8e0.jpg",
"https://s4.ax1x.com/2022/02/21/HjQ1Lq.jpg","https://s4.ax1x.com/2022/02/21/HjQ1Lq.jpg",
"https://s4.ax1x.com/2022/02/21/HjQlyn.jpg","https://s4.ax1x.com/2022/02/21/HjQlyn.jpg",
"https://s4.ax1x.com/2022/02/20/HLEf9f.jpg","https://s4.ax1x.com/2022/02/20/HLEf9f.jpg",
"https://s4.ax1x.com/2022/02/20/HLE2Nt.jpg","https://s4.ax1x.com/2022/02/20/HLE2Nt.jpg",
"https://s4.ax1x.com/2022/02/20/HLEgAI.jpg","https://s4.ax1x.com/2022/02/20/HLEgAI.jpg",
"https://s4.ax1x.com/2022/02/20/HLE6HA.jpg","https://s4.ax1x.com/2022/02/20/HLE6HA.jpg",
"https://s4.ax1x.com/2022/02/20/HLEyBd.jpg","https://s4.ax1x.com/2022/02/20/HLEyBd.jpg",
"https://s4.ax1x.com/2022/02/20/HLEsnH.jpg","https://s4.ax1x.com/2022/02/20/HLEsnH.jpg",
"https://s4.ax1x.com/2022/02/20/HLEDje.jpg","https://s4.ax1x.com/2022/02/20/HLEDje.jpg",
"https://s4.ax1x.com/2022/02/20/HLEBcD.jpg","https://s4.ax1x.com/2022/02/20/HLEBcD.jpg",
"https://s4.ax1x.com/2022/02/20/HLE01O.jpg","https://s4.ax1x.com/2022/02/20/HLE01O.jpg",
"https://s4.ax1x.com/2022/02/20/HLEw9K.jpg","https://s4.ax1x.com/2022/02/20/HLEw9K.jpg",
"https://s4.ax1x.com/2022/02/20/HLEah6.jpg","https://s4.ax1x.com/2022/02/20/HLEah6.jpg",
"https://s4.ax1x.com/2022/02/20/HLENA1.jpg","https://s4.ax1x.com/2022/02/20/HLENA1.jpg",
"https://s4.ax1x.com/2022/02/20/HLEY7R.jpg","https://s4.ax1x.com/2022/02/20/HLEY7R.jpg",
"https://s4.ax1x.com/2022/02/20/HLEJB9.jpg","https://s4.ax1x.com/2022/02/20/HLEJB9.jpg",
"https://s4.ax1x.com/2022/02/20/HLEGnJ.jpg","https://s4.ax1x.com/2022/02/20/HLEGnJ.jpg",
"https://z3.ax1x.com/2021/08/29/h88GJH.jpg","https://z3.ax1x.com/2021/08/29/h88GJH.jpg"];
var dhlm= ["bounce","flash","pulse","rubberBand","shakeX","shakeY","headShake","swing","tada","wobble","jello","heartBeat","backInDown","backInLeft","backInRight","backInUp","backOutDown","backOutLeft","backOutRight","backOutUp","bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp","bounceOut","bounceOutDown","bounceOutLeft","bounceOutRight","bounceOutUp","fadeIn","fadeInDown","fadeInDownBig","fadeInLeft","fadeInLeftBig","fadeInRight","fadeInRightBig","fadeInUp","fadeInUpBig","fadeInTopLeft","fadeInTopRight","fadeInBottomLeft","fadeInBottomRight","fadeOut","fadeOutDown","fadeOutDownBig","fadeOutLeft","fadeOutLeftBig","fadeOutRight","fadeOutRightBig","fadeOutUp","fadeOutUpBig","fadeOutTopLeft","fadeOutTopRight","fadeOutBottomRight","fadeOutBottomLeft","flip","flipInX","flipInY","flipOutX","flipOutY","lightSpeedInRight","lightSpeedInLeft","lightSpeedOutRight","lightSpeedOutLeft","rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft","rotateInUpRight","rotateOut","rotateOutDownLeft","rotateOutDownRight","rotateOutUpLeft","rotateOutUpRight","hinge","jackInTheBox","rollIn","rollOut","zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp","zoomOut","zoomOutDown","zoomOutLeft","zoomOutRight","zoomOutUp","slideInDown","slideInLeft","slideInRight","slideInUp","slideOutDown","slideOutLeft","slideOutRight","slideOutUp"];
var aniClassNames = 'animate__slower animate__animated animate__';
var aniImg = document.getElementById('img1');
function aniEventHandle() {
let imgIdx = parseInt(Math.random() * imgs.length);
let aniIdx = parseInt(Math.random() * dhlm.length);
//console.log(imgIdx + " : " +aniIdx);
aniImg.src = imgs;
aniImg.className = aniClassNames+dhlm;
}
function aniAct() {
aniImg.src = imgs;
aniImg.classList.add('animate__'+dhlm);
//aniImg.addEventListener('animationend', aniEventHandle);
setInterval(aniEventHandle, 3000);
}
var lrc = `
请您欣赏《盛开的牡丹》
作词：李海鹰 李克
作曲：李海鹰
演唱：宋祖英
LRC字幕：寒冬残荷
幽幽清香飘过我的家
疑是天上飞雨花
谁能听清风儿在说话
多少人间故事留下
天香出自寻常的人家
花开时节满天下
轻轻闭上双眼
深深地祝愿
醉人芬芳飘天涯
山水同绘一幅画
你是盛开的牡丹
回眸一笑不觉惊动天下
你用天地间最美的生命
点点温暖万户千家
你是盛开的牡丹
国色天香只为滋润天下
你用一万年最深的牵挂
遍洒芬芳同醉天涯
幽幽清香飘过我的家
疑是天上飞雨花
谁能听清风儿在说话
多少人间故事留下
天香出自寻常的人家
花开时节满天下
轻轻闭上双眼
深深地祝愿
醉人芬芳飘天涯
山水同绘一幅画
你是盛开的牡丹
回眸一笑不觉惊动天下
你用天地间最美的生命
点点温暖万户千家
你是盛开的牡丹
国色天香只为滋润天下
你用一万年最深的牵挂
遍洒芬芳同醉天涯
遍洒芬芳同-醉-天-涯
`;
var opts = {
lrcTxt:lrc,
lrcShowID:'sLRC',
audioCtrl:'mDisk',
audioURL:'http://url.amp3a.com/kuwo.php/454828.mp3'
};
new lrcPlayerX(opts);aniAct();
</script>