绿叶清舟 发表于 2025-1-10 21:05

入画江南


<style>
        #mydiv { margin: 30px 0 30px calc(50% - 723px); width:1280px; height: 720px; background: #6a9697 url('https://pic1.imgdb.cn/item/67811643d0e0a243d4f31a44.jpg')no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; position: relative; --state: running; }
        #msvg { position: absolute; left: 55%; top: 20%; cursor: pointer; animation: rot 10s linear infinite var(--state); }
        #msvg:hover line { transition: 1s; stroke: orange; }
        #vid { position: absolute; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; opacity: .8;}
        #fsbtn { position: absolute; left: 50%; bottom: 15px; color: white; padding: 4px 6px; border: 2px solid snow; 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=2137226454" autoplay loop></audio>
        <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/16/14/34/video63661b6a021fc.mp4" autoplay loop muted></video>
        <svg id="msvg" width="200" height="200" viewBox="-100 -100 200 200"></svg>
        <span id="fsbtn"></span>
</div>

<scripttype="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr('msvg');
dr.defs('defs');
dr.g('lines').addTo('defs');
dr.line(-40, 0, -20, 0, '#426e6f', 5, 'round').addTo('lines');
dr.line(-40, 0, 40, 0, '#426e6f', '2').addTo('lines');
dr.line(20, 0, 40, 0, '#426e6f', 5, 'round').addTo('lines');
var all = 6;
Array(all).fill('').forEach( (_,key) => dr.use('#lines').transform(`rotate(${180 / all * key})`) );

msvg.onclick = () => {
        msvg.style.setProperty('--state', ['paused','running'][+aud.paused]);
        aud.paused ? (aud.play(), vid.play()) : (aud.pause(), vid.pause());
};

fscreen.fs('mydiv', 'fsbtn');

aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
</script>

梦油 发表于 2025-1-10 21:08

也许我是生活在北方的缘故，我很最喜欢江南的生活。

愤怒的葡萄 发表于 2025-1-10 21:16

有点水墨画的风格，音乐也挺好听的。

小辣椒 发表于 2025-1-10 21:47

漂亮，同色系的背景图图和播放器，我最喜欢这个效果了{:4_178:}

小辣椒 发表于 2025-1-10 21:48

江南水乡美景，好美，音乐也是配的好

红影 发表于 2025-1-10 21:48

清舟的制作好美，真的像一幅水墨画一般，字体设计也好美{:4_199:}

小辣椒 发表于 2025-1-10 21:49

欣赏清舟的精彩制作

红影 发表于 2025-1-10 21:50

小播也调得好美，在清舟的帖子里徜徉，满是美的享受{:4_199:}

杨帆 发表于 2025-1-10 23:49

清新淡雅，美感的交响曲，谢谢清舟精彩分享{:4_204:}

起个网名好难 发表于 2025-1-11 07:50

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

梦江南 发表于 2025-1-11 08:21

好一幅优美清新的江南水乡水墨画，音乐也好听。棒棒哒！{:4_187:}

绿叶清舟 发表于 2025-1-14 21:13

梦油 发表于 2025-1-10 21:08
也许我是生活在北方的缘故，我很最喜欢江南的生活。

江南比北方要暖一些了

绿叶清舟 发表于 2025-1-14 21:14

梦江南 发表于 2025-1-11 08:21
好一幅优美清新的江南水乡水墨画，音乐也好听。棒棒哒！

谢谢江南，晚上好

绿叶清舟 发表于 2025-1-14 21:14

杨帆 发表于 2025-1-10 23:49
清新淡雅，美感的交响曲，谢谢清舟精彩分享

杨帆客气了，晚上好

绿叶清舟 发表于 2025-1-14 21:15

红影 发表于 2025-1-10 21:48
清舟的制作好美，真的像一幅水墨画一般，字体设计也好美

字体抠来的只是处理了一下

绿叶清舟 发表于 2025-1-14 21:16

小辣椒 发表于 2025-1-10 21:49
欣赏清舟的精彩制作

谢谢辣椒，图上取了个颜色的{:4_189:}

绿叶清舟 发表于 2025-1-14 21:17

愤怒的葡萄 发表于 2025-1-10 21:16
有点水墨画的风格，音乐也挺好听的。

是啊找的就是这类的素材了

红影 发表于 2025-1-14 22:25

绿叶清舟 发表于 2025-1-14 21:15
字体抠来的只是处理了一下

字体的色彩也跟背景很相符呢，还加了同色系的小播，就更美了{:4_187:}

梦油 发表于 2025-1-15 14:41

绿叶清舟 发表于 2025-1-14 21:13
江南比北方要暖一些了

更重要的还是空气湿润。

小辣椒 发表于 2025-1-15 20:35

绿叶清舟 发表于 2025-1-14 21:16
谢谢辣椒，图上取了个颜色的

这种同色系制作我最喜欢了{:4_189:}
页: [1] 2
查看完整版本: 入画江南