《秋意浓》（学习黑黑3d六面体效果）
<style>
#papa { margin: 0 0 0 calc(50% - 581px); width: 1024px; height: 576px; background: url('https://s1.ax1x.com/2023/08/17/pP1U09H.md.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; z-index: 1; position: relative; --state: running; overflow: hidden; }
#vid { position: absolute; width: 100%; height: 110%; top:-10%; object-fit: cover; pointer-events: none; mix-blend-mode: screen; z-index: 2; opacity: .95; }
#pic{ position: absolute; left: 80px; bottom: 20px; width: 200px; height: 201px; opacity: .35; }
#pic1{ position: absolute; right: 0px; top: 0px; width: 579px; height: 420px; opacity: .95; }
</style>
<div id="papa"><video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/17/44/5ec495391393a_10s_big.mp4" autoplay="" loop="" muted="" bd_landing_video_statistic_record_key="1"></video>
<img id="pic" src="https://s1.ax1x.com/2023/08/17/pP1UTuq.png" alt="" />
<img id="pic1" src="https://pic.imgdb.cn/item/64de281b661c6c8e548f17c4.gif" alt="" />
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1974606008.mp3" autoplay loop></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/3dbox6_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
let geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
script.onload = () => {
HCPlayer({
papa: '#papa', /* 宿主元素 */
lrcAr: geci, /* 歌词 */
ttAr: ['秋意浓', '聚散', '离别多', '伤痛','舞秋风','孤独'],/* 面板文字 */
lrc_css: `
top: 20px; /* 位置 */
color: Linen; /* 歌词底色 */
--bg: linear-gradient(rgba(247,255,0,.25),rgba(255,115,0,.7));/* 歌词同步颜色 */
`,
player_css: `
bottom: 130px; /* 位置 */
left: 780px;
color: #fff; /* 文本颜色 */
--ww: 90px; /* 播放器总宽度 */
--hh: 40px; /* 播放器总高度 */
`,
fs_css: 'left: -100px; top: 10px; --color: #eee; --bg: #333;', /* 全屏按钮 */
});
};
})();
setInterval( () => { aud.paused ? vid.pause() : vid.play(); },100);
</script> 去做帖子，才发现把这个六面的bottom设置比较大的时候，就变成平面的转体，看不出倾斜的了。
这个不知道什么原理了@马黑黑{:4_173:} 很伤感的一首歌，正好秋天了，听听歌神的歌曲挺好的。 没看见恩师图动，呵呵！ 有点卡慢 看到了，好美的！ 红影 发表于 2023-8-17 22:30
去做帖子，才发现把这个六面的bottom设置比较大的时候，就变成平面的转体，看不出倾斜的了。
这个不知道什 ...
理论上，只有它不太靠近顶端或底端，立体效果都不会受影响。
如果想放在稍上的地方，则用 top 来设置，反之，想放在稍下的地方，则用bottom 小文 发表于 2023-8-17 22:50
没看见恩师图动，呵呵！
可能图片打开有点慢，多等一下就好{:4_187:} 小文 发表于 2023-8-17 22:52
看到了，好美的！
谢谢小文，挺喜欢这首歌，就学着做了一个代码效果{:4_187:} 马黑黑 发表于 2023-8-17 23:04
理论上，只有它不太靠近顶端或底端，立体效果都不会受影响。
如果想放在稍上的地方，则用 top 来设置 ...
我是说那个六面体放在稍下的地方，后面的部分是向上翘的，放在上面点是向下翘的，放在高度居中的地方就不翘了，前后的高度重合了。这个变化很奇妙。不去试做一下还不知道呢{:4_173:} 醉美水芙蓉 发表于 2023-8-18 07:11
欣赏红影美女精彩制作！
多谢水芙蓉美女鼓励{:4_187:} 红影 发表于 2023-8-18 10:15
我是说那个六面体放在稍下的地方，后面的部分是向上翘的，放在上面点是向下翘的，放在高度居中的地方就不 ...
这是3d场景常见的现象，因为这是用2d的环境来模拟3d，不太可能非常完美 马黑黑 发表于 2023-8-18 11:53
这是3d场景常见的现象，因为这是用2d的环境来模拟3d，不太可能非常完美
嗯嗯，原来如此。试做了一下，现在更清楚它往哪边翘了{:4_173:} 小文也好喜欢学友的歌！ 红影 发表于 2023-8-18 15:11
嗯嗯，原来如此。试做了一下，现在更清楚它往哪边翘了
还有3d景深的设置也会影响到这个效果。我再插件里做了设置，所以帖要做的设置会被覆盖。 冬雨不会做就只能欣赏了{:4_187:} 美女你全才，啥也是不说，就顶了{:4_178:} 只能顶才表示冬雨对你的佩服{:4_170:} 顶顶更表明冬雨的态度{:4_170:}