夜雨十年灯 （学习黑黑老师银河轨道代码）
本帖最后由 梦江南 于 2026-8-17 14:12 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
.pa { --offsetX: 81px; --bg: url('https://pan.suyanw.cn/view.php/53c25885e8b4fff85e4dfa49bdfd6e7a.jpg') no-repeat center/cover; color: lightblue; perspective: 1000px; }
/* 核心修改：给 .son 加上 translateY(-80px) */
.son { position: absolute; inset: 0; transform-style: preserve-3d; transform: translateY(-80px); }
.player { width: 480px; bottom: 10px; }
.btnFs { top: 25px; right: 20px; }
.mpic { width: 228px; height: 228px; offset-path: ellipse(45% 30% at 50% -1%); cursor: pointer; filter: drop-shadow(2px 2px 30px white); animation: offset-distance 15s linear var(--delay) infinite var(--state), move 200s linear infinite alternate var(--state); --delay: 0s; }
.mpic:nth-of-type(2) { --delay: -3s; }
.mpic:nth-of-type(3) { --delay: -6s; }
.mpic:nth-of-type(4) { --delay: -9s; }
.mpic:nth-of-type(5) { --delay: -12s; }
@keyframes move {
from { transform: translateZ(-3000px); }
to { transform: translateZ(0); }
}
</style>
<div id="pa" class="pa">
<video class="pd-vid" src="https://img2.tukuppt.com/video_show/2269348/00/02/01/5b4eedab469ff.mp4" autoplay loop muted></video>
<div class="son">
<img class="mpic" src="https://pan.suyanw.cn/view.php/783f2466100e9f47ef8e79fd73fea0ed.png" alt="" />
<img class="mpic" src="https://pan.suyanw.cn/view.php/ee8ed0d005cf8d09e1c4d76a94b5deb5.png" alt="" />
<img class="mpic" src="https://pan.suyanw.cn/view.php/0a4aef8e885029ba148b7df413f48d7f.png" alt="" />
<img class="mpic" src="https://pan.suyanw.cn/view.php/1bcaa2047d64c326f9375aa2227881d5.png" alt="" />
<img class="mpic" src="https://pan.suyanw.cn/view.php/0a4aef8e885029ba148b7df413f48d7f.png" alt="" />
</div>
</div><script>
var pics = document.querySelectorAll('.mpic');
var options = {
pa: '.pa',
urls: [['https://music.163.com/song/media/outer/url?id=1483422061', '夜雨十年灯']],
btns: [...pics],
};
loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js?v1', tzRun);
function tzRun() {
var aud = new AudPlayer(options);
}
function loadJs(url, callback) {
var script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.onload = function() {
if (callback) callback();
};
document.head.appendChild(script);
}
</script>
@马黑黑 老师，梦江南交作业，望指导。{:4_180:} 欣赏江南优美之作，祝福江南天天快乐。 梦油 发表于 2026-8-16 17:00
欣赏江南优美之作，祝福江南天天快乐。
谢谢梦油欣赏支持，都要天天开心快乐。{:4_204:} 梦江南 发表于 2026-8-16 17:17
谢谢梦油欣赏支持，都要天天开心快乐。
是的，我们一起开心，我们一起快乐。 江南上午好{:4_204:} 精彩的制作，视频制作精彩。 奇怪，我这里好像只听到音乐，看不到画面呢{:4_203:} 玫瑰 发表于 2026-8-17 10:31
江南上午好
玫瑰下午好{:4_204:} 玫瑰 发表于 2026-8-17 10:32
精彩的制作，视频制作精彩。
谢谢玫瑰欣赏支持，问好！{:4_204:} 梦油 发表于 2026-8-16 19:57
是的，我们一起开心，我们一起快乐。
梦油下午好，新一天快乐！{:4_204:} 红影 发表于 2026-8-17 13:30
奇怪，我这里好像只听到音乐，看不到画面呢
画面没看到？这是从微风网盘上传的。这是怎么回事？{:4_201:} 红影 发表于 2026-8-17 13:30
奇怪，我这里好像只听到音乐，看不到画面呢
已换了上传地址，再看看，能看到了没有？不好意思。{:4_204:} 欣赏梦江南的创意，祝制作愉快~~{:4_204:}{:4_190:}
霜染枫丹 发表于 2026-8-17 17:33
欣赏梦江南的创意，祝制作愉快~~
谢谢欣赏支持，问好版主。{:4_204:} 这个背景是一把剑吧，周围五个小圆也是弓箭的威武男子，，阿姨好创意{:4_199:} 这个，如果希望旋转图案真正绕着兵器走，需要将兵器单独提取出来，作为 3d 物件元素使用，z 轴设为一个固定值，值范围在旋转元素相应 z 距离之内，这样，旋转物体移动到一定的 z 值时会在兵器的后面，暂时会看不见、形成绕到了后面的效果。 小辣椒 发表于 2026-8-17 21:59
这个背景是一把剑吧，周围五个小圆也是弓箭的威武男子，，阿姨好创意
问好小辣椒，你说得没错，是的，阿姨本想把这五个武士绕到宝剑后面去，不会做。{:4_204:} 马黑黑 发表于 2026-8-18 07:44
这个，如果希望旋转图案真正绕着兵器走，需要将兵器单独提取出来，作为 3d 物件元素使用，z 轴设为一个固定 ...
黑黑老师，你说得对的，我把宝剑也扣出来了，就是不会做。原理知道，代码不会用。{:4_201:} 欣赏美帖， 赞！
天上飘的是什么？
页:
[1]
2