梦江南 发表于 2024-11-2 18:54

雁南飞 学习黑黑老师Atlas代码


<style>
        #mydiv { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/6725fe06d29ded1a8c923cd4.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; position: relative; --state: running; border-radius:32px;}
        #msvg { position: absolute; left: calc(50% - 100px); top: 40px; cursor: pointer; animation: rot 8s linear infinite var(--state); }
        #msvg ellipse { transition: .5s; }
        #msvg:hover ellipse { ry: 30; }
        #vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; -webkit-mask: linear-gradient(transparent 10%, red 30%, red 0); pointer-events: none; }
        #fsbtn { position: absolute; left: 48%; bottom: 20px; color: yellow; background: steelblue; padding: 4px 6px; border: 2px solid yellow; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; }
        @keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=238687" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/2475824/00/01/59/5b46b977d9e77.mp4" autoplay loop muted></video>
        <svg id="msvg" width="200" height="200"></svg>
        <span id="fsbtn"></span>
</div>

<scripttype="module">
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js/svgdr.js';
document.body.appendChild(sc);

sc.onload = () => {
        var dr = _dr('#msvg');
        dr.defs('defs');
        dr.g('g1').addTo('defs');
        dr.ellipse(100,100,50,25,'none','var(--color)',6).addTo('g1');
        var total = 8;
        Array(total).fill('').forEach( (_, k) => {
                var color = `#${Math.random().toString(16).substring(2,8)}`;
                dr.use('#g1').transform(`rotate(${360/total*k} 100 100) translate(40)`).style(`--color: ${color};`);
        });
        msvg.onclick = () => {
                msvg.style.setProperty('--state', ['paused','running'][+aud.paused]);
                aud.paused ? (aud.play(), vid.play()) : (aud.pause(), vid.pause());
        };
};

import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
fscreen.fs('mydiv', 'fsbtn');
aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
</script>

起个网名好难 发表于 2024-11-2 19:10

https://cccimg.com/view.php/e0894c0da7b69368594ef711c9a07755.webp

小文 发表于 2024-11-2 20:41

好美！

红影 发表于 2024-11-2 20:59

江南把视频换了，更符合雁南飞的氛围了。
很漂亮的制作，欣赏江南好帖{:4_199:}

梦油 发表于 2024-11-2 21:13

欣赏佳作，问候梦江南。

朵拉 发表于 2024-11-2 21:18

问好梦江南老师，好漂亮的效果，欣赏了{:4_204:}

小辣椒 发表于 2024-11-2 23:23

哇塞，你们个个完成作业都这么速度的，小辣椒拖拉机了{:4_198:}

小辣椒 发表于 2024-11-2 23:24

深色的背景配白的飘絮，对比度特别好，赞的!{:4_178:}

小辣椒 发表于 2024-11-2 23:25

歌也是好听，谢谢梦江南的精彩分享{:4_171:}

梦江南 发表于 2024-11-3 08:49

起个网名好难 发表于 2024-11-2 19:10


谢谢老师沙发支持。早上好！

梦江南 发表于 2024-11-3 08:50

小文 发表于 2024-11-2 20:41
好美！

谢谢小文老师支持，早上好！

梦江南 发表于 2024-11-3 08:50

红影 发表于 2024-11-2 20:59
江南把视频换了，更符合雁南飞的氛围了。
很漂亮的制作，欣赏江南好帖

谢谢影子支持鼓励，早上好！

梦江南 发表于 2024-11-3 08:51

朵拉 发表于 2024-11-2 21:18
问好梦江南老师，好漂亮的效果，欣赏了

谢谢朵拉老师支持，早上好！

梦江南 发表于 2024-11-3 08:56

小辣椒 发表于 2024-11-2 23:23
哇塞，你们个个完成作业都这么速度的，小辣椒拖拉机了

早上好，您的作业同我不一样的，我只是简单的套用老师的代码，您已经是代码高手级别了！{:4_204:}

梦江南 发表于 2024-11-3 08:57

小辣椒 发表于 2024-11-2 23:24
深色的背景配白的飘絮，对比度特别好，赞的!

您的点评对我以后做作业有很大的帮助。谢谢！

梦江南 发表于 2024-11-3 08:59

小辣椒 发表于 2024-11-2 23:25
歌也是好听，谢谢梦江南的精彩分享

谢谢，谢谢！

红影 发表于 2024-11-3 10:56

梦江南 发表于 2024-11-3 08:50
谢谢影子支持鼓励，早上好！

这个帖子很符合秋天场景呢，秋天来了，大雁南飞，春天再返。
页: [1]
查看完整版本: 雁南飞 学习黑黑老师Atlas代码