月光下的美人鱼
本帖最后由 起个网名好难 于 2024-7-28 08:33 编辑 <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 {
--w:1440px;--h:810px;
--state:running;
width:var(--w);height:var(--h);
position:relative;margin:80px 0 40px calc(50% - 0.5 * var(--w) - 81px);
overflow:hidden;
border-radius:32px;
box-shadow:4px 4px 10px black;
pointer-events: none;
}
#oBlk::after {
position: absolute;
content: '';
bottom: 10px;right:10%;
width: 50px;
height: 50px;
background: repeating-conic-gradient(red 12%, green 24%, yellow 36%);
box-shadow: inset 0 0 10px red;
border-radius: 50%;
cursor: pointer;
pointer-events: auto;
animation: rot 4s linear infinite var(--state);
z-index:66;
}
#vid {width:110%;position:absolute;left:0px;bottom:0px;z-index:1;}
#aniImg{
width:600px; height:800px;
position:absolute; top:5px; left:420px; animation-duration: 8s;
overflow:hidden;border-radius:24px;z-index:99;
-webkit-mask-image: radial-gradient(black 40%, 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: 8px;
/* 高度 */
background: pink;
/* 背景颜色 */
outline: none;
/* 去掉轮廓线 */
opacity: 0.5;
/* 透明度 */
-webkit-transition: .2s;
/* 过渡动画 */
transition: opacity .2s;
/* */
border-radius:5px;
position:absolute; left:20%; bottom:16px;
z-index:100;
}
.slider:hover {
opacity: 1;
/* 悬停时不透明 */
}
/* 滑块样式 */
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
/* 覆盖默认外观 */
appearance: none;
width: 12px;
/* 滑块宽度 */
height: 12px;
/* 滑块高度 */
background: #4CAF50;
/* 滑块颜色 */
cursor: pointer;
/* 鼠标样式变为指针 */
border-radius:50%;
}
.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/2421007/00/01/58/5b46943c40746.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">
</div>
<script>
var imgs=[
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7Sstibwqj1fybCBkqL36sTH0rCH1ZJhC5meOTLv82ELrNEaiadcjO7yYB1xice0LAgXMVY1mKHmaXeyA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7Sstibwqj1fybCBkqL36sTH0YdAouR3andy5ZF613NwlmbXibqNmib5HUEjfeklBJxgOzyePgad4lGlA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7Sstibwqj1fybCBkqL36sTH0iaKIria80nialBPZRLf2JDkIcLObibmRLXRUW0g0Wjic2S0LQ0IxS7xC7Bw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7Sstibwqj1fybCBkqL36sTH0q1h4DJhkzObiaRtsA4khjIenNdFA7LBJGAyndDqvHRJNvFsOpvtmgNw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7Sstibwqj1fybCBkqL36sTH0UHPaKC0THvN8kTg0fFw5ohoSvT2CgjUbuAcddYYbiaC4Mic5bRQeichtQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7Sstibwqj1fybCBkqL36sTH0ZgDzwib8yqJttibtVPyHATyN6BghGYpYmC899kICrbF6myETpP66EhuA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7Sstibwqj1fybCBkqL36sTH0OMz6MMuHic4iaiaIQ6gLbSYwc8U61cgApAxq2nz0hotxZs4mzQ2aDicUVQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7Sstibwqj1fybCBkqL36sTH0qwbaswMQYjJT9DZHWiaib3tmme7qTmyzHibRgqqb96qRIDMyNqAOMB4Ig/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7Sstibwqj1fybCBkqL36sTH0uqwu9nq09ZqKN7SEO34icNrzlw4yZap4Bq6X7iaA89LJyMWJM0mv3BmQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7Sstibwqj1fybCBkqL36sTH0ibOozyxu09kXb2UtibNekvXg7Ht7tOicib5kJgSyAzYQBZSu0W0LQaic2jg/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7Sstibwqj1fybCBkqL36sTH0Nl5QGW0MFh4qVRtRKHc4Ar8icgiaicWYmmTAicMQichy1IqNvUxm6DZiaJnQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7Sstibwqj1fybCBkqL36sTH0CMO151uuTLrmgIbzf5v1qfpS8XUGd1sN07UY5eT9u9GkO49bznyPWw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7Sstibwqj1fybCBkqL36sTH00Cy4MZumWMYg1zBibxI7DdWDIg1P0eDZxRLPRQCJIqo4e8xF9nBLvsQ/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7Sstibwqj1fybCBkqL36sTH0a8Jx07AiajXclCwD1iaDmvib77UByOfL92Nc9HuViaofBwp1B1BlbqZIXw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7Sstibwqj1fybCBkqL36sTH0QqTEaktdSZqskRkoMgOibeSBY7kTeiay3wuIjYhTyNziciaibzo5eic2axCA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7Sstibwqj1fybCBkqL36sTH0OtqOBUbxOSWIzYrB0ibl5QTsicibajEZOUc1NypIN1EPhGM4183icOC9ibw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7Sstibwqj1fybCBkqL36sTH0p6gz7XHWawJqa4BZE9tKouuxjYXXlqFTaq210lDyF1NvAlicia1c0bAw/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7Sstibwqj1fybCBkqL36sTH0zibkB5KvKLqibE8EOKiaPicr1LpXOibUXLguVSQG5ibn8eUrlSrmmvdGCoRA/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7Sstibwqj1fybCBkqL36sTH0CiaTu5N9j4C2usicj1poG5MC6uGBfErouPfRUxXqDCKdhgR0NYF8Aw8w/640",
"https://mmbiz.qpic.cn/sz_mmbiz_jpg/58MYy3nfd7Sstibwqj1fybCBkqL36sTH0gsGgJYfj9CNPHxdJrBc2CibscdaLhpasrXQtHWntwvjiaB2EibjuEkw0g/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;}('G S=o(){B 4.U.1l(4,1i)};S.1j={1k:S,U:o(P){z=P.T.H(/(^\\s*)|(\\s*$)/g,\'\');4.6=y.R(\'.1f\');4.i=y.R(\'.1g\');4.E=y.R(\'.E\');4.7=4.14(z);4.15(P.1h);4.A=p},14:o(z){G q=z.H(/(^\\s*)|(\\s*$)/g,"").10(/\\r|\\n|\\r\\n/);G 9=1p 1q();D(12 l=0;l<q.h;l++){12 w=q.1r(/\\[\\d{1,2}:\\d{2}.\\d{1,3}\\]|\\[\\d{1,2}:\\d{2}\\]/g);f(w){J=q.1m(\']\');f(J>0)T=q.Z(J+1);D(m=0;m<w.h;m++){I=w.Z(1).H(\']\',\'\').10(/:/);L=(+I)*1n+(+I);f(9.h==0&&L!=0){9.V({8:0,M:\'\\1o\\Y\\Y\\1e\\1a\\1c\\1d\'})}9.V({8:+L.C(2),M:T})}}}9.1b(o(a,b){B(a.8-b.8)});D(k=0;k<9.h-1;k++){9.Q=+(9.8-9.8).C(2)}B 9},17:o(F){4.6.13=4.6.1W.1V=4.7.M;4.6.j.t(\'--1K\',\'1P\'+(4.c%2));4.6.j.t(\'--F\',F+\'s\');4.6.j.t(\'--K\',\'W\');4.c++},15:o(X){4.5=y.1Q("16");4.5.1N=p;4.5.1T=p;4.5.1L=18;4.5.1M=X;4.6.1U(4.5);4.c=0;4.5.e(\'1R\',()=>{4.c=0;4.5.u()});4.5.e(\'1S\',()=>{4.7.Q=+(4.5.O-4.7.8).C(2)});4.5.e(\'u\',()=>{4.6.j.t(\'--K\',\'W\')});4.5.e(\'19\',()=>{f(4.c==1&&4.5.v<1){4.5.u();B p}4.6.j.t(\'--K\',\'11\')});4.5.e(\'1J\',()=>{1x.1w("16 1z, 1O u 1t 1s");4.6.j.1v=\'1u\';4.6.1A(4)});4.5.e(\'1G\',()=>{f(!4.A){4.i.N=4.5.v/4.5.O*1F;4.E.13=4.i.N+\'%\'}f(4.c<4.7.h){f(4.5.v>=4.7.8){4.17(4.7.Q)}}});4.6.e(\'1I\',()=>{f(4.5.11){4.5.u()}1H{4.5.19()}});4.i.e(\'1C\',()=>4.A=18);4.i.e(\'1B\',()=>4.A=p);4.i.e(\'1E\',()=>{x=(4.i.N/4.i.1D*4.5.O).C(2);D(n=0;n<4.7.h-1;n++){f(x>=4.7.8&&x<4.7.8){4.5.v=x;4.c=n;1y}}})}}',62,121,'||||this|mObj|lrcShowObj|lrcVec|seconds|lrcs|||idx||addEventListener|if||length|indicator|style||index|||function|false|parts|||setProperty|play|currentTime|chkTime|seekTime|document|lyricTxt|mseek|return|toFixed|for|progMeter|durTime|var|replace|ta|tIdx|aniPlayState|_0|words|value|duration|opts|dur|querySelector|lrcPlayerY|lrcTxt|init|push|running|mUrl|u0020|substr|split|paused|let|innerHTML|handleLrc|genPlayer|audio|showLrc|true|pause|u66fe|sort|u5e74|u8f7b|u4e5f|lrcShow|slider|audioURL|arguments|prototype|constructor|apply|lastIndexOf|60|u00A9|new|Array|match|event|start|none|display|log|console|break|wrong|removeChild|mouseup|mousedown|max|change|100|timeupdate|else|click|error|aniName|autoplay|src|loop|remove|bgMove|createElement|ended|canplay|muted|appendChild|lrc|dataset'.split('|'),0,{}))
{
let lrctxt = `
美人鱼 - 林俊杰
我在沙滩划个圆圈
属于我俩安逸世界
不用和别人连线
我不管你来自深渊
也不在乎身上鳞片
爱情能超越一切
只要你在我身边
所有蜚语流言 完全视而不见
请不要匆匆一面
一转身就沉入海平线
传说中你为爱甘心被搁浅
我也可以为你
潜入海里面
怎么忍心断绝
忘记我不变的誓言
我眼泪断了线
现实里有了我对你的眷恋
我愿意化作雕像
等你出现
再见再也不见
心碎了飘荡在海边
你抬头就看见
我在沙滩划个圆圈
属于我俩安逸世界
不用和别人连线
我不管你来自深渊
也不在乎身上鳞片
爱情能超越一切
只要你在我身边
所有蜚语流言 完全视而不见
请不要匆匆一面
一转身就沉入海平线
传说中你为爱甘心被搁浅
我也可以为你
潜入海里面
怎么忍心断绝
忘记我不变的誓言
我眼泪断了线
现实里有了我对你的眷恋
我愿意化作雕像
等你出现
再见再也不见
心碎了飘荡在海边
你抬头就看见
传说中你为爱甘心被搁浅
我也可以为你
潜入海里面
怎么忍心断绝
忘记我不变的誓言
我眼泪断了线
现实里有了我对你的眷恋
我愿意化作雕像
等你出现
再见再也不见
心碎了飘荡在海边
你抬头就看见
你 你抬头就看见
你 你抬头就看见
`;
let opts = {
lrcTxt:lrctxt,
audioURL:"https://file.uhsea.com/2406/dff6a84e0829cd40b474ca5ad0a32f88YK.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'));
}
oBlk.onclick = () => rState(player.mObj.paused);
}
</script>
梦江南 发表于 2024-7-27 11:37
电脑上看只看见大海，不完整。
我也是看不完整 这海水里轮番出现的美人鱼好清凉啊，这样的大夏天看看这样的帖子真凉爽。{:4_173:} 海里都美人鱼漂亮，难难的制作也漂亮。
欣赏难难精美好帖{:4_199:} 不知为什么，老师的作品只能在手机上看。 红影 发表于 2024-7-27 10:21
这海水里轮番出现的美人鱼好清凉啊，这样的大夏天看看这样的帖子真凉爽。
望梅（海）止（清）渴（凉）{:5_117:} 红影 发表于 2024-7-27 10:23
海里都美人鱼漂亮，难难的制作也漂亮。
欣赏难难精美好帖
谢谢支持欣赏！ 梦江南 发表于 2024-7-27 10:28
不知为什么，老师的作品只能在手机上看。
不会吧，电脑上做的还没试过手机上是什么效果。 起个网名好难 发表于 2024-7-27 11:33
不会吧，电脑上做的还没试过手机上是什么效果。
电脑上看只看见大海，不完整。 醉美水芙蓉 发表于 2024-7-27 11:36
老师这个播放器真漂亮！收藏了！
谢谢支持欣赏, 中午好！ 梦江南 发表于 2024-7-27 11:37
电脑上看只看见大海，不完整。
什么浏览器啊，系统（win 10）自带的Edge就蛮好的。 欣赏老师佳作！ 起个网名好难 发表于 2024-7-27 11:58
什么浏览器啊，系统（win 10）自带的Edge就蛮好的。
2345浏览器. 走过岁月 发表于 2024-7-27 13:28
我也是看不完整
真奇怪,就是个很普通的帖子没什么奇巧的东西。
我电脑上三个浏览器（edge、Chrome和firefox）都正常的。 海笑 发表于 2024-7-27 13:45
欣赏老师佳作！
谢谢支持欣赏，下午好！ 梦江南 发表于 2024-7-27 14:23
2345浏览器.
不敢试用2345, 安上就不好卸载了。
系统自带的浏览器就很好不会附带安装一些杂七杂八的软件。 起个网名好难 发表于 2024-7-27 14:32
不敢试用2345, 安上就不好卸载了。
系统自带的浏览器就很好不会附带安装一些杂七杂八的软件。
一直就是用2345的。 梦江南 发表于 2024-7-27 14:37
一直就是用2345的。
不应该啊， 是不是浏览器不是最新版（没升级） 起个网名好难 发表于 2024-7-27 11:31
望梅（海）止（清）渴（凉）
真正的透心凉呢，而且还有美女养眼{:4_173:}