《放大镜》 TO 马黑黑
<style>#mydiv { margin: 60px 0 20px calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/664850a9d9c307b7e96f9944.jpg') no-repeat center/cover; overflow: hidden; border: 1px solid gray; z-index: 1; position: relative; }
#player { position: absolute; bottom: 0; left: 360px; }
#lrc { position: absolute; top: 20px;left: -220px; }
li-zi { position: absolute; left: 820px; width: 40px; height: 39px; background: url('https://pic.imgdb.cn/item/6649f754d9c307b7e96338a8.png') no-repeat center/cover; opacity: .6; }
#mydiv::before { position: absolute; content: ''; transform-origin: 40% 71%; animation: swear 1.1s linear infinite alternate var(--state); left: 350px; top: 20px; width: 580px; height: 580px; border-radius: 50%; background: url('https://pic.imgdb.cn/item/664850a9d9c307b7e96f9944.jpg') no-repeat -350px -20px; opacity: 0.8;}
#pic1 { position: absolute; top: 262px; left: 544px; transform-origin: 50%100%; opacity: 0.8; animation: yan 0.9s linear infinite alternate var(--state); }
@keyframes swear { to { transform: skew(2deg); } }
@keyframes yan { to { transform: skew(-3.5deg) scale(1.15);} }
@keyframes moving { from { opacity: 0; transform: rotate(0) translate(0,0); } to { opacity: 1; transform: rotate(180deg) translate(var(--x0),var(--y0)); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1956851629.mp3" autoplay loop></audio>
<canvas id="player" width="360" height="80"></canvas>
<canvas id="lrc" width="800" height="50"></canvas>
<img id="pic1" src="https://pic.imgdb.cn/item/664895e3d9c307b7e9c3fd60.png" alt="" />
</div>
<script>
var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js2024/canv_lineprog_player.js';
document.body.appendChild(sF);
var all = 120;
for(var i = 0; i < all; i++) {
var lz = document.createElement('li-zi');
var hudu = Math.PI / 180 * 360 / all * i;
var xx = 660 * Math.cos(hudu), yy = 660 * Math.sin(hudu);
var size = Math.random() * 16 + 6;
lz.style.cssText += `
--x0: ${xx}px;
--y0: ${yy}px;
width: ${size}px;
height: ${size}px;
animation: moving ${Math.random() * 20 + 20}s -${Math.random() * 20}s infinite var(--state);
`;
mydiv.prepend(lz);
}
var colors = {track: 'pink', prog: '#4682B4', lrc1: 'snow', lrc2: '#00BFFF'};
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
</script> @马黑黑 发现一首歌叫《小眼睛放大镜》，忍不住大笑，小眼睛和放大镜这两个词汇正是这两天聊天里提到的词汇，忍不住想做个帖子。等做完觉得那歌的歌词不太适合，索性就用了这首《放大镜》了{:4_173:} 根据黑黑的头像找了图图，应该头像是来自这张图图的吧{:4_173:} 有意思{:5_106:} 金属柄的放大镜高端高冷 起个网名好难 发表于 2024-5-18 20:40
有意思
谢谢难难，做着好玩的{:4_173:} 马黑黑 发表于 2024-5-18 20:51
金属柄的放大镜高端高冷
哦哦，忘了这茬了，黑黑说过，用木柄放大镜更顺手，可惜没找到木柄的呢{:4_173:} 红影 发表于 2024-5-18 21:49
哦哦，忘了这茬了，黑黑说过，用木柄放大镜更顺手，可惜没找到木柄的呢
木柄的太贵，拼多多上的都是塑料仿制的 这两天的歌词加小播的新效果。。画面处理的很漂亮，小播和歌词搭得漂亮，
黑老师头像在放大镜里，主题突出。。 不仅放大镜在摇曳，
香烟的烟雾也单独整了一张PNG图片，动起来后，烟雾飘得更加真实。。
这个创意非常赞！~~ 黑老师在这个图里头发更浓密了。{:4_170:}好帅！~~ 马黑黑 发表于 2024-5-18 21:59
木柄的太贵，拼多多上的都是塑料仿制的
金属的应该更禁得起使用吧{:4_173:} 南无月 发表于 2024-5-18 22:27
这两天的歌词加小播的新效果。。画面处理的很漂亮，小播和歌词搭得漂亮，
黑老师头像在放大镜里，主题突出 ...
画布歌词没有同步变色，用这样歌词变化迅速的说唱觉得更适合，所以就换了这首歌。只是做歌词的时候好累啊，都来不及反应{:4_173:} 南无月 发表于 2024-5-18 22:29
不仅放大镜在摇曳，
香烟的烟雾也单独整了一张PNG图片，动起来后，烟雾飘得更加真实。。
这个创意非常赞 ...
月儿观察得真仔细，其实做完帖子很期待你来看，用的小心思都能被你看到，让人很有满足感{:4_185:} 南无月 发表于 2024-5-18 22:30
黑老师在这个图里头发更浓密了。好帅！~~
上半截的头发是手工补发的，看不出来吧{:4_170:} 红影 发表于 2024-5-19 08:59
金属的应该更禁得起使用吧
金属和人体的结合没那么自然 马黑黑 发表于 2024-5-19 09:33
金属和人体的结合没那么自然
木头和人的结合就自然么{:4_189:} 红影 发表于 2024-5-19 16:51
木头和人的结合就自然么
是的。比如，木头人。但不说金属人，虽然有铁人但不好，会生锈 马黑黑 发表于 2024-5-19 17:38
是的。比如，木头人。但不说金属人，虽然有铁人但不好，会生锈
木头人也会腐烂，而且那个不是跟真正的人结合的啊{:4_173:} 红影 发表于 2024-5-19 18:49
木头人也会腐烂，而且那个不是跟真正的人结合的啊
这看是什么木头。考古学能挖掘出几亿年前的木头呢