绿叶清舟 发表于 2024-11-23 21:01

时光邮差

<style>
        #mydiv { margin: 30px 0 30px calc(50% - 713px); width: 1280px; height: 720px; background: url('https://pic.imgdb.cn/item/6741ce3dd29ded1a8c12b417.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; position: relative; --state: running; }
        #msvg { position: absolute; left: calc(50% - 15px); top: 320px; cursor: pointer; animation: rot 10s linear infinite var(--state); }
        #msvg:hover polyline { transition: 1s; fill: #c6e8f2; stroke: #e7d2dc; }
        #vid { position: absolute; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(transparent 20%, #345660); pointer-events: none; }
        #fsbtn { position: absolute; left: 20px; bottom: 15px; color: white; background: steelblue; 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=2137662312" autoplay loop></audio>
        <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/15/12/46/video63660cee858f0.mp4" autoplay loop muted></video>
        <svg id="msvg" width="130" height="130" 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');

var tt = 15;
for(var i = 0; i < tt; i ++) {
        dr.polyline('0 0,70 0,70 -10,85 -10,85 10,70 10,70 0', '#345660', '#c6e8f2', 3).transform(`rotate(${360/tt*i}) translate(6)`);
}

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>

朵拉 发表于 2024-11-23 21:15

精彩制作，歌曲好听~~{:4_178:}

绿叶清舟 发表于 2024-11-23 21:24

朵拉 发表于 2024-11-23 21:15
精彩制作，歌曲好听~~

谢谢朵拉，晚上好

夕阳黄昏 发表于 2024-11-23 21:28

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

冬天的雨 发表于 2024-11-23 22:12

清舟这个图太漂亮了，设计感强{:4_178:}

冬天的雨 发表于 2024-11-23 22:13

你们都太厉害了，都这么优秀{:4_199:}

红影 发表于 2024-11-23 22:13

这个有趣，把这小播做成自行车前轮了啊。清舟的构思奇特{:4_173:}

红影 发表于 2024-11-23 22:16

歌名也有趣，时光邮差，邮递的是美好的时光印记吧。
图图制作太美了，邮差被放在半空，真的是运送时光的特别邮差呢。
字体设计也好漂亮。
欣赏清舟好帖{:4_187:}

醉美水芙蓉 发表于 2024-11-23 22:31

梦江南 发表于 2024-11-24 13:50

很有意思的构图，真棒！

小辣椒 发表于 2024-11-24 22:25

清舟的图图就是新颖别致，把个自行车里面加了播放器，还特别的相配{:4_189:}

小辣椒 发表于 2024-11-24 22:27

还特意用了老旧风格，小邮差是旧式的风格自行车，现在都是小红车了，怀旧型的制作，特别赞~

绿叶清舟 发表于 2024-11-25 20:12

夕阳黄昏 发表于 2024-11-23 21:28


谢谢夕阳，晚上好

绿叶清舟 发表于 2024-11-25 20:13

冬天的雨 发表于 2024-11-23 22:13
你们都太厉害了，都这么优秀

你更厉害了，只是没有时间的嘛

绿叶清舟 发表于 2024-11-25 20:15

红影 发表于 2024-11-23 22:13
这个有趣，把这小播做成自行车前轮了啊。清舟的构思奇特

看到这个播放器时就想整了， 以前听到一个一开始就有自行车铃声的歌名没记住也不知道往哪搜了，正好听到这首就做了个

绿叶清舟 发表于 2024-11-25 20:15

醉美水芙蓉 发表于 2024-11-23 22:31
清舟美女构思奇特，图图漂亮！

谢谢芙蓉支持

绿叶清舟 发表于 2024-11-25 20:16

梦江南 发表于 2024-11-24 13:50
很有意思的构图，真棒！

谢谢江南，胡思乱想来的了

绿叶清舟 发表于 2024-11-25 20:17

小辣椒 发表于 2024-11-24 22:25
清舟的图图就是新颖别致，把个自行车里面加了播放器，还特别的相配

就是发出来看了才发现，播放器颜色从自行车上取就更好了，懒得改了{:4_189:}

绿叶清舟 发表于 2024-11-25 20:17

小辣椒 发表于 2024-11-24 22:27
还特意用了老旧风格，小邮差是旧式的风格自行车，现在都是小红车了，怀旧型的制作，特别赞~

你们那红色的啊，俺这都是小黄车了

绿叶清舟 发表于 2024-11-25 20:23

红影 发表于 2024-11-23 22:16
歌名也有趣，时光邮差，邮递的是美好的时光印记吧。
图图制作太美了，邮差被放在半空，真的是运送时光的特 ...

邮差穿越来的，还没着陆呢{:4_189:}
页: [1] 2
查看完整版本: 时光邮差