倾一世温柔 暖一场遇见to小辣椒
本帖最后由 亚伦影音工作室 于 2026-5-11 12:46 编辑 <br /><br /> <style>#papa {
position: relative;
width: 1286px;
height: 680px;
background:linear-gradient(203deg, #ff0000 0%,rgba(285, 0, 0, 0) 0%),url(https://img3.oldkids.cn/upload/2026/04/28/photo_0_20260428161816674.png) no-repeat center/cover
box-shadow: 2px 2px 6px #000;
z-index: 1;
margin: 10px 0 48px calc(0% - 360px);
overflow: hidden;
border-radius: 0px;
}
#Player {
position: absolute;
cursor: pointer;
transition: 1.2s;
animation: rot 8s linear infinite var(--state);
z-index: 10;
}
#Player:nth-of-type(1) {
width: 110px;
height: 110px;
left: 820px;
bottom: 110px;
--deg: 1turn;
}
#Player:hover {
filter: hue-rotate(60deg) drop-shadow(0 0 28px #1b28d3);
--state: paused;
}
@keyframes rot {
to { transform: rotate(var(--deg)); }
}
.dancer {
position: absolute;
z-index: 1;
}
.lrcShow {
font: normal 24px sans-serif;
position: absolute;
bottom: 5%;
left: 68%;transform: translateX(-50%);
color: #00aa00;
letter-spacing: 2px;
--aniName: bgMove1;
--durTime: 100ms;
--aniPlayState: running;
cursor: pointer;
z-index: 999;
}
.lrcShow::before {
position: absolute;
content: attr(data-lrc);
width: 0;
height: 100%;
left: 0;
top: 0;
color: MintCream;
background-image: linear-gradient(60deg, hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(0,100%,50%));
-webkit-background-clip: text;
overflow: hidden;
white-space: nowrap;
animation: var(--aniName) var(--durTime) linear forwards;
animation-play-state: var(--aniPlayState);
}
@keyframes bgMove1 { from { width: 0; } to { width: 100%; } }
@keyframes bgMove0 { from { width: 0; } to { width: 100%; } }
</style>
</head>
<body>
<div id="papa">
<img id="Player" src="https://pic1.imgdb.cn/item/6741e1d8d29ded1a8c23713b.png" alt="" title="播放">
<img class="dancer" src="https://pic1.imgdb.cn/item/69e58edb01316fbabf2c80a0.gif" alt="" style="left: 0px; top: 0px; width:100%;">
<img class="dancer" src="https://pic1.imgdb.cn/item/645611730d2dde5777c30c2f.gif" alt="" style="left:60px; top: 300px;width:30%;">
<img class="dancer" src="https://pic1.imgdb.cn/item/6873547f58cb8da5c8a6e77a.gif" alt="" style="left:200px; top: 20px;width:40%;">
<img class="dancer robot" src="https://pic1.imgdb.cn/item/673887ffd29ded1a8caa9dd2.gif" alt="机器人" style="left:67%; top: 30px; width: 40%;">
<img class="dancer robot" src="https://pic1.imgdb.cn/item/673887ffd29ded1a8caa9dd2.gif" alt="机器人" style="left:0px; top: 30px; width: 40%;">
<img class="dancer " src="https://pic1.imgdb.cn/item/673887ffd29ded1a8caa9dd2.gif" alt="机器人" style="left:33%; top: 30px; width: 40%;">
<div class="lrcShow" data-lrc="风流浪的街道">风流浪的街道</div>
</div>
<script>
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;}('6(\'d\'n c.a(\'2\')){j.l.q=b(){6(1.7){1.7.h.p(1.7);1.7=o;1.3.i=\'\'}6(1.9){1.8=1.9}};j.l.m=b(){g 2=c.a(\'2\');g 4=1.4,5=1.5;6(4&5){6(!1.9){1.9=1.8}2.4=4;2.5=5;2.3.k=1.3.k;2.3.f=1.3.f;2.d(\'z\').y(1,0,0,4,5);x{1.8=2.A("B/t")}s(e){1.r(\'8\');2.3.w=\'v\';1.h.u(2,1);1.3.i=\'0\';1.7=2}}}}',38,38,'|this|canvas|style|width|height|if|storeCanvas|src|storeUrl|createElement|function|document|getContext||top|var|parentElement|opacity|HTMLImageElement|left|prototype|stop|in|null|removeChild|play|removeAttribute|catch|gif|insertBefore|absolute|position|try|drawImage|2d|toDataURL|image'.split('|'),0,{}));
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;}('t y=7(){w 4.T.1d(4,1f)};y.1r={1i:y,T:7(C){x=C.A.J(/(^\\s*)|(\\s*$)/g,\'\');4.8=O.1k(\'.1l\');4.e=4.Q(x);4.P(C.1g)},Q:7(x){t p=x.J(/(^\\s*)|(\\s*$)/g,"").V(/\\r|\\n|\\r\\n/);t 9=1p 1q();F(M l=0;l<p.j;l++){M v=p.1m(/\\[\\d{1,2}:\\d{2}.\\d{1,3}\\]|\\[\\d{1,2}:\\d{2}\\]/g);i(v){H=p.1n(\']\');i(H>0)A=p.U(H+1);F(m=0;m<v.j;m++){L=v.U(1).J(\']\',\'\').V(/:/);B=(+L)*1e+(+L);i(9.j==0&&B!=0){9.S({f:0,G:\'\\1a\\R\\R\\1K\\1L\\1J\\1F\'})}9.S({f:+B.D(2),G:A})}}}9.1H(7(a,b){w(a.f-b.f)});F(k=0;k<9.j-1;k++){9.K=+(9.f-9.f).D(2)}10.Z(9);w 9},X:7(E){4.8.1G=4.8.1M.1v=4.e.G;4.8.o.u(\'--1w\',\'1x\'+(4.c%2));4.8.o.u(\'--E\',E+\'s\');4.8.o.u(\'--I\',\'11\');4.c++},P:7(N){4.6=O.1u("12");4.6.1y=z;4.6.1C=z;4.6.1D=1E;4.6.1z=N;4.8.1B(4.6);t 5=4;t 1b=0;4.c=0;4.6.h(\'1A\',7(){5.c=0;4.q()});4.6.h(\'1t\',7(){5.e.K=+(4.1s-5.e.f).D(2);});4.6.h(\'q\',7(){5.8.o.u(\'--I\',\'11\')});4.6.h(\'13\',7(){i(5.c==1&&4.W<1){5.6.q();w z}5.8.o.u(\'--I\',\'Y\')});4.6.h(\'1I\',7(){10.Z("12 1c, 19 q 15 14");5.8.o.17=\'16\';5.8.18(4)});4.6.h(\'1o\',7(){i(5.c<5.e.j){i(4.W>=5.e.f){5.X(5.e.K)}}});4.8.h(\'1h\',7(){i(5.6.Y){5.6.q()}1j{5.6.13()}})}}',62,111,'||||this|that|mObj|function|lrcShowObj|lrcs|||idx||lrcVec|seconds||addEventListener|if|length||index|||style|parts|play|||var|setProperty|chkTime|return|lyricTxt|lrcPlayerY|false|lrcTxt|_0|opts|toFixed|durTime|for|words|tIdx|aniPlayState|replace|dur|ta|let|mUrl|document|genPlayer|handleLrc|u0020|push|init|substr|split|currentTime|showLrc|paused|log|console|running|audio|pause|event|start|none|display|removeChild|remove|u00A9|turn|wrong|apply|60|arguments|audioURL|click|constructor|else|querySelector|lrcShow|match|lastIndexOf|timeupdate|new|Array|prototype|duration|canplay|createElement|lrc|aniName|bgMove|loop|src|ended|appendChild|muted|autoplay|true|u8f7b|innerHTML|sort|error|u5e74|u4e5f|u66fe|dataset'.split('|'),0,{}));
let lrctxt = `
天籁天 - 倾一世温柔 暖一场遇见
作词：张灵茹
作曲：关剑
混音：王哲
演唱：天籁天
☆★Lrc编辑 梅竹★☆
☆★协编 蓝菊★☆
● ● ● ● ● ● ●
三千繁花衬托你的眉眼
给我一种绝尘的惊艳
我想我是为你忘了时间
年年岁岁回味这一面
脉脉温柔填满我的执念
不分昼夜都向你蔓延
有情如此怎可只是擦肩
朝朝暮暮期待着缠绵
倾一世温柔 暖一场遇见
红尘滚滚 和你相依相恋
哪怕风云流转 沧海桑田
不会减少一丝对你的喜欢
倾一世温柔 暖一场遇见
时光悠悠 同你繁华平淡
直到青丝飘雪 不再朱颜
依旧在我心上深情地流连
(Music)
脉脉温柔填满我的执念
不分昼夜都向你蔓延
有情如此怎可只是擦肩
朝朝暮暮期待着缠绵
倾一世温柔 暖一场遇见
红尘滚滚 和你相依相恋
哪怕风云流转 沧海桑田
不会减少一丝对你的喜欢
倾一世温柔 暖一场遇见
时光悠悠 同你繁华平淡
直到青丝飘雪 不再朱颜
依旧在我心上深情地流连
倾一世温柔 暖一场遇见
红尘滚滚 和你相依相恋
哪怕风云流转 沧海桑田
不会减少一丝对你的喜欢
倾一世温柔 暖一场遇见
时光悠悠 同你繁华平淡
直到青丝飘雪 不再朱颜
依旧在我心上深情地流连
依旧在我心上深情地流连
(Music)
☆★梅竹谢谢欣赏★☆
=End=
`;
let opts = {
lrcTxt: lrctxt,
audioURL: "https://static.oldkids.com.cn/upload/2026/04/22/blog_260848378_20260422145951591.mp3"
};
let yP = new lrcPlayerY(opts);
var dancers = document.querySelectorAll('.dancer');
var mState = () => {
papa.style.setProperty('--state', yP.mObj.paused ? 'paused' : 'running');
Player.title = yP.mObj.paused ? '播放' : '暂停';
dancers.forEach(dancer => yP.mObj.paused ? dancer.stop() : dancer.play());
};
Player.onclick = () => {
yP.mObj.paused ? (yP.mObj.play()) : (yP.mObj.pause());
};
yP.mObj.onplaying = yP.mObj.onpause = () => mState();
mState();
</script>
把沙发留给@小辣椒 ，亲爱的快来收礼{:4_187:} 制作漂亮，歌曲好听。欣赏亚伦老师好帖{:4_199:} 亚纶这个制作加了许多的小动图，赞的！
这个代码就是我一直在玩的动图一键停止的代码，这个代码非常强大，加多少动图都可以一键停止，也是你们认为只能一键停止第一帧的。你现在这个代码是我前段时间修改了一下加了一个特效代码。那是我做一个机器人的效果，但你现在把加的机器人特效代码去了，你现在的3个只是加了动图，机器人我是用的png，建议可以还原机器人的特效代码玩一次
谢谢亚纶的精彩制作~{:4_187:}
现在我套用自己加了机器人源码做了好几个一键停止了，包括逐帧一键停止我也是用这个效果。 你的动图小飞鸟可以缩小尺寸，还可以移动一下位置 红影 发表于 2026-4-30 15:07
把沙发留给@小辣椒 ，亲爱的快来收礼
谢谢亲爱的艾特，一起欣赏亚纶的精彩制作~~{:4_205:} 小辣椒 发表于 2026-4-30 21:56
谢谢亲爱的艾特，一起欣赏亚纶的精彩制作~~
和亲爱的一起欣赏亚伦美帖{:4_187:} 欣赏老师的制作，点赞！
页:
[1]