朵拉 发表于 2024-11-12 14:10

谦 让（学习马黑黑Bloom效果）

<style>
        #mydiv { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://pic.imgdb.cn/item/6732e514d29ded1a8c2fe597.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; position: relative; --state: running; }
        #msvg { position: absolute; left: calc(85% - 100px); top: 40px; cursor: pointer; animation: rot 8s linear infinite var(--state); }
        #msvg rect { opacity: .75; }
        #msvg:hover rect { 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: darkred; background: lightgreen; 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=2642164470" loop autoplay></audio>
       
        <video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/04/17/6141baa659673.mp4" autoplay loop muted></video>
        <svg id="msvg" width="150" height="150" xmlns="http://www.w3.org/2000/svg" viewBox="-120 -120 240 240">
        <span id="fsbtn"></span>
</div>

<scripttype="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
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');
        var tt = 20;
        for(var i = 0; i < tt; i ++) {
                dr.rect(-50,-40, 100,80, 'none','#a68261', 4).transform(`rotate(${i * 360 / tt}) translate(50)`);
        }
        msvg.onclick = () => {
                msvg.style.setProperty('--state', ['paused','running'][+aud.paused]);
                aud.paused ? (aud.play(), vid.play()) : (aud.pause(), vid.pause());
        };
};
aud.play().catch(_ => dr.svg.style.setProperty('--state', 'paused'));
fscreen.fs('mydiv', 'fsbtn');
</script>

朵拉 发表于 2024-11-12 14:11

@马黑黑
老师好，学生交作业，请指正哈{:4_190:}

愤怒的葡萄 发表于 2024-11-12 14:12

问一下，这首歌曲是谁主唱的啊？

朵拉 发表于 2024-11-12 14:21

愤怒的葡萄 发表于 2024-11-12 14:12
问一下，这首歌曲是谁主唱的啊？

王靖雯和张信哲合唱歌曲~~

愤怒的葡萄 发表于 2024-11-12 14:39

朵拉 发表于 2024-11-12 14:21
王靖雯和张信哲合唱歌曲~~

了解，我到QQ音乐上去试听一下。

愤怒的葡萄 发表于 2024-11-12 15:05

朵拉 发表于 2024-11-12 14:21
王靖雯和张信哲合唱歌曲~~

这个王靖雯是黑龙江出生的王靖雯吧，不是王菲的曾用艺名吧，现在很多歌手都不认识的。

梦江南 发表于 2024-11-12 15:32

好有意境的画面！{:4_199:}

冬天的雨 发表于 2024-11-12 18:21

朵拉这帖我加分后也是被甩出论坛了，要重新进来，看看你代码有那里出错了

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

欣赏小朵拉美美的制作，音乐和画面相得益彰，画面意境很美

马黑黑 发表于 2024-11-12 19:09

{:4_199:}

红影 发表于 2024-11-12 19:37

漂亮，欣赏朵宝好帖{:4_187:}

小辣椒 发表于 2024-11-12 21:48

朵拉这个制作漂亮，赞哦！{:4_178:}
页: [1]
查看完整版本: 谦 让（学习马黑黑Bloom效果）