中秋快乐
本帖最后由 起个网名好难 于 2024-9-16 15:05 编辑 <br /><br /><meta name="referrer" content="never" /><style>
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');
#oBlk {width:1280px;height:720px;overflow:hidden;box-shadow:4px 4px 10px black; border-radius:24px;margin:32px 0 40px calc(50% - 721px);position:relative;pointer-events: none;}
#playBtn {
position: absolute;
bottom: 10px;right:10%;
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
pointer-events: auto;
animation: rot 4s linear infinite var(--state);
}
#vid {position:absolute;left:0px;bottom:0px;width: 100%; height: 110%; object-fit: cover;}
#aniImg{
width:640px; height:720px;
position:absolute; top:5px; left:420px; animation-duration: 8s;
overflow:hidden;border-radius:24px;z-index:99;
-webkit-mask-image: radial-gradient(black 50%, transparent 75%);
-webkit-mask-size: cover;
}
.lrcShow{pointer-events: none; font:normal 32px sans-serif;position:absolute;top:20px;left:30%;color:transparent;filter:drop-shadow(1px 1px 1px white);letter-spacing:2px;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;cursor:pointer;z-index:99;}
.lrcShow::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color:transparent;background-image:linear-gradient(45deg,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,90%));-webkit-background-clip:text;overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}
/*----------------------------------------------------------------------------------------*/
.slider {
-webkit-appearance: none;
/* 覆盖默认外观 */
width: 60%;
/* 宽度 */
height: 2px;
/* 高度 */
background: pink;
/* 背景颜色 */
outline: none;
/* 去掉轮廓线 */
opacity: 0.8;
/* 透明度 */
-webkit-transition: .2s;
/* 过渡动画 */
transition: opacity .2s;
/* */
border-radius:5px;
position:absolute; left:20%; bottom:16px;
z-index:100;pointer-events: auto;
}
.slider: hover {
opacity: 1;
/* 悬停时不透明 */
}
/* 滑块样式 */
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
/* 覆盖默认外观 */
appearance: none;
width: 0px;
/* 滑块宽度 */
height: 0px;
/* 滑块高度 */
background: transparent;;
/* 滑块颜色 */
cursor: pointer;
/* 鼠标样式变为指针 */
border: 6px solid transparent;
border-left: 15px solid #4CAF50;
/* 滑块为三角形 */
}
.progMeter {position:absolute; bottom:30px; left:50%;color:white;font-size:smaller;z-index:99;}
@keyframes rot {to { transform: rotate(1turn); }}
@keyframes bgMove1{from{width:0;}to{width:100%;}}
@keyframes bgMove0{from{width:0;}to{width:100%;}}
</style>
<div id="oBlk">
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/33/91/62f99e757c7fc.mp4" loop autoplay muted></video>
<img id="aniImg" class="animate__animated" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7Sstibwqj1fybCBkqL36sTH0q1h4DJhkzObiaRtsA4khjIenNdFA7LBJGAyndDqvHRJNvFsOpvtmgNw/640">
<div class="lrcShow" data-lrc="中秋快乐">中秋快乐</div>
<label class="progMeter">0%</label>
<input type="range" min="0" max="100" value="0" class="slider" id="myRange">
<img id="playBtn" src="https://pic4.zhimg.com/v2-a593fb4685432704e083effb5c723847_r.jpg" />
</div>
<script>
var imgs=[
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RwwWAtLzD4sibKpoVW7eEa1YE8UiaFpian6UXLNxyibt31ob0W1LEpMwyQOGs4tUnJicsfVNfn1f3CQ5A/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RwwWAtLzD4sibKpoVW7eEa1XqTJpr1c9Nb7uU9bvEPQnqVwpPLaGTicCkl32kgdkibLRveoLlq9CZjg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RwwWAtLzD4sibKpoVW7eEa165qeyibMBMMp5eqxQicd8Oib6NuNCbGoMNWeUFmoNv9Vj8Tib6vfXyRUJg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RwwWAtLzD4sibKpoVW7eEa1licibTbKvV9oVx2FZ3jR7WtLFkNH2pJWsicXibm55xZFOu4nCjKS5H2Abw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RwwWAtLzD4sibKpoVW7eEa1dwIXzomQEfctnzxRE4dicZ1J2aBaAsicxCu0VQcUjgj1ib3Kemd6j27mA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7RwwWAtLzD4sibKpoVW7eEa1N2Y2MDKuLAY2O9Hm8RzYfjKcxQ3vRubtgD9RibKv0LpI6Bd1055NkjA/640"
];
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 aniIdx = 0, imgIdx = 0;
(function() {
var aniImg = document.getElementById('aniImg');
aniImg.src = imgs;
aniImg.classList.add('animate__'+dhlm);
imgIdx++; imgIdx %= imgs.length;
aniImg.addEventListener('animationend', function () {
aniImg.src = imgs;
aniImg.className = 'animate__animated animate__'+dhlm;
imgIdx++; imgIdx %= imgs.length;
});
})();
//initAni();
//-----------------------------------------------------------------
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d=k||e(c);k=}];e=function(){return'\\w+'};c=1;};while(c--)if(k)p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k);return p;}('F L=j(){C 4.V.1j(4,1g)};L.1h={1i:L,V:j(R){u=R.P.E(/(^\\s*)|(\\s*$)/g,\'\');4.7=x.S(\'.1d\');4.i=x.S(\'.1e\');4.T=x.S(\'.T\');4.6=4.16(u);4.17(R.1f);4.v=q},16:j(u){F p=u.E(/(^\\s*)|(\\s*$)/g,"").W(/\\r|\\n|\\r\\n/);F 9=1n 1o();z(10 o=0;o<p.h;o++){10 A=p.1p(/\\[\\d{1,2}:\\d{2}.\\d{1,3}\\]|\\[\\d{1,2}:\\d{2}\\]/g);f(A){I=p.1k(\']\');f(I>0)P=p.Z(I+1);z(m=0;m<A.h;m++){J=A.Z(1).E(\']\',\'\').W(/:/);K=(+J)*1l+(+J);f(9.h==0&&K!=0){9.15({c:0,Q:\'\\1m\\X\\X\\1c\\1a\\1b\\19\'})}9.15({c:+K.B(2),Q:P})}}}9.18(j(a,b){C(a.c-b.c)});z(k=0;k<9.h-1;k++){9.O=+(9.c-9.c-1).B(2)}C 9},13:j(G){4.7.12=4.7.1U.1T=4.6.Q;4.7.l.t(\'--1I\',\'1N\'+(4.8%2));4.7.l.t(\'--G\',G+\'s\');4.7.l.t(\'--H\',\'Y\');4.8++},17:j(U){4.5=x.1O("11");4.5.1L=q;4.5.1R=q;4.5.1J=14;4.5.1K=U;4.7.1S(4.5);4.8=0;4.5.e(\'1P\',()=>{4.8=0;4.5.w()});4.5.e(\'1Q\',()=>{4.6.O=+(4.5.M-4.6.c).B(2)});4.5.e(\'w\',()=>{4.7.l.t(\'--H\',\'Y\')});4.5.e(\'1H\',()=>{f(4.8==1&&4.5.D<1){4.5.w();C q}4.7.l.t(\'--H\',\'1v\')});4.5.e(\'1u\',()=>{1x.1M("11 1r, 1q w 1t 1s");4.7.l.1y=\'1E\';4.7.1D(4)});4.5.e(\'1G\',()=>{f(!4.v){4.i.N=4.5.D/4.5.M*1F;4.T.12=4.i.N+\'%\'}f(4.8<4.6.h){f(4.5.D>=4.6.c){4.13(4.6.O)}}});4.i.e(\'1A\',()=>4.v=14);4.i.e(\'1z\',()=>4.v=q);4.i.e(\'1C\',()=>{y=(4.i.N/4.i.1B*4.5.M).B(2);z(n=0;n<4.6.h-1;n++){f(y>=4.6.c&&y<4.6.c){4.5.D=y;4.8=n;1w}}})}}',62,119,'||||this|mObj|lrcVec|lrcShowObj|idx|lrcs|||seconds||addEventListener|if||length|indicator|function||style|||index|parts|false|||setProperty|lyricTxt|mseek|play|document|seekTime|for|chkTime|toFixed|return|currentTime|replace|var|durTime|aniPlayState|tIdx|ta|_0|lrcPlayerY|duration|value|dur|lrcTxt|words|opts|querySelector|progMeter|mUrl|init|split|u0020|running|substr|let|audio|innerHTML|showLrc|true|push|handleLrc|genPlayer|sort|u8f7b|u66fe|u5e74|u4e5f|lrcShow|slider|audioURL|arguments|prototype|constructor|apply|lastIndexOf|60|u00A9|new|Array|match|remove|wrong|event|start|error|paused|break|console|display|mouseup|mousedown|max|change|removeChild|none|100|timeupdate|pause|aniName|autoplay|src|loop|log|bgMove|createElement|ended|canplay|muted|appendChild|lrc|dataset'.split('|'),0,{}))
{
let lrctxt = `
中秋快乐\n演唱：马抒羽\n艺术总监：冯净\n声乐指导：韦林\n月儿圆月儿圆\n月亮上面有神仙\n玉兔嫦娥住里边\n桂花树下荡秋千\n中秋时节能看见\n月儿圆月儿圆\n共赏月儿盼团圆\n月儿圆月儿圆\n月饼香香又甜甜\n月儿圆又圆\n月饼甜又甜\n中秋佳节大团圆大团圆\n\n
`;
let opts = {
lrcTxt:lrctxt,
audioURL:"https://music.163.com/song/media/outer/url?id=2069234658.mp3",
}
let player = new lrcPlayerY(opts);
let rState = (bool) => {
bool? (player.mObj.play(), vid.play(), aniImg.style.animationPlayState = 'running', oBlk.style.setProperty('--state', 'running')) :
(player.mObj.pause(), vid.pause(), aniImg.style.animationPlayState = 'paused', oBlk.style.setProperty('--state', 'paused'));
}
playBtn.onclick = () => rState(player.mObj.paused);
player.mObj.onpause = player.mObj.onplaying = () => rState(!player.mObj.paused);
}
</script>
{:4_199:} 本帖最后由 起个网名好难 于 2024-9-16 08:27 编辑
马黑黑 发表于 2024-9-16 08:08
https://cccimg.com/view.php/6a1acfd3b4d74a20d5526242c682e519.webp
https://p8.itc.cn/q_70/images03/20210921/740124a635d24f06be3879c58a41be1b.gif
祝老师中秋节快乐！{:4_199:} 梦江南 发表于 2024-9-16 08:19
祝老师中秋节快乐！
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif
https://p9.toutiaoimg.com/large/pgc-image/11b5b74a1a9249c18b1e92a125ea51c6
祝坛友们中秋节快乐！~~~ 愤怒的葡萄 发表于 2024-9-16 08:21
祝坛友们中秋节快乐！~~~
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif
https://5b0988e595225.cdn.sohucs.com/images/20180920/4870ff81b6294465b742da3882c0cc4c.gif
https://cccimg.com/view.php/f54703cc9065ba0f2d80b9cc22b814e9.gif
梦江南 发表于 2024-9-16 08:34
自制的图片？ 高！ 醉美水芙蓉 发表于 2024-9-16 08:38
祝老师中秋节快乐！
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif
https://p2.itc.cn/images01/20210921/5201ed03467a462db9510ad3cf066351.gif
漂亮的制作，满满的中秋祝福。
谢谢难难带来的美好祝福，借帖同祝大家中秋快乐{:4_187:}{:4_177:} 这帖子里不但主楼那么美好的祝福，跟帖也那么多美妙的祝福呢{:4_199:} 祝起个网名好难和朋友们中秋节快乐！ 红影 发表于 2024-9-16 08:58
漂亮的制作，满满的中秋祝福。
谢谢难难带来的美好祝福，借帖同祝大家中秋快乐
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif
https://p3.toutiaoimg.com/large/pgc-image/5481640106e8444c87845cf2a5fc2e90
红影 发表于 2024-9-16 09:00
这帖子里不但主楼那么美好的祝福，跟帖也那么多美妙的祝福呢
中秋快乐！
想花就花 圆圆满满 月月双薪 心情爆好 {:5_106:} 梦油 发表于 2024-9-16 09:24
祝起个网名好难和朋友们中秋节快乐！
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif
https://p9.itc.cn/q_70/images03/20201001/e930f0b8a368417da1ca6a39617a13b3.gif
https://img3.oldkids.cn/upload/2022/08/22/mb_0_20220822202322511.gif 非常开心 发表于 2024-9-16 10:38
https://img.bbs.cnhubei.com/forum/201211/16/093730sa902nsh6zryf6sg.gif
https://5b0988e595225.cdn.sohucs.com/images/20180922/db49ad81597b452484172dbd31746df5.gif
起个网名好难 发表于 2024-9-16 09:59
难难带来这么多好图呢，厉害{:4_187:}