马黑黑 发表于 2023-3-23 17:59

南竹

<style>
#papa {
        margin: -80px 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t23/1/njvu.jpeg') 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: -90px;
        left: -100px;
        cursor: pointer;
        transform: rotate(90deg);
        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://638183.freep.cn/638183/t23/1/panda.png" alt="" />
</div>
<video id="vid" src="https://img.tukuppt.com/video_show/2422006/00/01/94/5b4fd395be942.mp4" autoplay loop muted></video>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=38673036.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>

雨中悄然 发表于 2023-3-23 18:11

沙发，可爱风。

马黑黑 发表于 2023-3-23 18:13

雨中悄然 发表于 2023-3-23 18:11
沙发，可爱风。

熊猫可爱

起个网名好难 发表于 2023-3-23 19:19

欣赏美帖

马黑黑 发表于 2023-3-23 19:51

起个网名好难 发表于 2023-3-23 19:19
欣赏美帖

感谢

大猫咪 发表于 2023-3-23 20:24

哈哈那只熊猫好舒服的感觉 {:5_117:} 养眼的帖，真棒！嘿嘿晚上好！

{:4_204:}{:4_199:}

千羽 发表于 2023-3-23 20:46

是雾还是风？大头熊猫在酣睡？好可爱{:4_187:}

小辣椒 发表于 2023-3-23 20:55

这小熊猫太萌萌哒了{:4_199:}

马黑黑 发表于 2023-3-23 21:21

小辣椒 发表于 2023-3-23 20:55
这小熊猫太萌萌哒了

很可耐的

小辣椒 发表于 2023-3-23 21:26

马黑黑 发表于 2023-3-23 21:21
很可耐的

黑黑太佩服你的，我都来不及回帖，你是秒回{:4_178:}

红影 发表于 2023-3-23 21:30

非常憨态可掬的大熊猫，还有漂亮的竹林和缥缈的烟气。暂停能让动态全部停止。黑黑的制作真漂亮{:4_187:}

马黑黑 发表于 2023-3-23 21:32

红影 发表于 2023-3-23 21:30
非常憨态可掬的大熊猫，还有漂亮的竹林和缥缈的烟气。暂停能让动态全部停止。黑黑的制作真漂亮

二班二班

马黑黑 发表于 2023-3-23 21:33

千羽 发表于 2023-3-23 20:46
是雾还是风？大头熊猫在酣睡？好可爱

雾气吧。俺老家的竹林，都笼罩着雾气。

马黑黑 发表于 2023-3-23 21:33

小辣椒 发表于 2023-3-23 21:26
黑黑太佩服你的，我都来不及回帖，你是秒回

俺有灌水机器

千羽 发表于 2023-3-23 21:39

马黑黑 发表于 2023-3-23 21:33
雾气吧。俺老家的竹林，都笼罩着雾气。

嗯，像雾又像风，仙气缥缈……{:4_181:}

马黑黑 发表于 2023-3-23 21:43

千羽 发表于 2023-3-23 21:39
嗯，像雾又像风，仙气缥缈……

像雾像雨又像风

千羽 发表于 2023-3-23 21:47

马黑黑 发表于 2023-3-23 21:43
像雾像雨又像风

不像雨{:4_203:}

马黑黑 发表于 2023-3-23 21:59

千羽 发表于 2023-3-23 21:47
不像雨

但有一首歌这么说的

千羽 发表于 2023-3-23 22:02

马黑黑 发表于 2023-3-23 21:59
但有一首歌这么说的

我也是想到了那歌词的{:4_173:}

马黑黑 发表于 2023-3-23 22:32

千羽 发表于 2023-3-23 22:02
我也是想到了那歌词的

同想了
页: [1] 2 3 4
查看完整版本: 南竹