《云朵》- 云朵
<style>#papa { left: -352px;width: 1300px; height: 813px; background: blue url('https://pic.imgdb.cn/item/62d2b80cf54cd3f937235d97.jpg') no-repeat center/cover; box-shadow: 4px 4px 24px #000; position: relative; }
#hunter { position: absolute; width: 122px; height: 147px; transition: left 3s, top 3s;z-index: 99; }
#prey { position: absolute; width: 240px; height: 240px; border-radius: 50%; }
#btnplay { position: absolute;left: 20px; top: 20px; width: 30px; height: 30px; cursor: pointer; border: none; outline: none; border-radius: 50%; }
#btnplay:hover { color: red; box-shadow: 1px 1px 1px #000; }
#lrcbox { position: absolute;left: 140px;top: 20px;font: normal 1.2em / 1.6em '宋体', sans-serif;color: snow;text-shadow: 1px 1px 2px #000; }
</style>
<div id="papa">
<input id="btnplay" type="button" value=">" />
<div id="lrcbox">LRC LOADING ...</div>
<img id="hunter" alt="" src="https://pic.imgdb.cn/item/6247e3c027f86abb2a56f17a.gif" />
<img id="prey" src="https://pic.imgdb.cn/item/62d25f77f54cd3f9379dd462.jpg" alt="" />
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=325583.mp3" autoplay="autoplay" loop="loop"></audio>
<script>
let last = 0;
let lrcAr = [
['2.47','云朵 - 云朵'],
['5.28','作词 : 刀郎'],
['7.31','作曲 : 刀郎'],
['24.70','我一定回来 越过那一片海'],
['40.93','阿妈呼唤 萦绕耳畔'],
['50.10','那年我离开像一朵云彩'],
['58.68','单单的飘向天外'],
['66.06','风拉着我的衣带'],
['73.37','像阿妈慈母情怀'],
['88.32','等着我回来 吻你双鬓洁白'],
['97.69','向你倾吐 爱以及爱'],
['107.52','年少读不懂亲人的关怀'],
['115.00','傻傻的执着未来'],
['122.95','痴迷在天外的色彩'],
['131.01','不见你心泪似海'],
['138.49','你笑着问我要什么'],
['146.18','我要你紧紧搂着我'],
['154.14','我就像天上漂泊的云朵'],
['161.91','飞向天际辽阔'],
['169.47','我搂着阿妈的爱'],
['176.99','从此后再不要分开'],
['184.96','我登上圣洁琉璃的天台'],
['192.76','还是你的小孩'],
['255.24','你笑着问我要什么'],
['262.49','我要你紧紧搂着我'],
['270.21','我就像天上漂泊的云朵'],
['278.28','飞向天际辽阔'],
['285.50','我搂着阿妈的爱'],
['293.06','从此后再不要分开'],
['301.14','我登上圣洁琉璃的天台'],
['309.03','还是你的小孩'],
['319.33','还是你的小孩']
];
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min;
setTimeout(gogo,100);
btnplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => btnplay.value = '||');
aud.addEventListener('pause', () => btnplay.value = '>');
aud.addEventListener('timeupdate',function(){
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr) lrcbox.innerHTML = lrcAr;
}
});
function gogo() {
let left = num(50,1050), top = num(420,518);
hunter.style.transform = last < left ? 'scale(1,1)' : 'scale(-1,1)';
prey.style.left = left + 'px';
prey.style.top = top + 'px';
hunter.style.left = left + 45 + 'px';
hunter.style.top = top - 100 + 'px';
last = left;
setTimeout(gogo,6000);
}
</script>
@马黑黑 本帖最后由 马黑黑 于 2022-7-16 16:21 编辑
美女在云中飞，有鹰作伴，好制作 马黑黑 发表于 2022-7-16 15:23
美女在云中非，有鹰作伴，好制作
我中午制作的。两张图片都加了滤镜的。 加林森 发表于 2022-7-16 16:00
我中午制作的。两张图片都加了滤镜的。
队长厉害 老林的鹰也在追美女。 马黑黑 发表于 2022-7-16 16:21
队长厉害
这样的效果还可以的吧。 梦油 发表于 2022-7-16 16:38
老林的鹰也在追美女。
上天入地地去追。 加林森 发表于 2022-7-16 16:47
这样的效果还可以的吧。
很好的 加林森 发表于 2022-7-16 16:47
上天入地地去追。
你别说，这样的设计还挺有意思的。 马黑黑 发表于 2022-7-16 17:29
很好的
那就好。 梦油 发表于 2022-7-16 17:56
你别说，这样的设计还挺有意思的。
是的。 加林森 发表于 2022-7-16 17:58
那就好。
{:4_190:} 马黑黑 发表于 2022-7-16 17:59
谢茶！ 这个制作很大气，队长真棒{:4_204:} 红影 发表于 2022-7-16 18:09
这个制作很大气，队长真棒
谢谢红影支持！{:4_204:} 加林森 发表于 2022-7-16 17:59
是的。
老林挺有才华 梦油 发表于 2022-7-16 18:26
老林挺有才华
我都是跟到学习的。 @小辣椒 啊呀，欣赏美制作，竟然听了两遍云朵