下班后走在回家的路上（学习黑黑动图布局效果）
<style>#papa { left: -350px; width: 1300px; height: 800px; display: grid; place-items: center; background: gray url('https://pic.imgdb.cn/item/62e9368d16f2c2beb14ce05b.jpg') no-repeat center/cover; box-shadow: 3px 3px 26px #000; position: relative;overflow: hidden; }
#papa div, #papa img, #papa span { position: absolute; }
#mama { width: 400px; height: 400px; left: calc(50% - 200px); top: calc(50% - 200px); background: radial-gradient(at 40% 30%, snow, transparent); border-radius: 0%; display: grid; place-items: center; transform: rotate(45deg);box-shadow: -30px 30px 50px #444;}
#disc { right: calc(50% - 30px); top: calc(50% - 30px); width: 60px; height: 60px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; opacity: 0; cursor: pointer; animation: rot 2s linear infinite; }
#renwu1 { width: 198px; height: 305px; left: calc(50% - 99px); bottom: calc(50% - 153px); opacity: 0; }
#renwu2 { width: 172px; height: 311px; left: calc(50% - 86px); bottom: calc(50% - 155px); opacity: 0; }
#renwu3 { width: 180px; height: 277px; left: calc(50% - 90px); bottom: calc(50% - 138px); opacity: 0; }
#renwu4 { width: 176px; height: 297px; left: calc(50% - 88px); bottom: calc(50% - 148px); opacity: 0; }
#renwu5 { width: 174px; height: 279px; left: calc(50% - 87px); bottom: calc(50% - 156px); opacity: 0; }
#tit { font: bold 2em/2.4em sans-serif; color: #F6DE80; text-shadow: 1px 1px 2px rgba(0,0,0,.75); opacity: 0;
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<div id="disc"></div>
<img id="renwu1" src="https://pic.imgdb.cn/item/62e936d016f2c2beb14d27c7.gif" alt="" />
<img id="renwu2" src="https://pic.imgdb.cn/item/62e936fe16f2c2beb14d5937.gif" alt="" />
<img id="renwu3" src="https://pic.imgdb.cn/item/62e937b816f2c2beb14e16f3.gif" alt="" />
<img id="renwu4" src="https://pic.imgdb.cn/item/62e9380016f2c2beb14e5e9e.gif" alt="" />
<img id="renwu5" src="https://pic.imgdb.cn/item/62e9382b16f2c2beb14e82da.gif" alt="" />
<div id="mama"><span id="tit">下班后走在回家的路上</span></div>
</div>
<script>
let idx = 0, aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1400910540.mp3';
aud.loop = true;
aud.autoplay = true;
disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
let TT = setTimeout(change,3000);
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');
function change() {
let aniAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let ele = aniAr;
ele.style.transition = 'all 3s';
ele.style.cssText += aniAr;
idx ++;
idx <= aniAr.length - 1 ? TT = setTimeout(change, 3000) : clearTimeout(TT);
}
</script> 下班后走在回家的路上
演唱：蔡宁
作词: 蔡宁
作曲: 蔡宁
编曲: 蔡宁
我走在这路上
下班回家的路上
手指轻响 步伐张狂
终于逃脱这战场
工作一天的战场
黑夜是我 最大向往
Hold On Hold On
成年的战场
Move On Move On
消失的方向
Come On Come On
压抑的疯狂
Music Turn on
节奏在放荡
Relax AndDream on
谈什么梦想
Come on, Come on
NaNaNa …
NaNaNa …
NaNaNa …
NaNaNa …
NaNaNa …
NaNaNa …
我走在这路上
下班回家的路上
手指轻响 步伐张狂
终于逃脱这战场
工作一天的战场
黑夜是我 最大向往
Hold On Hold On
成年的战场
Move On Move On
消失的方向
Come On Come On
压抑的疯狂
Music Turn on
节奏在放荡
Relax AndDream on
谈什么梦想
Come on, Come on
NaNaNa …
NaNaNa …
NaNaNa …
NaNaNa …
NaNaNa …
NaNaNa … 这歌我也是第一次听，有趣，网上想找什么歌名都有呢{:4_173:}
好了，让他们继续走吧，我得睡觉去了，为了做这个弄得都没时间回复提醒了{:4_173:} 为了怕人物放不下，图片弄得有点大{:4_173:}谢谢黑黑的代码@马黑黑{:4_187:} 这个创意挺好，实现方式也巧妙。
还有一些小细节可以尝试，比如元素变大变小，可以通过 width、height 或 transform: scale(0.5) 之类的方式，都放在数组里 小技巧：
每一个元素都必须进行物理定位，第一个动作才会徐徐发生。没有left、top或right、bottom定位的，第一个动作会瞬间完成。
如果需要通过 left、top 进行物理移位，则实现定义好 left 和 top 值，想用哪一个值就定哪一个初始值，要对应。
原因：从哪移动到哪，必须要初始值，transition 的时间设定才有效，因为JS能告诉它出发点和目的地。如果出发点位置，则略过 transition 的设定，直接到达目的地。 很漂亮，但这个怕是很难弄吧{:4_203:} 马黑黑 发表于 2022-8-3 07:22
这个创意挺好，实现方式也巧妙。
还有一些小细节可以尝试，比如元素变大变小，可以通过 width、height...
宽和高好像只能一个个设置，要是想宽高同时改编，只能用transform: scale(0.5)了吧。
谢谢黑黑{:4_187:} 马黑黑 发表于 2022-8-3 07:53
小技巧：
每一个元素都必须进行物理定位，第一个动作才会徐徐发生。没有left、top或right、bottom定位的 ...
嗯嗯，黑黑说得很有道理。但是人物出来的地方就是它的初始定位啊，怎样再赋予它初始位置数值呢，是需要加个什么语句，来明确一下那里就是初始值么？
我也觉得人物的横移瞬间就完成了，也希望它徐徐移动。 樵歌 发表于 2022-8-3 08:23
很漂亮，但这个怕是很难弄吧
不难，就是需要一个个设置图片高宽，还要去看和调整人物走动的位置，这些都不难，却要花点时间{:4_173:} 制作得很漂亮。再欣赏一下。 红影 发表于 2022-8-3 09:57
嗯嗯，黑黑说得很有道理。但是人物出来的地方就是它的初始定位啊，怎样再赋予它初始位置数值呢，是需要加 ...
left: xxpx;
top: yypx; 红影 发表于 2022-8-3 09:57
嗯嗯，黑黑说得很有道理。但是人物出来的地方就是它的初始定位啊，怎样再赋予它初始位置数值呢，是需要加 ...
看我的解释你应该能理解的：不设定 top 值（虽然默认有缺省值），top位置的改变就没有依据，所以瞬间完成，没有徐徐而去的效果。 红影 发表于 2022-8-3 09:54
宽和高好像只能一个个设置，要是想宽高同时改编，只能用transform: scale(0.5)了吧。
谢谢黑黑
scale 变化在原位发生 亲爱的，有自己创意，黑黑有这么多的建议，我根本就看不懂的{:4_170:} 发现你素材真多哦，我昨天就在想做这个动图布局素材难找的，居然这么多人物动图{:4_178:} 红影 发表于 2022-8-3 10:00
不难，就是需要一个个设置图片高宽，还要去看和调整人物走动的位置，这些都不难，却要花点时间
从找图到设置要用多少时间？ 加林森 发表于 2022-8-3 11:11
制作得很漂亮。再欣赏一下。
谢谢队长鼓励。 马黑黑 发表于 2022-8-3 12:13
left: xxpx;
top: yypx;
没看懂，html里，img id="renwu1" 就是调用renwu1的格式啊，而这个格式已经设置了位置了的，还怎么设置。 马黑黑 发表于 2022-8-3 12:14
看我的解释你应该能理解的：不设定 top 值（虽然默认有缺省值），top位置的改变就没有依据，所以瞬间完成 ...
还是不懂，就像光盘一样，已经设置位置了，不明白为什么光盘是缓缓出去的，而人物是一下子出去的。