论坛 › 动画音画 › 雪山

马黑黑 发表于 2024-5-28 18:03

雪山

<style>
        #papa { margin: 20px 0 20px calc(50% - 721px) ; width: 1280px; height: 800px; background: url('https://638183.freep.cn/638183/t24/2/snowmountain.jpg') no-repeat center/cover; box-shadow: 2px 2px 5px #333; overflow: hidden; z-index: 1; position: relative; }
        .mama { position: absolute; left: 300px; top: 20px; width: 200px; height: 200px; cursor: pointer; animation: rot 8s linear infinite var(--state); }
        .mama:nth-of-type(2) { left: 400px; }
        e-son { position: absolute; left: calc(50% - 15px); top: 18px; width: 30px; height: 80px; border-radius: 100% 0; border: 1px solid gray; transform-origin: 50% 100%; transform: rotate(var(--deg)) translateY(-10px); background: hsla(var(--bg), 100%, 50%, .8); }
        #vid { position: absolute; bottom: 0; width: 100%; height: calc(100% + 70px); object-fit: cover; mix-blend-mode: screen; }
        @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=31563720" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2402760/00/01/64/5b4744b57baf0.mp4" loop muted></video>
        <div class="mama" id="ma"></div>
</div>

<script>
(function() {
        Array.from({length: 6}).forEach((e,k) => {
                e = document.createElement('e-son');
                e.style.cssText += `--deg: ${60 * k}deg; --bg: ${Math.round(Math.random() * 360)};`;
                ma.appendChild(e);
        });
        var node = document.getElementById('ma');
        var clone = node.cloneNode(true);
        clone.id = 'ma1';
        clone.onclick = () => ma.click();
        clone.style.cssText += 'left: 800px; top: 160px; filter: hue-rotate(200deg);';
        papa.appendChild(clone);
        aud.onplaying = aud.onpause = () => {
                papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
                aud.paused ? vid.pause() : vid.play();
        };
        ma.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2024-5-28 18:03

占位

南无月 发表于 2024-5-28 19:06

蓝白清爽宜人，看着就舒服之极。。{:4_199:}
小播每次刷新色彩都不一样，两个小播各美各的。。

南无月 发表于 2024-5-28 19:07

音乐空灵，轻盈，有宁静之感。。{:4_199:}跟贴子很搭，怪好听的

马黑黑 发表于 2024-5-28 19:30

南无月 发表于 2024-5-28 19:07
音乐空灵，轻盈，有宁静之感。。跟贴子很搭，怪好听的

{:4_191:}

南无月 发表于 2024-5-28 19:44

马黑黑 发表于 2024-5-28 19:30


刚喝完了吧{:4_170:}

马黑黑 发表于 2024-5-28 20:21

南无月 发表于 2024-5-28 19:44
刚喝完了吧

好快的，军人的速度，吃饭15分钟、喝酒30分钟

红影 发表于 2024-5-28 21:13

入目是清凉的雪山，雪花儿飘飘摇摇，还有两个艳丽的小播，漂亮{:4_199:}

红影 发表于 2024-5-28 21:14

这个厉害了，两个小播都能点击暂停，非常不容易，这和图片小播不同，毕竟是绘制的小播呢{:4_187:}

红影 发表于 2024-5-28 21:15

位置仍然是隔60度一个，颜色不是这样的相隔了，而是随机色，这个构思巧妙{:4_199:}

小辣椒 发表于 2024-5-28 21:39

黑黑辛苦，又有新的产品出来了{:4_173:}

马黑黑 发表于 2024-5-28 22:26

小辣椒 发表于 2024-5-28 21:39
黑黑辛苦，又有新的产品出来了

{:4_170:}

马黑黑 发表于 2024-5-28 22:26

红影 发表于 2024-5-28 21:15
位置仍然是隔60度一个，颜色不是这样的相隔了，而是随机色，这个构思巧妙

还好

马黑黑 发表于 2024-5-28 22:27

红影 发表于 2024-5-28 21:13
入目是清凉的雪山，雪花儿飘飘摇摇，还有两个艳丽的小播，漂亮

还不算难看呢

马黑黑 发表于 2024-5-28 22:28

红影 发表于 2024-5-28 21:14
这个厉害了，两个小播都能点击暂停，非常不容易，这和图片小播不同，毕竟是绘制的小播呢

多一个JS语句。cloneNode 不能克隆CSS属性以外的东东，我们可以用JS来解决

执著 发表于 2024-5-28 22:35

画面精美，色彩鲜明亮丽，音乐动听！老师高效{:4_204:}不知道这是哪个雪山，还没有真正到过雪山，早些年去九寨沟，路过一个海拔最高处，能清楚看到对面的雪山{:4_173:}

马黑黑 发表于 2024-5-28 23:22

执著 发表于 2024-5-28 22:35
画面精美，色彩鲜明亮丽，音乐动听！老师高效不知道这是哪个雪山，还没有真正到过雪山，早些年去 ...

欢迎到俺的家乡川藏高原来看雪山

红影 发表于 2024-5-28 23:33

马黑黑 发表于 2024-5-28 22:26
还好

雪山之上的两抹亮色{:4_187:}

红影 发表于 2024-5-28 23:33

马黑黑 发表于 2024-5-28 22:27
还不算难看呢

非常赏心悦目的场景{:4_187:}

红影 发表于 2024-5-28 23:34

马黑黑 发表于 2024-5-28 22:28
多一个JS语句。cloneNode 不能克隆CSS属性以外的东东，我们可以用JS来解决

看到解说帖子了，这个克隆用得好{:4_187:}

查看完整版本: 雪山