此生不换

马黑黑 发表于 2024-8-23 07:37

马黑黑 发表于 2024-8-23 07:37

<h2>帖子代码：</h2>
<div class="hE"><pre>
<style>
#mama {
margin: 130px 0 30px calc(50% - 721px);
width: 1280px;
height: 720px;
background: url('https://638183.freep.cn/638183/t24/webp2/cubh.webp') no-repeat center/cover;
box-shadow: 0 0 8px gray;
overflow: hidden;
z-index: 1;
perspective: 1500px;
position: relative;
}
#mama > video {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: screen;
-webkit-mask: linear-gradient(to right top, red 10%, transparent 90%, transparent);
pointer-events: none;
}
</style>

<div id="mama" class="mama">
<audio src="https://music.163.com/song/media/outer/url?id=25638340" autoplay loop></audio>
<video src="https://img.tukuppt.com/video_show/2269348/00/35/88/5fd82d6d07f59.mp4" autoplay loop muted></video>
</div>

<script>
var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/3dbox6_yslrc.js';
document.body.appendChild(sf);

sf.onload = () => {
HCPlayer({
papa: '#mama',
geci: geci,
skip: -0.3,
average: -0.5,
ttAr: ['此生', '不换', '世代','相传','前尘','怀恋'],
player_css: 'left: 50%; bottom: 20%; --ww: 80px; --hh: 50px;',
lrc_css: 'left: 50%; transform: translateX(-50%); top: 50px; --bg: linear-gradient(white, gold); color: #ccc;',
fs_css: 'right: 20px; top: 20px; --bg: transparent; --color: navy;',
});
};

let geci = `
此生不换
作词 : 杨漩予
作曲 : 闻震
编曲 : 翟松
制作人 : 许经纶
歌手 : 青鸟飞鱼
时光穿不断流转在从前
刻骨的变迁
不是遥远
再有一万年
深情也不变
爱像烈火般蔓延
记忆是条长线盘旋在天边
沉浮中以为
情深缘浅
你再度出现
我看见誓言
承诺在水天之间
回头看
不曾走远
依依目光此生不换
要分散不习惯
怎么算都太难
分开之后更勇敢
愿这爱世代相传
喝不完忘情水
不让你如烟
前尘再怀恋
望剑如面
挥舞的瞬间
别再闭上眼
错过惊世的依恋
回头看
不曾走远
眷恋一人流连忘返
多少汗够温暖
你哭喊我呼唤
听清耳边的呢喃
别害怕
风轻云淡
回头看
不曾走远
依依目光此生不换
要分散不习惯
怎么算都太难
分开之后更勇敢
愿这爱世代相传
2024-8-21
`;
</script>
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>

马黑黑 发表于 2024-8-23 07:39

歌词可以写在一行，各行之间使用分行符 \n 连结起来。

插件配置说明：http://mhh.52qingyin.cn/art/show.php?st=2&sd=2&art=mahei_1724369627

竹溪发表于 2024-8-23 09:59

这个制作很仙，{:5_116:}欣赏老师好帖。

红影发表于 2024-8-23 13:59

漂亮的六面体按钮效果，这个六面体还是随机颜色的。悬浮在仙境前，这寓意真好{:4_199:}

红影发表于 2024-8-23 14:01

记得六面体放上面和下面不一样的，好像越是往上放，后面的就在下面了，放中间，则前后重叠{:4_173:}

马黑黑 发表于 2024-8-23 14:08

红影发表于 2024-8-23 14:01
记得六面体放上面和下面不一样的，好像越是往上放，后面的就在下面了，放中间，则前后重叠

关键看 perspective 这个属性的设置吧，不同的值效果不同。另外还有一个属性 perspective-origin 用来指定观察者的位置，做帖一直使用缺省值

红影发表于 2024-8-23 14:12

这个视频又是很奇妙，黑黑总能找到很适用的视频{:4_187:}

红影发表于 2024-8-23 14:13

又一个新的封装，都来不及跟着做了{:4_173:}

红影发表于 2024-8-23 16:06

马黑黑发表于 2024-8-23 14:08
关键看 perspective 这个属性的设置吧，不同的值效果不同。另外还有一个属性 perspective-origin 用来指 ...

是的，没设定perspective-origin，的确会自动决定朝向。

马黑黑 发表于 2024-8-23 16:17

红影发表于 2024-8-23 16:06
是的，没设定perspective-origin，的确会自动决定朝向。

默认值是 50% 50%，或 center

红影发表于 2024-8-23 16:45

马黑黑发表于 2024-8-23 16:17
默认值是 50% 50%，或 center

这样也够用了，无论朝向哪里，都好看呢{:4_187:}

彩云归 发表于 2024-8-23 17:08

欣赏佳作，谢谢分享！

马黑黑 发表于 2024-8-23 18:36

红影发表于 2024-8-23 16:45
这样也够用了，无论朝向哪里，都好看呢

默认一般都是最好的

马黑黑 发表于 2024-8-23 18:36

彩云归发表于 2024-8-23 17:08
欣赏佳作，谢谢分享！

{:4_190:}

红影发表于 2024-8-23 22:03

马黑黑发表于 2024-8-23 18:36
默认一般都是最好的

取了最常用的设为了默认。

马黑黑 发表于 2024-8-23 23:07

红影发表于 2024-8-23 22:03
取了最常用的设为了默认。

是的，所以帖子中一直都没设置

四海八荒 发表于 2024-8-24 05:44

欣赏，有种宇宙星空的既视感

马黑黑 发表于 2024-8-24 08:17

四海八荒发表于 2024-8-24 05:44
欣赏，有种宇宙星空的既视感

{:4_180:}

红影发表于 2024-8-24 14:03

马黑黑发表于 2024-8-23 23:07
是的，所以帖子中一直都没设置

其实不设置也没什么的{:4_187:}

页: [1] 2

花潮论坛's Archiver

此生不换