【谢师宴之二】感谢马黑黑——那些旧时光
<style>#papa {
margin: -80px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: url('https://pic.imgdb.cn/item/64292a67a682492fcc2e452a.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;
z-index: 1;
}
#mplayer {
position: absolute;
left: calc(50% - 15px);
bottom: 5px;
width: 30px;
height: 30px;
border: 2px solid LightSteelBlue;
border-radius: 50%;
opacity: 0;
transition: .7s;
display: grid;
place-items: center;
--disp1: 0; --disp2: 1;
z-index: 1;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
border-style: solid;
border-color: LightSteelBlue;
cursor: pointer;
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 10px;
border-width: 10px 12px;
border-color: transparent transparent transparent PaleVioletred;
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;
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: GoldEnrod;
-webkit-text-stroke: 2px #111;
z-index: 2;
}
</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=3986241" loop autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/14/5e1bc0bf7964a.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>
@马黑黑 找了几张往年论坛旧图，13年开始的，还好你头像ID从来不变{:4_170:} 欣赏悄然的精彩制作{:4_171:} 旧时光都被雨水淋湿了 雨水打在上将的脸上，应找个女宾把伞打上{:4_173:} 应找个女宾把伞打上，老师被雨水淋湿了容易着凉感冒！{:4_189:} 小辣椒 发表于 2023-4-2 16:09
欣赏悄然的精彩制作
{:4_170:}小辣椒没习惯三贴 连发 马黑黑 发表于 2023-4-2 16:12
旧时光都被雨水淋湿了
搜的是粒子效果。。。。当雨淋也行 樵歌 发表于 2023-4-2 16:38
雨水打在上将的脸上，应找个女宾把伞打上
上将不怕雨 亦是金 发表于 2023-4-2 17:58
应找个女宾把伞打上，老师被雨水淋湿了容易着凉感冒！
大校抗得住{:4_170:} 雨中悄然 发表于 2023-4-2 19:26
搜的是粒子效果。。。。当雨淋也行
看着是春雨。只有春雨，才这么晶莹剔透 马黑黑 发表于 2023-4-2 19:28
看着是春雨。只有春雨，才这么晶莹剔透
粒子雨贵如油 雨中悄然 发表于 2023-4-2 19:36
粒子雨贵如油
春雨 = 粒子雨 雨中悄然 发表于 2023-4-2 19:27
上将不怕雨
那是那是，枪林弹雨中杀出来的，还怕雨么{:4_189:} 雨中悄然 发表于 2023-4-2 19:26
小辣椒没习惯三贴 连发
三帖一起发，悄然是厉害的{:4_178:} 悄然厉害，又一个新帖。哈，暴露了黑黑的大校头衔啊{:4_173:} 马黑黑 发表于 2023-4-2 19:53
春雨 = 粒子雨
春天的粒子雨。就说好看不吧 旱地水手 发表于 2023-4-3 18:58
春天的粒子雨。就说好看不吧
不好看吧不能说的{:4_170:} 马黑黑 发表于 2023-4-3 18:59
不好看吧不能说的
知道不能说就说好看也不难{:4_173:} 旱地水手 发表于 2023-4-3 19:06
知道不能说就说好看也不难
难不难说说就知道