飞了（学习黑师遗失的风景视频效果）
<style>#papa {
margin: 80px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: gray;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
#papa::after {
position: absolute;
content: '';
right: 0;
top: 0;
width: 130px;
height: 80px;
background: linear-gradient(40deg, #eee 40%, #898989 50%);
filter: drop-shadow(0px 0px 8px #444);
}
#canv {
position: absolute;
display: block;
opacity: 1;
animation: opa 20s infinite alternate linear;
}
#vid { display: none; }
#mplayer {
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
border: 2px solid var(--bd);
border-radius: 50%;
box-shadow: 0 0 10px var(--sd);
transition: .7s;
cursor: pointer;
display: grid;
place-items: center;
z-index: 2;
--play: 1; --pause: 0; --bd: #435D03; --sd: white;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
border-style: solid;
border-color: var(--bd);
transition: .4s;
}
#mplayer::before {
width: 0;
height: 0;
left: 10px;
border-width: 10px 12px;
border-color: transparent transparent transparent var(--bd);
opacity: var(--play);
}
#mplayer::after {
width: 2px;
height: 16px;
border-width: 0 4px 0 4px;
opacity: var(--pause);
}
#mplayer:hover { box-shadow: 0 0 10px var(--sd), 0 0 10px var(--sd) inset; }</style>
<div id="papa">
<canvas id="canv"></canvas>
<div id="mplayer">
</div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1366016806" loop="" autoplay=""></audio><video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/01/65/5b4776cd5d5e8.mp4" poster="https://s1.ax1x.com/2023/03/27/ppyFBi8.jpg" loop="" muted=""></video>
<script>(function () {
let ctx = canv.getContext('2d'), pic = new Image();
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
pic.src = vid.poster;
pic.onload = () => ctx.drawImage(pic,0,0,ww,hh);
let mState = () => aud.paused ? vid.pause() : vid.play();
let loop = () => {ctx.drawImage(vid, 0, 0, ww, hh);if(!vid.paused) {requestAnimationFrame(loop);return;}};
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
})();
</script> @马黑黑 飞一个瞧瞧 雨中悄然 发表于 2023-3-27 18:22
@马黑黑 飞一个瞧瞧
这是坐飞机来吃碗螺蛳粉的节奏{:4_170:} 悄然好创意。小小遥控器能操控大大的飞机，赞一个{:4_187:} 马黑黑 发表于 2023-3-27 19:09
这是坐飞机来吃碗螺蛳粉的节奏
臭臭的螺蛳粉{:4_181:} 马黑黑 发表于 2023-3-27 19:09
这是坐飞机来吃碗螺蛳粉的节奏
明天北方出差。螺蛳粉么，挺出名的没吃过正宗的{:4_173:} 千羽 发表于 2023-3-27 20:32
悄然好创意。小小遥控器能操控大大的飞机，赞一个
{:4_187:}抄作业都行的，千羽也试一个 千羽 发表于 2023-3-27 20:33
臭臭的螺蛳粉
{:4_170:}看样子是吃过的 花飞飞 发表于 2023-3-27 20:41
抄作业都行的，千羽也试一个
问好花飞飞新朋友。好的有空我就来一个{:4_187:} 花飞飞 发表于 2023-3-27 20:41
看样子是吃过的
是{:4_173:} 千羽 发表于 2023-3-27 20:43
问好花飞飞新朋友。好的有空我就来一个
{:4_170:}你呀，昨天还去我网站逛了一圈。 千羽 发表于 2023-3-27 20:44
是
小迷糊，我先撤了啊{:4_183:} 花飞飞 发表于 2023-3-27 20:46
你呀，昨天还去我网站逛了一圈。
有似曾相识的感觉{:4_173:} 花飞飞 发表于 2023-3-27 20:46
小迷糊，我先撤了啊
我是太迷糊啊，因为这还有笑话呢{:4_173:} 千羽 发表于 2023-3-27 20:49
有似曾相识的感觉
疑似故人来，那就对了。 千羽 发表于 2023-3-27 20:51
我是太迷糊啊，因为这还有笑话呢
我慢点走，竖耳朵听听{:4_181:} 花飞飞 发表于 2023-3-27 20:51
疑似故人来，那就对了。
嗯，记得，但没多想想{:4_173:} 花飞飞 发表于 2023-3-27 20:52
我慢点走，竖耳朵听听
耳朵收回去吧，俺{:4_173:}不好意思说 千羽 发表于 2023-3-27 20:53
嗯，记得，但没多想想
这个号用的极少，不认得正常的。{:4_181:} 千羽 发表于 2023-3-27 20:54
耳朵收回去吧，俺不好意思说
以后再说哈，我得下了。千羽晚安