【黑师代码】单依纯-不如见一面（学习黑师《2024223希望》效果）
<style>#mydiv {
margin:120px 0 0 calc(50% - 831px);
width: 1500px;
height: 800px;
background: url('https://pic.imgdb.cn/item/65c8e2829f345e8d03cb6492.webp') no-repeat center/cover;
overflow: hidden;
display: grid; /* 网格布局 : 配合下句 */
place-items: center; /* 约束子元素绝对居中 */
position: relative; /* 相对定位 : 为绝对定位的子元素提供参照 */
}
.vid {
position: absolute;
width: 100%;
height: calc(100% + 64px);
bottom: -64px;
object-fit: cover;
opacity: .2;
mix-blend-mode: screen;
pointer-events: none;
}
#mypic {
position: absolute;
right: 520px;
top: 630px;
width: 103px;
height: 81px;
filter: opacity(.75) hue-rotate(60deg) invert(80%);
transition: filter 1s;
cursor: pointer;
filter: drop-shadow(0 0 8px yellow);
animation: rot 5s infinite linear var(--state);
}
#mypic:hover { filter: unset; }
@keyframes rot {
to { transform: rotate(1turn); }
}
</style>
<div id="mydiv">
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2024/02/10/c9965ace1f3a79b8221db2c0b2d7f4a1.mp3" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1c8f6f60d76.mp4" loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/15653652/00/79/55/60c1c62b9766e.mp4" loop muted></video>
<img id="mypic" src="https://pic.imgdb.cn/item/65c8d5039f345e8d03927591.png" alt="" />
</div>
<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: '#mydiv',
lrcAr: geci,
btn: '#mypic',
lrc_css: 'left: 50%; transform: translate(-50%);--bg: linear-gradient(rgba(250,250,250,.25),rgba(139,69,19.65)); position: absolute; bottom: 20px; font: bold 1.8em sans-serif; color: #F0F8FF;',
});
};
let geci= [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
(function() {
let mState = () => {
aud.paused ? (mypic.style.setProperty('--state','paused'), vid.pause()) : (mypic.style.setProperty('--state','running'), vid.play());
};
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
mypic.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>
<br><br><br><br><br>
春晚过后，这首歌火了。。{:4_173:} 把这文字弄出来来做播放器按钮，这个有趣{:4_199:} 这扇凭空而立的门很有寓意呢，也是一扇心门吧，打开它，就可以让阳光透进来{:4_187:} 仔细看了们，没装密码锁 红影 发表于 2024-2-26 20:57
把这文字弄出来来做播放器按钮，这个有趣
别的图也找不到合适的，就用这个大一点的字了。{:4_173:} 红影 发表于 2024-2-26 20:58
这扇凭空而立的门很有寓意呢，也是一扇心门吧，打开它，就可以让阳光透进来
现在还是被图折腾的阶段，做到哪算哪，顾不上什么意思的{:4_173:} 马黑黑 发表于 2024-2-26 21:24
仔细看了们，没装密码锁
{:4_170:}不是所有的门都有锁。。。这个是任意门。。 南无月 发表于 2024-2-26 21:48
别的图也找不到合适的，就用这个大一点的字了。
月儿的小脑筋非常灵活{:4_199:} 南无月 发表于 2024-2-26 21:49
现在还是被图折腾的阶段，做到哪算哪，顾不上什么意思的
这个很有趣，构思很独特{:4_187:} 南无月 发表于 2024-2-26 21:51
不是所有的门都有锁。。。这个是任意门。。
我还以为是随意门 欣赏月儿的精美图图{:4_171:} 还没有看过黑黑的希望教程，这里月儿已经做出来了，速度的{:4_178:} 感谢月儿的精彩分享，小辣椒欣赏加学习{:4_171:} 马黑黑 发表于 2024-2-26 23:49
我还以为是随意门
{:4_191:}敬老师一杯，我干杯，你随意 红影 发表于 2024-2-26 22:56
月儿的小脑筋非常灵活
{:4_173:}又要进入互夸循环了么。。。十分感谢影子一直以来的鼓励和支持。。 红影 发表于 2024-2-26 22:57
这个很有趣，构思很独特
{:4_170:}这个贴放通常的小播图片不合适，就随意找个字当图 马黑黑 发表于 2024-2-26 23:49
我还以为是随意门
这个门这么有意思么。我做图的时候只看这个背景怪好看的。 小辣椒 发表于 2024-2-27 17:40
欣赏月儿的精美图图
小辣椒你来了真是开心呀{:4_187:} 小辣椒 发表于 2024-2-27 17:42
还没有看过黑黑的希望教程，这里月儿已经做出来了，速度的
这个希望老师前不久出的。。十分好看。。{:4_187:}