东篱闲人 发表于 2024-11-19 15:36

【学学黑黑：Breath and Life】落花时节又逢君

本帖最后由 东篱闲人 于 2024-11-19 18:33 编辑 <br /><br /><style>
      #mydiv { margin: 30px 0 30px calc(50% - 781px); width: 1400px; height: 800px; background: url('https://pic.imgdb.cn/item/673c3e8fd29ded1a8c9a6415.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; position: relative; --state: running; overflow:hidden; }
      #msvg { position: absolute; left: 50px; bottom: 50px; cursor: pointer; filter: drop-shadow(-5px -5px 10px silver); animation: rot 8s linear infinite var(--state); }
      #msvg:hover { filter: grayscale(1); }
      #vid { position: absolute; width: 110%; bottom:0px; left:0px; -webkit-mask: radial-gradient(transparent 65%, red); pointer-events: none; }
      #fsbtn { position: absolute; left: 150px; bottom: 15px; color: white; 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=322062" autoplay loop></audio>
      <video id="vid" src="https://img.tukuppt.com/video_show/15653652/00/79/86/60c98c8146068.mp4" autoplay loop muted></video>
      <svg id="msvg" width="100" height="100"></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(50, 50, 50, 'black').animate('animate', {
      attributeName: 'fill',
      values: 'black;white;black',
      dur: '.5s',
      repeatCount: 'indefinite',
}).addTo('m1');
dr.image('https://pic.imgdb.cn/item/673c3eafd29ded1a8c9a8194.png', 0, 0, 100, 100).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 15:37

画面咋变得这么黑？是因为代码的创作者叫黑黑吗？{:5_115:}

东篱闲人 发表于 2024-11-19 15:37

熊猫办公也难以隐藏。。。。{:5_103:}

梦江南 发表于 2024-11-19 15:47

欣赏老师的 精彩音画。下午好！{:4_199:}

东篱闲人 发表于 2024-11-19 16:05

梦江南 发表于 2024-11-19 15:47
欣赏老师的 精彩音画。下午好！

试一下代码，看来不咋成功。。。。{:5_117:}

夕阳黄昏 发表于 2024-11-19 16:33

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

东篱闲人 发表于 2024-11-19 17:31

夕阳黄昏 发表于 2024-11-19 16:33


都整却黑了，还赞呢。。。{:5_117:}

夕阳黄昏 发表于 2024-11-19 17:40

东篱闲人 发表于 2024-11-19 17:31
都整却黑了，还赞呢。。。

黑了吗？不黑啊{:4_172:}
<style>
        #mydiv { margin: 30px 0 30px calc(50% - 781px);overflow:hideen;}
        #vid { position: absolute; width: 110%; bottom:0px; left:0px; -webkit-mask: radial-gradient(transparent 65%, red); pointer-events: none; }
</style>

夕阳黄昏 发表于 2024-11-19 17:42

本帖最后由 夕阳黄昏 于 2024-11-19 18:41 编辑

东篱闲人 发表于 2024-11-19 16:05
试一下代码，看来不咋成功。。。。
试试看

东篱闲人 发表于 2024-11-19 18:32

夕阳黄昏 发表于 2024-11-19 17:42
试试这个

你是硬人啊，这就好多了。。。{:4_191:}

东篱闲人 发表于 2024-11-19 18:34

夕阳黄昏 发表于 2024-11-19 17:42
试试这个

是把那个光晕放大了。。。。{:4_181:}

夕阳黄昏 发表于 2024-11-19 18:43

东篱闲人 发表于 2024-11-19 18:34
是把那个光晕放大了。。。。

是啊，视频是黑的光晕不放大些底图都被盖住了。

东篱闲人 发表于 2024-11-19 20:02

夕阳黄昏 发表于 2024-11-19 18:43
是啊，视频是黑的光晕不放大些底图都被盖住了。

厉害。。。{:5_116:}

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

漂亮，东篱把小播缩小放在左下了，和字体很相符，这构思真好{:4_187:}

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

很好啊，没觉得画面黑啊{:4_173:}

东篱闲人 发表于 2024-11-19 21:06

红影 发表于 2024-11-19 21:01
很好啊，没觉得画面黑啊

改过一次了。。。

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

学得真快，大学霸。{:4_199:}

红影 发表于 2024-11-20 20:51

东篱闲人 发表于 2024-11-19 21:06
改过一次了。。。

哦哦，原来如此{:4_187:}

小辣椒 发表于 2024-11-20 21:01

老头这个转盘的播放器小辣椒还没有做的，向老头学习{:4_187:}

东篱闲人 发表于 2024-11-20 21:32

小辣椒 发表于 2024-11-20 21:01
老头这个转盘的播放器小辣椒还没有做的，向老头学习

直接调用黑黑的代码。。。
页: [1] 2
查看完整版本: 【学学黑黑：Breath and Life】落花时节又逢君