同玩岁月--莫等待音频效果 （套用黑黑大河之舞播放器效果）
<meta charset="utf-8" /><style>
#mydiv { margin: 140px 0 30px calc(50% - 721px); width: 1280px; height: 689px; background: url('https://v.djqq.net/tttdj/upfile/20240916155645.gif') center/cover; box-shadow: 03px 3px 6px #333; display: grid; place-items: center; position: relative; }
#svg1 { position: absolute; top: 10%; right: 12%; cursor: pointer; filter: hue-rotate(0deg) drop-shadow(0 0 1px black); transition: 1s; }
#svg1:hover { filter: hue-rotate(200deg) drop-shadow(0 0 4px black); }
#pic {width:100%;height:100%;position:absolute; left:0px;top:0px;}
</style>
<div id="mydiv">
<img id="pic" src="https://v.djqq.net/tttdj/upfile/20240916155645.gif" alt="" />
<audio id="aud" src="https://v.djqq.net/tttdj/upfile/20240916155723.mp3" autoplay loop></audio>
<svg id="svg1" width="100" height="100" viewBox="0 0 200 200" fill="none" stroke="white" stroke-width="6" stroke-dasharray="6 12 6"></svg>
</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(\'p\'z l.j(\'3\')){g.n.y=k(){6(2.b){2.b.q.x(2.b);2.b=A;2.5.s=\'\'}6(2.c){2.a=2.c}};g.n.w=k(){v 7=2.a.m(-4);6(7==\'.\')7=7.m(1);6(7==\'u\')7=\'B\';2.r=\'J/\'+7;o 3=l.j(\'3\');o 9=2.9,8=2.8;6(9&&8){6(!2.c){2.c=2.a}3.9=9;3.8=8;3.5.f=2.5.f;3.5.d=2.5.d;3.5.h=2.5.h;3.5.i=2.5.i;3.p(\'D\').F(2,0,0,9,8);G{2.a=3.E(2.r)}C(e){2.H(\'a\');3.5.K=\'I\';2.q.t(3,2);2.5.s=\'0\';2.b=3}}}}',47,47,'||this|canvas||style|if|suff|height|width|src|storeCanvas|storeUrl|left||top|HTMLImageElement|right|bottom|createElement|function|document|substr|prototype|var|getContext|parentElement|type|opacity|insertBefore|jpg|let|stop|removeChild|play|in|null|jpeg|catch|2d|toDataURL|drawImage|try|removeAttribute|absolute|image|position'.split('|'),0,{}))
var ww = mydiv.offsetWidth;
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sc.charset = 'utf-8';
document.body.appendChild(sc);
sc.onload = () => FS({papa: '#mydiv', css: 'bottom: 20px; --fsBg: #00000090; --color: #336699;'});
var observer = new ResizeObserver((elms) => {
var cr = elms.contentRect;
svg1.style.transform = `scale(${cr.width / ww * 1.2})`;
});
mState = () => aud.paused ? (tz.style.setProperty('--state', 'paused'), hsvg.pauseAnimations()) : (tz.style.setProperty('--state', 'running'), hsvg.unpauseAnimations());
drawCircles = (num) => {
let circlecode = '', anicode = '';
Array(num).fill(0).forEach((c,k) => {
c = k + 1;
let bstr = k > 0 ? `ani${k}.begin+${k * 3 / num}s` : '0s';
let color = `#${Math.random().toString(16).substring(2,8)}a0`;
circlecode += `<circle id="cc${c}" cx="100" cy="100" r="0" stroke="${color}" transform="rotate(${360 / num * k} 100 100)"></circle>`;
anicode += `<animate xlink:href="#cc${c}" attributeName="r" values="0;90;0" dur="20s" repeatCount="indefinite" id="ani${c}" begin="${bstr}"></animate>`;
});
return circlecode + anicode;
};
svg1.innerHTML = drawCircles(10);
observer.observe(mydiv);
aud.onplaying = aud.onpause = () => aud.paused ? svg1.pauseAnimations() : svg1.unpauseAnimations();
svg1.onclick = () => aud.paused ? (aud.play(), pic.play()) : (aud.pause(), pic.stop());
</script>
@走过岁月
岁月速度完成一个同玩音频效果，这个比较简单一点 @马黑黑
黑黑现在小辣椒只能玩套用了，自己不会增加什么效果了，都不会了{:4_198:} 今天准备下了，晚上要出去吃饭，{:4_205:} 小辣椒 发表于 2024-9-16 16:10
@走过岁月
岁月速度完成一个同玩音频效果，这个比较简单一点
欣赏来了 好快的速度，小辣椒马上构思出来，赞 加人物进去就变成另一个场景了，终于等到心上人了 小辣椒的每个作品都这么用心，一定要表扬 小辣椒朋友中秋快乐！ 祝您中秋节快乐！阖家团圆！ 小辣椒 发表于 2024-9-16 16:11
@马黑黑
黑黑现在小辣椒只能玩套用了，自己不会增加什么效果了，都不会了
身体要紧，先不想别的
https://img.soogif.com/0rIjPl4EnDGYyZ3SHLb6St3XlqGSfK1P.gif 有趣，又加了个人物，让整体氛围又不同了，还用了新的播放器按钮。
亲爱的脑筋灵活{:4_199:} 小脑袋瓜子灵活，集小辣椒、岁月、马黑三人的绝学于一身，不要太厉害了吧。{:4_204:}{:4_189:} 美少妇好丰满鸭。{:4_170:}像条美人鱼{:4_189:} 本帖最后由 亚伦影音工作室 于 2024-9-17 01:05 编辑
可以通过控制动图代码来得到暂停效果！
页:
[1]