阿米尔冲（学习黑黑老师飞向天空代码）
<style>#mydiv { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/6731abf5d29ded1a8c41a056.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; display: grid; place-items: center; position: relative; --state: running; }
#msvg { position: absolute; bottom: 10px; cursor: pointer; transform-origin: 0 100%; filter: drop-shadow(-5px -5px 10px black); animation: swing .45s infinite alternate var(--state); }
#msvg text { font: bold 100px Arial, sans-serif; stroke: snow; stroke-width: 2; transition: .5s; }
#msvg:hover text { filter: hue-rotate(180deg); }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
#fsbtn { position: absolute; bottom: 15px; color: white; padding: 2px 6px; border: 2px solid snow; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
@keyframes swing { to { transform: skew(-30deg) rotate(-5deg); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1833625588" autoplay loop></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/05/45/30/video6362e4fa279f6.mp4" autoplay loop muted></video>
<svg id="msvg" width="600" height="150"></svg>
<span id="fsbtn"></span>
</div>
<scripttype="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr('msvg');
var stop = `
<stop offset="0" stop-color="blue" stop-opacity=".9" />
<stop offset="1" stop-color="red" stop-opacity=".6" />
<animate attributeName="fx" values="0;1;0" dur=".25s" repeatCount="indefinite" />
`;
var opt = { id: 'rGd', r: .2, spreadMethod: 'reflect' };
dr.gradient('radialGradient', opt, stop);
dr.text('阿 米 尔冲 ',20,130,'url(#rGd)').set('dy', '0 -5 -5 -5 -5 -5 -5 -5 -5');
msvg.onclick = () => {
msvg.style.setProperty('--state', ['paused','running'][+aud.paused]);
aud.paused ? (aud.play(), vid.play(), msvg.unpauseAnimations()) : (aud.pause(), vid.pause(), msvg.pauseAnimations());
};
fscreen.fs('mydiv', 'fsbtn');
aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
</script>
https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 好曲美图，问候梦江南。 起个网名好难 发表于 2024-11-11 16:27
谢谢老师沙发支持。问好！ 梦油 发表于 2024-11-11 16:33
好曲美图，问候梦江南。
这只歌“花儿为什么这样红”是冰山上来客的经典歌曲。
问好梦油老师，谢谢支持！ 梦江南 发表于 2024-11-11 16:49
这只歌“花儿为什么这样红”是冰山上来客的经典歌曲。
问好梦油老师，谢谢支持！
是的，我很喜欢这些老歌、红歌。 梦油 发表于 2024-11-11 17:12
是的，我很喜欢这些老歌、红歌。
老歌其实要比现代有的歌好听。 有意思，这样的动态文字正好符合冲的意思呢，江南又是最快完成作业的，还完成得正好{:4_199:} 在江南的贴子里，文字的阴影更清楚了。
江南的作图真好，发现江南很会用图图去适应代码效果，其他人更习惯用小播适应背景，江南反其道而行之呢，无论哪种途径，都殊途同归，都能得到好帖子。给江南点赞{:4_199:} 文字的倾斜和当中人物的舞姿也很相符，这个应用真好{:4_199:} 红影 发表于 2024-11-11 22:35
有意思，这样的动态文字正好符合冲的意思呢，江南又是最快完成作业的，还完成得正好
这是黑黑老师的代码好缘故。早上好！{:4_204:} 红影 发表于 2024-11-11 22:38
在江南的贴子里，文字的阴影更清楚了。
江南的作图真好，发现江南很会用图图去适应代码效果，其他人更习惯 ...
您说得真对，我是用图图去配代码的。{:4_173:} 红影 发表于 2024-11-11 22:39
文字的倾斜和当中人物的舞姿也很相符，这个应用真好
这个就用图图去配代码的效果。 梦江南 发表于 2024-11-11 17:29
老歌其实要比现代有的歌好听。
是的，你看，《让我们荡起双桨》唱了几代人，现在的歌能唱多久啊？ 今天第三次碰到这个问题了，加分后就甩出论坛，不晓得什么原因，估计代码问题， 欣赏梦江南老师的好制作，歌曲好听 画面唯美{:4_199:} 梦江南 发表于 2024-11-12 08:33
这是黑黑老师的代码好缘故。早上好！
这个帖子里的文字效果特别适合，厉害{:4_187:} 梦江南 发表于 2024-11-12 08:36
您说得真对，我是用图图去配代码的。
江南很会动脑筋，这个让阿米尔冲得太好了{:4_187:} 梦江南 发表于 2024-11-12 08:37
这个就用图图去配代码的效果。
简直是天设地造的合适呢{:4_199:} 好漂亮，歌曲也是好听，必须赞的{:4_178:}