棉花糖惹的祸 TO：马老师
<style>#papa {
margin: 80px 0 0 calc(50% - 593px);
width: 1042px;
height: 568px;
background: url('https://pic.imgdb.cn/item/6423f78ba682492fcc62ef37.jpg') center/cover no-repeat;
box-shadow: 3px 3px 20px #000;
overflow: hidden;
position: relative;
z-index: 1;
--state: paused;
}
#canv {
position: absolute;
display: block;
box-shadow: 3px 3px 20px #000;
position: relative;
opacity: .5;
}
#vid { display: none; }
#panda {
position: absolute;
width: 200px;
bottom: 30px;
left: 100px;
cursor: pointer;
transform: rotate(0deg);
transform-origin: 200px 140px;
animation: rot 1s infinite alternate linear var(--state);
}
@keyframes rot { to { transform: rotate(60deg); } }
</style>
<div id="papa">
<canvas id="canv"></canvas>
<img id="panda" src="https://pic.imgdb.cn/item/6423f7c9a682492fcc637a88.png" alt="" />
</div>
<video id="vid" src="http://img.tukuppt.com/video_show/2629112/00/01/88/5b4c8a819dded.mp4" autoplay loop muted></video>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=1821781438.mp3" loop autoplay></audio>
<script>
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {
ctx.drawImage(vid, 0, 0, ww, hh);
if(!vid.paused) {
requestAnimationFrame(loop);
return;
}
}
let mState = () => aud.paused ? (papa.style.setProperty('--state', 'paused'),vid.pause()) : (papa.style.setProperty('--state', 'running'),vid.play());
vid.playbackRate = 0.5;
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
panda.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script> 马老师的源码，学习玩一个{:4_170:} 这个有点长，想了解棉花糖怎么惹的祸就要听完全程的对话{:4_172:} @马黑黑
做的不好，纯抽时间学习做一个 好厉害的小姑凉，会魔法跳{:4_199:} 10000√
马黑黑 发表于 2023-3-29 17:39
10000√
谢谢马老师给的最高分{:4_170:} 冬天的雨 发表于 2023-3-29 17:43
谢谢马老师给的最高分
这是宇宙分 马黑黑 发表于 2023-3-29 17:39
好厉害的小姑凉，会魔法跳
哈哈，谢谢马老师的源码分享，先下 冬天的雨 发表于 2023-3-29 17:44
哈哈，谢谢马老师的源码分享，先下
88 哈哈，因为是音乐，原来是儿童故事的朗诵，制作也很童趣。冬小雨好可爱的制作{:4_187:} 原来小云朵是棉花糖啊，好可爱的童话故事，我竟耐心地听完了，儿童世界太可爱了{:4_173:} 马黑黑 发表于 2023-3-29 17:44
这是宇宙分
坐神15上去的{:4_170:} 红影 发表于 2023-3-29 18:59
哈哈，因为是音乐，原来是儿童故事的朗诵，制作也很童趣。冬小雨好可爱的制作
美女，音乐相符的要上传，我就直接用网易音乐了 冬天的雨 发表于 2023-3-29 19:50
坐神15上去的
那是 红影 发表于 2023-3-29 19:07
原来小云朵是棉花糖啊，好可爱的童话故事，我竟耐心地听完了，儿童世界太可爱了
不听完就不清楚结果了{:4_170:} 据说，马老师感动得哭了{:4_173:} 樵歌 发表于 2023-3-29 20:00
据说，马老师感动得哭了
老首长，马老师都久经考验的老教授的，这么容易动情{:4_189:} 冬天的雨 发表于 2023-3-29 20:03
老首长，马老师都久经考验的老教授的，这么容易动情
不动则可，一动老泪纵横的{:4_173:} 笑~~~~{:4_170:}{:4_189:}{:4_172:}