绿叶清舟 发表于 2024-11-19 19:58

饿狼传说

本帖最后由 绿叶清舟 于 2024-11-19 20:00 编辑 <br /><br /><style>
        #mydiv { margin: 30px 0 30px calc(50% - 733px); width: 1280px; height: 720px; background: url('https://pic.imgdb.cn/item/673c7806d29ded1a8cdd23bd.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; position: relative; --state: running; }
        #msvg { position: absolute; left: 450px; bottom: 250px; cursor: pointer; filter: drop-shadow(-5px -5px 10px silver); animation: rot 12s linear infinite var(--state); }
        #msvg:hover { filter: grayscale(1); }
        #vid { position: absolute; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
        #fsbtn { position: absolute; left: 150px; bottom: 15px; color: #c6cbe1; padding: 2px 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=190295" autoplay loop></audio>
        <video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/07/03/10/53/43/video64a238371fe73.mp4" autoplay loop muted></video>
        <svg id="msvg" width="300" height="300"></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.mask('m1');
dr.circle(150, 150, 150, 'black').animate('animate', {
        attributeName: 'fill',
        values: 'black;#011efe;black',
        dur: '.5s',
        repeatCount: 'indefinite',
}).addTo('m1');
dr.image('https://p.upyun.com/demo/tmp/BA5ynCGu.webp', 0, 0, 300, 300).set('mask', 'url(#m1)');

msvg.onclick = () => {
        aud.paused
                ? (aud.play(), vid.play(), msvg.style.setProperty('--state', 'running'), dr.play(true))
                : (aud.pause(), vid.pause(), msvg.style.setProperty('--state', 'paused'), dr.play(false));
};
fscreen.fs('mydiv', 'fsbtn');
aud.play().catch(_ => mState());
</script>

红影 发表于 2024-11-19 21:17

这个音画制作漂亮，在这样的氛围里欣赏歌神的歌曲，感觉真好{:4_187:}

红影 发表于 2024-11-19 21:17

清舟还真找了个狼头做小播啊，这个色彩跟背景十分匹配呢{:4_199:}

红影 发表于 2024-11-19 21:19

背景里若隐若现的美女形象也很漂亮。这个粤语歌曲听不懂，要是有歌词同步就更好了{:4_173:}

樵歌 发表于 2024-11-19 21:20

赶紧给买肉肉吃。{:4_189:}

梦油 发表于 2024-11-20 09:48

背后那个女孩还真有点吓人呢。{:4_203:}

小辣椒 发表于 2024-11-20 16:35

这个是黑黑的转盘播放器效果？

小辣椒 发表于 2024-11-20 16:36

欣赏清舟的精彩制作{:4_171:}

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

小辣椒 发表于 2024-11-20 16:35
这个是黑黑的转盘播放器效果？

是啊就是那个姑娘的效果了

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

梦油 发表于 2024-11-20 09:48
背后那个女孩还真有点吓人呢。

是啊狼女啊{:4_173:}

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

樵歌 发表于 2024-11-19 21:20
赶紧给买肉肉吃。

樵歌喂狼啊{:4_189:}

绿叶清舟 发表于 2024-11-21 20:14

红影 发表于 2024-11-19 21:19
背景里若隐若现的美女形象也很漂亮。这个粤语歌曲听不懂，要是有歌词同步就更好了

最怕歌词的了{:4_189:}

绿叶清舟 发表于 2024-11-21 20:14

红影 发表于 2024-11-19 21:17
清舟还真找了个狼头做小播啊，这个色彩跟背景十分匹配呢

是啊，去搜了真好看到这个头就做了贴了

红影 发表于 2024-11-21 23:35

绿叶清舟 发表于 2024-11-21 20:14
最怕歌词的了

可以使用原生歌词啊，直接搜就是了。

红影 发表于 2024-11-21 23:35

绿叶清舟 发表于 2024-11-21 20:14
是啊，去搜了真好看到这个头就做了贴了

清舟小脑袋灵的{:4_173:}

梦油 发表于 2024-11-22 10:38

绿叶清舟 发表于 2024-11-21 20:13
是啊狼女啊

狼女吃人不？{:5_117:}

樵歌 发表于 2024-11-22 20:32

绿叶清舟 发表于 2024-11-21 20:13
樵歌喂狼啊

我不下地狱谁下地狱{:4_189:}

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

红影 发表于 2024-11-21 23:35
可以使用原生歌词啊，直接搜就是了。

现在搜来的很多都不准，上回就是后来大概改了一下

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

樵歌 发表于 2024-11-22 20:32
我不下地狱谁下地狱

不用啊，狼女很温油的

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

梦油 发表于 2024-11-22 10:38
狼女吃人不？

不吃人吃心呢{:4_189:}
页: [1] 2 3
查看完整版本: 饿狼传说