风吹麦浪 TO：小辣椒
本帖最后由 朵拉 于 2024-8-29 23:30 编辑 <br /><br /><style>#tiezi { position: relative; left: calc(50% - 81px); transform: translate(-50%); width: 960px; height: 540px; }
#tiezi:hover #player { filter: drop-shadow(0 0 32px yellow) opacity(1); }
#vc { position: absolute; left: 0; top: 0; background: lightblue; border: 1px solid gray; box-shadow: 2px 2px 4px gray; }
#vid { opacity: 0; }
#player { position: absolute; left: 80px; top: 20px; cursor: pointer; filter: drop-shadow(0 0 16px lightblue) opacity(.5); animation: rot 8s linear infinite var(--state); transition: filter 2s; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="tiezi">
<video id="vid" src="https://img.tukuppt.com/video_show/2629112/00/02/06/5b50a1bde9559.mp4" loop muted></video>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=427609726" autoplay loop></audio>
<canvas id="vc" width="960" height="540"></canvas>
<img id="player" src="https://638183.freep.cn/638183/small/sunny.png" alt="" title="播放/暂停" />
</div>
<script>
var ctx = vc.getContext('2d');
var ww = vc.width, hh = vc.height;
var raf = null;
aud.onplaying = aud.onpause = () => {
aud.paused ? vid.pause() : vid.play();
tiezi.style.setProperty('--state', aud.paused ? 'paused' : 'running');
vDraw();
};
aud.onseeked = () => cancelAnimationFrame(raf);
var vDraw = () => {
ctx.drawImage(vid, 0, 0, ww, hh, 0, -45, ww, hh + 45);
aud.paused ? cancelAnimationFrame(raf) : raf = requestAnimationFrame(vDraw);
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
@马黑黑
老师 晚上好，学生作业 请指正哈{:4_190:} @小辣椒
小辣椒 晚上好，感谢你送的小章章，
一首风吹麦浪，望喜欢哈~~{:4_204:}{:4_185:} {:4_199:} 欣赏佳作，问候朵拉。 漂亮的制作。欣赏朵宝好帖{:4_187:} 制作的漂亮，歌好听！
朵拉 发表于 2024-8-29 23:33
@小辣椒
小辣椒 晚上好，感谢你送的小章章，
一首风吹麦浪，望喜欢哈~~
来了，谢谢朵拉，这个效果不知道是黑黑那个教程，好像我没有做过吧 谢谢朵拉的精美礼物，小辣椒后面有空抽时间还礼
再次谢谢朵拉{:4_179:} 问好老师，佳作欣赏。
页:
[1]