学习帖【梁祝化蝶】作业
本帖最后由 梦江南 于 2024-6-25 19:02 编辑 <br /><br /><style>#tz { left: 50%; transform: translateX(calc(-50% - 1px)); width: 1200px; height: 750px; overflow: hidden; background: lightblue url('https://pic.imgdb.cn/item/667aa0cdd9c307b7e99aa203.gif') no-repeat center/cover; box-shadow: 2px 2px 6px #000; z-index: 1; position: relative; }
#tz:fullscreen li-zi { offset-path: path('M700 900 Q-400 450,960 -20'); }
li-zi { position: absolute; top: 0; width: 16px; height: 16px; border-radius: 50%; background: olive; offset-path: path('M600 800 Q-400 450,860 -20'); offset-distance: 0; filter: drop-shadow(-100px -160px 0 var(--shadow)); animation: fly 20s cubic-bezier(0.17,0.86,0.73,0.14) infinite var(--state); }
li-zi:hover { filter: hue-rotate(180deg) drop-shadow(-100px -160px 0 lightgreen); }
#player { position: absolute; right: 180px; bottom: 180px; width: 160px; height: 160px; cursor: pointer; transition: .5s; animation: rot 8s linear infinite var(--state); }
#player:hover { filter: brightness(1.2); }
@keyframes fly { to { offset-distance: 100%; } }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="tz">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=281868" autoplay loop></audio>
<img id="player" alt="" title="播放" src="https://pic.imgdb.cn/item/667a626ed9c307b7e92c904e.gif" />
</div>
<script>
//粒子
new Array(total = 60).fill(0).map((i,k) => {
i = document.createElement('li-zi');
i.style.cssText += `
left: ${600 / total * k + 20}px;
background-image: linear-gradient(lightgreen, #${Math.random().toString(16).substring(2,8)});
animation-delay: -${Math.random() * 20}s;
--shadow: #${Math.random().toString(16).substring(2,8)};
`;
tz.prepend(i);
});
//联动函数
var mState = () => {
tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
player.title = ['暂停','播放'][+aud.paused];
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
//全屏
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
papa: '#tz',
css: 'bottom: 20px; left: 50%; transform: translateX(-50%); --color: white; --fsBg: green;',
});
</script> 太棒了，太棒了！梦江南朋友，谢谢你。当你知道我喜欢《化蝶》以后，就制作了这件美不胜收的作品，谢谢你！这是我最喜欢的一支歌曲，也是我以前演奏过的节目。《化蝶》轻快、明亮，优美的曲调、旋律，优美动听、简洁活泼，完美地展现了蝴蝶化蛹成蝶的过程，如同一场意境优美的音乐晚餐。
谢谢你，梦江南朋友！ 太漂亮啦！ 优雅造型雕塑，漫天飘飞的五彩缤纷的粒子再配上优美的旋乐。完美！ 这个漂亮，粒子的飘飞方向和背景图里的倾斜方向很一致啊，非常奇妙的效果{:4_199:} 制作漂亮，欣赏江南的美贴 小播也很有特色。欣赏梦江南好帖{:4_187:} 本帖最后由 梦江南 于 2024-6-26 08:27 编辑
梦油 发表于 2024-6-25 20:35
太棒了，太棒了！梦江南朋友，谢谢你。当你知道我喜欢《化蝶》以后，就制作了这件美不胜收的作品，谢谢你！ ...
谢谢梦油老师喜欢。梦油老师是搞音乐的？老师演凑的哪一种乐器呢？
这梁祝化蝶的雕塑是宁波梁祝公园的进门塑立的。 樵歌 发表于 2024-6-25 21:02
太漂亮啦！
谢谢樵歌管理员加精支持鼓励！早上问好！ 樵歌 发表于 2024-6-25 21:05
优雅造型雕塑，漫天飘飞的五彩缤纷的粒子再配上优美的旋乐。完美！
这梁祝化蝶的雕塑是宁波梁祝公园的进门塑立的。
谢谢樵歌管理员的厚爱！ 梦江南 发表于 2024-6-26 08:31
这梁祝化蝶的雕塑是宁波梁祝公园的进门塑立的。
谢谢樵歌管理员的厚爱！
https://pic.imgdb.cn/item/667a6fa3d9c307b7e9452ec5.gif 红影 发表于 2024-6-25 21:48
这个漂亮，粒子的飘飞方向和背景图里的倾斜方向很一致啊，非常奇妙的效果
谢谢影子支持，早上好！{:4_204:} 绿叶清舟 发表于 2024-6-25 21:55
制作漂亮，欣赏江南的美贴
谢谢绿叶清舟版主关注支持，早上好！{:4_204:} 红影 发表于 2024-6-25 21:59
小播也很有特色。欣赏梦江南好帖
谢谢影子鼓励！{:4_204:} 本帖最后由 梦油 于 2024-6-26 09:38 编辑
梦江南 发表于 2024-6-26 08:26
谢谢梦油老师喜欢。梦油老师是搞音乐的？老师演凑的哪一种乐器呢？
这梁祝化蝶的雕塑是宁波梁祝公园的进 ...
我喜欢音乐，是个业余爱好者。我吹萨克斯，没退休时，参与过由业余音乐爱好者组织的草台班子，经常到饭店为舞会伴奏。你制作的《化蝶》很具有想象力。
梦油 发表于 2024-6-26 09:32
我喜欢音乐，是个业余爱好者。我吹萨克斯，没退休时，参与过由业余音乐爱好者组织的草台班子，经常到饭店 ...
梦油老师厉害啊，萨克斯吹茉莉花很经典的。现在还吹吗？ 梦江南 发表于 2024-6-26 10:02
梦油老师厉害啊，萨克斯吹茉莉花很经典的。现在还吹吗？
现在，说话都接不上气了{:5_103:} 梦油 发表于 2024-6-26 10:17
现在，说话都接不上气了
不会吧，老师谦虚了！ 梦江南 发表于 2024-6-26 10:20
不会吧，老师谦虚了！
朽木不可雕也！ 梦油 发表于 2024-6-26 15:00
朽木不可雕也！
只要老师兴趣还在，一定 是可以的。