【谢师宴之一】感谢马黑黑——好酒好菜好音乐
<style>#papa {
margin:-80px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: url('https://pic.imgdb.cn/item/642918d3a682492fcc114e46.jpg') center/cover no-repeat;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#vid { display: none; }
#canv {
position: absolute;
display: block;
opacity: 1;
animation: opa 20s infinite alternate linear;
}
#mplayer {
position: absolute;
left: calc(50% - 15px);
bottom: 5px;
width: 30px;
height: 30px;
border: 2px solid DarkOrange;
border-radius: 50%;
opacity: 0;
transition: .7s;
display: grid;
place-items: center;
--disp1: 0; --disp2: 1;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
border-style: solid;
border-color: DarkOrange;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 10px;
border-width: 10px 12px;
border-color: transparent transparent transparent blue;
opacity: var(--disp1);
}
#mplayer::after {
width: 2px;
height: 20px;
border-width: 0 4px 0 4px;
opacity: var(--disp2);
}
@keyframes opa { to {opacity: 0;} }
.xiewen {/* 斜纹文本 */
position: absolute; left: 240px;bottom: -160px;
width: 760px;
height: 200px;
line-height: 200px;
font-family: '微软雅黑', '宋体';
font-size: 5rem;
font-weight: 900;
text-align: center;
background: PaleVioletred linear-gradient(45deg, transparent 45%, #eee 45%, #ccc 55%, transparent 0);
background-size: 4px 4px;
-webkit-background-clip: text;
-webkit-text-fill-color: DarkOrange;
-webkit-text-stroke: 2px #111;
z-index: 99;
}</style><div id="papa"> <canvas id="canv"></canvas> <div id="mplayer"></div></div><div class="xiewen">@马黑黑</div><audio id="aud" src="https://music.163.com/song/media/outer/url?id=1475596788" loop="" autoplay=""></audio><video id="vid" src="https://img.tukuppt.com/video_show/2418175/01/14/66/619a38e6daaaf.mp4" loop="" autoplay=""></video><script>let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {ctx.drawImage(vid, 0, 50, ww, hh, 0, 0, ww + 100, hh + 200);if(!vid.paused) {requestAnimationFrame(loop);return;}};
let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0'), vid.pause()) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());</script> @马黑黑 看看可合胃口{:4_187:} 悄然辛苦，一下子三个图图{:4_199:} 腻害辣，有吃的 有人己动筷子了，俺得加油咪西了，多吃好菜好喝酒{:4_169:} 谢师宴好丰盛啊！我也得蹭吃蹭喝，饱腹一餐！{:4_172:} 小辣椒 发表于 2023-4-2 16:10
悄然辛苦，一下子三个图图
{:4_170:}谢来谢去得谢三个回合 马黑黑 发表于 2023-4-2 16:13
腻害辣，有吃的
全辣的{:4_170:} 雨中悄然 发表于 2023-4-2 19:23
全辣的
喜欢 樵歌 发表于 2023-4-2 16:30
有人己动筷子了，俺得加油咪西了，多吃好菜好喝酒
{:4_187:}支持加油 亦是金 发表于 2023-4-2 17:44
谢师宴好丰盛啊！我也得蹭吃蹭喝，饱腹一餐！
支持一起{:4_187:} 马黑黑 发表于 2023-4-2 19:23
喜欢
啧，无辣不欢的节奏 雨中悄然 发表于 2023-4-2 19:31
啧，无辣不欢的节奏
一贯如此 雨中悄然 发表于 2023-4-2 19:23
支持加油
桌子上的俺都喜欢，这个是要加油努力光盘{:4_189:} 雨中悄然 发表于 2023-4-2 19:22
谢来谢去得谢三个回合
三个也是不嫌多{:4_170:} 真的是好菜好酒摆满桌的谢师宴呢，这个真丰盛。视频和图片切换很贴合，还有个明晃晃的艾特黑黑的标题，悄然做得有趣{:4_187:} 马黑黑 发表于 2023-4-2 19:54
一贯如此
{:4_199:}辣椒维生素多，有益身体健康。长期吃辣肤色会白 旱地水手 发表于 2023-4-3 18:59
辣椒维生素多，有益身体健康。长期吃辣肤色会白
对，黑里透白 马黑黑 发表于 2023-4-3 19:00
对，黑里透白
{:4_170:}没有这么形容的，只能白里透红 旱地水手 发表于 2023-4-3 19:01
没有这么形容的，只能白里透红
红到极致即为白。
——马克不瘟