【黑师代码】不朽（学习黑师20240530《天策·天策府》开裂动画效果）
本帖最后由 南无月 于 2024-6-2 21:49 编辑 <br /><br /><style>#ma {margin: 30px 0 30px calc(50% - 931px); width: 1700px; height: 900px; background: url('https://642303.freep.cn/642303/tu/20240602w03.webp') no-repeat center/cover; box-shadow: 3px 3px 8px #000; overflow: hidden; z-index: 1; position: relative; }
.pa { position: absolute; padding: 20px; top: 60px; left: 40.5%;}
.pa::before, .pa::after { position: absolute; content: ''; width: 100%; height: 100%;transition: .7s; box-sizing: border-box;opacity: .87; }
.pa::before { left: 0; top: 0; content: url('https://642303.freep.cn/642303/za/8l.png');}
.pa::after { right: 0; bottom: 0; content: url('https://642303.freep.cn/642303/za/8r.png');}
.pa:hover::before { left: -101px; transform: rotate(1deg); opacity: .99; }
.pa:hover::after { right: -100px; transform: rotate(3deg); opacity: .99; }
.player { position: relative;cursor: pointer; top:60px; left:36px;width: 200px; height: 200px; z-index: 2; opacity: .99;mix-blend-mode: screen;animation: rot 10s linear infinite var(--state); }
.vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: color-dodge; }
.vid:nth-of-type(1) { position: absolute;left: 0px; top: 0px; object-fit: cover; mix-blend-mode: screen; filter: blur(8px) opacity(.20);transform: rotateX(180deg);}
.vid:nth-of-type(2) { width: 320px; height: 320px; right: 683px; top: 66px; border-radius: 50%; box-shadow: 0 0 10px Salmon; mix-blend-mode: unset; cursor: pointer; transition: .6s;filter:opacity(.89);}
.vid:nth-of-type(2):hover { transform: scale(1.0); }
@keyframes shake { to { inset: -20px; } }
.wave { position: absolute; left: 480px; top: 590px; mix-blend-mode: screen; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="ma">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2061739" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2629112/00/02/33/5b570ae2b38f3.mp4" loop muted disablePictureinPicture></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2432605/00/01/90/5b4e1a583cb59.mp4" autoplay loop muted disablePictureinPicture></video>
<img class="pic" src="" alt="" />
<img class="wave" src="0" alt="" />
<div class="pa"><img id="player" class="player" alt="" src="https://642303.freep.cn/642303/za/QQ%E5%9B%BE%E7%89%8720240602143308.gif" /></div>
</div>
<script>
(function() {
const paNode = document.querySelector('.pa');
const paData = [];
paData.forEach((e,k) => {
let paClone = paNode.cloneNode(true);
let btn = paClone.querySelector('#player');
btn.id = 'player' + k;
btn.style.width = e + 'px';
btn.onclick = () => player.click();
paClone.style.cssText += `left: ${e}px; top: ${e}px; filter: hue-rotate(${e}deg);`;
ma.appendChild(paClone);
});
aud.onplaying = aud.onpause = () => {
let vids = document.querySelectorAll('.vid'), players = document.querySelectorAll('.player');
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
ma.style.setProperty('--state', aud.paused ? 'paused' : 'running');
players.forEach(player => player.title = ['点击暂停','点击播放'][+aud.paused]);
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
<script>
let sFile = document.createElement('script');
sFile.src = 'https://638183.freep.cn/638183/web/api/lrc.js';
sFile.charset = 'utf-8';
document.head.appendChild(sFile);
sFile.onload = () => {
LRC({
papa: '#ma ',
lrcAr: geci,
btn: '.player',
lrc_css: 'left: 50%; transform: translate(-50%); bottom: 20px; --bg: linear-gradient(rgba(250,250,250,.25),rgba(240,128,128,.65)); opacity: .5;font-size: 32px;color: #fff;',
});
};
let geci = [
[-1,"单曲：Immortal",6],
,
,
,
,
];
</script>
@马黑黑 白老师来瞧一瞧这个开裂效果。。。 老师来这里救个命 。。。{:4_170:}
class="pa" 的元素是绝对定位，它的尺寸未设置，由里面的不定位的图片大小决定它的大小。而你使用的变换方式是宽度变更。
根据图片等因素，伪元素的变换方法可以是 left 和 right，辅之以 transform: rotate(角度），可以达到更大幅度的开合效果，庄严而大气。
也就是我不能用宽度改变，而是用LEFT来改变。 南无月 发表于 2024-6-2 18:31
老师来这里救个命 。。。
class="pa" 的元素是绝对定位，它的尺寸未设置，由里面的不定位的图片 ...
一不小心弄丢了数据，现在改成和你网站一样的。 马黑黑 发表于 2024-6-2 18:37
一不小心弄丢了数据，现在改成和你网站一样的。
{:4_199:}
太好看了，就是要这个效果。
不过我觉得壳开太大了，里面的视频边缘太明显，
现在改回去一小丢丢。行不行呢 马黑黑 发表于 2024-6-2 18:37
一不小心弄丢了数据，现在改成和你网站一样的。
{:4_187:}{:4_191:}{:4_190:}
给老师送花上茶上酒，上满汉全席。。
太开心 了，这个真的好看。。{:4_170:} 月儿这个厉害了，大气磅礴，还把开裂的边框用图图替代了，太棒了{:4_199:} 这个也是人类史的发展吧，穿越血与火的洗礼，勇敢向前{:4_187:} 这个开裂小图还是别样的太极图呢，头一次看到这样的太极。
开裂后能看见里面的火，月儿的构思太奇特了{:4_199:} 南无月 发表于 2024-6-2 18:47
给老师送花上茶上酒，上满汉全席。。
太开心 了，这个真的好看。。{:4_17 ...
可以随意一点的 不朽的行进历程，不朽的人类发展史，都在月儿的帖子里被展现在眼前。
很引人深思的作品{:4_199:} 南无月 发表于 2024-6-2 18:47
给老师送花上茶上酒，上满汉全席。。
太开心 了，这个真的好看。。{:4_17 ...
然后你那个 <br><br><br><br><br><br><br><br><br><br><br><br> 是可以不要的，我们就用
margin: 100px 0 40px calc(...);
定位帖子 南无月 发表于 2024-6-2 18:45
太好看了，就是要这个效果。
不过我觉得壳开太大了，里面的视频边缘太明显，
现在改回去一 ...
行 马黑黑 发表于 2024-6-2 19:41
行
我在网站里把外壳全部隐去，那银河系小播像是掉进黑洞里似的。。烈焰燃烧，这效果也很好看。。{:4_170:} 马黑黑 发表于 2024-6-2 19:33
然后你那个是可以不要的，我们就用
margin: 100px 0 40px calc(...);
好哒，40PX就是代替了它对吧。。我去删了。。{:4_170:}
我好象一直晕着用的
红影 发表于 2024-6-2 19:28
月儿这个厉害了，大气磅礴，还把开裂的边框用图图替代了，太棒了
那框开了里面不知道放点啥，就想变成图。
原来是用莲花，切得太整齐了并不好看，后来改成这个太极图。。{:4_173:} 红影 发表于 2024-6-2 19:29
这个也是人类史的发展吧，穿越血与火的洗礼，勇敢向前
做贴时候想的是银河系黑洞宇宙和战争，人类在观看{:4_170:} 红影 发表于 2024-6-2 19:31
这个开裂小图还是别样的太极图呢，头一次看到这样的太极。
开裂后能看见里面的火，月儿的构思太奇特了{:4_ ...
太极挡住一切，还地球和平与美好。哈哈。。
被你说得要想一番，
其实做的时候真的没想那么多。{:4_170:} 马黑黑 发表于 2024-6-2 19:31
可以随意一点的
就是很随意啊，哈哈，主打一个开心，就乱上。{:4_170:} 红影 发表于 2024-6-2 19:32
不朽的行进历程，不朽的人类发展史，都在月儿的帖子里被展现在眼前。
很引人深思的作品
音乐开头是找的关于星际战争的。
结果这曲子经典就拿来用了。。
然后才取的名字{:4_173:}