【黑师代码】一生一念（学习黑师《一切如常》光束效果及《浮光》多图旋转效果）
本帖最后由 南无月 于 2024-2-20 17:38 编辑 <br /><br /><style>#papa {
margin: 130px 0 30px calc(50% - 931px);
width:1700px;
height: 900px;
background: url('https://pic.imgdb.cn/item/65ace836871b83018a287c44.webp') no-repeat center/cover;
box-shadow: 4px 4px 16px #000;
overflow: hidden;
z-index: 1;
position: relative;
display: grid;
place-items: center;
}
#papa::before { position: absolute; content: ''; inset: 0; transform-origin: 580px 60px; background: var(--bg); transform: scale(1) rotate(0); filter: brightness(.9); animation: flash 2s linear infinite alternate var(--state); }
#mplayer {
display: grid;
place-items: center;
position: absolute;
width: 500px;
height: 500px;、
top:20px;
z-index: 10;
cursor: pointer;
}
.doll {
position: absolute;
border-radius: 23px;
opacity: .75;
background: url('https://pic.imgdb.cn/item/65ac9cab871b83018a0b3d9f.png') no-repeat center/cover ;
animation: rot var(--duration) var(--delay) infinite linear var(--state);
top:30px;
}
#vid {
position: absolute;
width: 100%;
height: 110%;
top: -80px;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
opacity: .60;
}
@keyframes flash { to { transform: scale(2) rotate(10deg); filter: brightness(2); } }
@keyframes rot {
to { transform: rotate(var(--deg)); }
}
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2118161413" autoplay loop></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/06/15/615d34aa3bead.mp4" loop muted></video>
<div id="mplayer" title="播放&暂停"></div>
</div>
<script>
(function() {
var bgstrAr = ['conic-gradient(at 580px 60px'];
Array.from({length: all=12}).forEach((item,key) => {
bgstrAr.push([`transparent ${key*360/all}deg,rgba(200,100,100,.1) ${key*360/all + 5}deg,transparent ${key*360/all + 10}deg`]);
});
papa.style.setProperty('--bg', bgstrAr.join(','));
})();
</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: '#papa',
lrcAr: geci,
btn: '#mplayer',
lrc_css: 'left: 50%; transform: translate(-50%); bottom: 10px;--bg: linear-gradient(rgba(250,250,250,.25),rgba( 178,34,34,.65)); color: #fff;',
});
};
let geci = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
var setSize = (ww) => Math.sqrt(2 * Math.pow(ww,2));
var size = setSize(mplayer.offsetWidth / 2);
[...new Array(9).keys()].forEach(key => {
var item = document.createElement('div');
item.className = 'doll';
var deg = key % 2 == 0 ? -360 : 360;
item.style.cssText += `
width: ${size}px;
height: ${size}px;
background-color: transparent;
--duration: ${Math.random() * 10 + 10}s;
--delay: ${Math.random() *-2}s;
--deg: ${deg}deg;
`;
mplayer.appendChild(item);
size = setSize(size / 1.8);
});
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
function mState() {
aud.paused
? (papa.style.setProperty('--state', 'paused'), vid.pause(), mplayer.title = '播放')
: (papa.style.setProperty('--state','running'), vid.play(), mplayer.title = '暂停');
}
</script>
<Br><Br><Br><Br><Br><Br><Br><Br><Br>
{:4_173:}今天这个贴子光束效果真心不错，拿来用用。。@马黑黑 老师来瞧一眼。。 南无月 发表于 2024-2-20 17:29
今天这个贴子光束效果真心不错，拿来用用。。@马黑黑 老师来瞧一眼。。
矮油，速度肿么介么快？
加了其他效果，图片也是打磨的杠杠滴。赞赞赞 马黑黑 发表于 2024-2-20 17:53
矮油，速度肿么介么快？
加了其他效果，图片也是打磨的杠杠滴。赞赞赞
{:4_173:}这个图加光束，我也觉得挺满意的。。老师你闲的时候瞧瞧多少废码。。。 马黑黑 发表于 2024-2-20 17:53
矮油，速度肿么介么快？
加了其他效果，图片也是打磨的杠杠滴。赞赞赞
黑师速度呗，一天一贴，快跟不上了。。{:4_173:} 南无月 发表于 2024-2-20 18:02
这个图加光束，我也觉得挺满意的。。老师你闲的时候瞧瞧多少废码。。。
这个可能没空瞧 南无月 发表于 2024-2-20 18:03
黑师速度呗，一天一贴，快跟不上了。。
我都做简单的帖子 月儿好漂亮的制作，底图和字体都那么美，播放器按钮的设计也好漂亮。
还有光束效果和视频的加持，这个帖子太完美了{:4_199:} 马黑黑 发表于 2024-2-20 18:03
这个可能没空瞧
早猜到了{:5_117:}。我就是白说一下。。 马黑黑 发表于 2024-2-20 18:03
我都做简单的帖子
新效果层出不穷。。。你做一个贴一支烟功夫行不行？两支烟呢？{:5_117:} 歌曲也好听，看到这个按钮，想起黑黑的那个不同方向转动的按钮了，只是月儿的设计更迷幻，真的太美了{:4_199:} 画面中的人物也好美，好喜欢{:4_187:} 红影 发表于 2024-2-20 18:18
月儿好漂亮的制作，底图和字体都那么美，播放器按钮的设计也好漂亮。
还有光束效果和视频的加持，这个帖子 ...
哎，影子你的回复我太爱看了，每次都全面夸{:4_187:} 红影 发表于 2024-2-20 18:20
歌曲也好听，看到这个按钮，想起黑黑的那个不同方向转动的按钮了，只是月儿的设计更迷幻，真的太美了{:4_19 ...
这个就是浮光贴子的效果，之前看贴数不出几层，跟贴之后才知道有九层。{:4_204:} 红影 发表于 2024-2-20 18:22
画面中的人物也好美，好喜欢
嗯嗯，同感，这个素材人物我也十分喜欢。。。{:4_204:} 醉美水芙蓉 发表于 2024-2-20 18:59
欣赏月儿带来的精彩！
水妞来了，开心，感谢支持呀。 南无月 发表于 2024-2-20 18:58
哎，影子你的回复我太爱看了，每次都全面夸
主要是月儿做得全方位完美啊{:4_199:} 南无月 发表于 2024-2-20 18:59
这个就是浮光贴子的效果，之前看贴数不出几层，跟贴之后才知道有九层。
月儿把黑黑的制作发扬光大了呢，这个按钮好美啊{:4_187:} 南无月 发表于 2024-2-20 18:59
嗯嗯，同感，这个素材人物我也十分喜欢。。。
咱们的感觉一样呢，这样的美人真的太美了{:4_204:}