梦江南 发表于 2024-11-7 15:03

寻找（学习黑黑老师的Dream Away代码）

<style>
      #mydiv { margin: 30px 0 30px calc(50% - 513px); width: 1024px; height: 640px; background: url('https://cccimg.com/view.php/82f1ae87a313745df3a6a18aa9eb339e.gif') no-repeat center/cover; box-shadow: 4px 4px 8px gray; z-index: 1; position: relative; --state: running;border-radius:32px; }
      #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; }
      #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=28695638" 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(-90, 0, -40, 0, 'tan', 10, 'round').addTo('lines');
dr.line(-40, 0, 40, 0, 'tan', '2').addTo('lines');
dr.line(40, 0, 90, 0, 'tan', 10, '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>

起个网名好难 发表于 2024-11-7 15:54

欣赏美帖

红影 发表于 2024-11-7 17:53

很童趣，那蘑菇比小孩和狗狗还大呢。
动画制作很漂亮。欣赏江南好帖{:4_199:}

红影 发表于 2024-11-7 17:54

江南的动画制作总是很有特色{:4_199:}

小辣椒 发表于 2024-11-7 20:42

欣赏梦江南的精彩制作，作业完成的速度的{:4_199:}

小辣椒 发表于 2024-11-7 20:45

梦江南的动图做的漂亮的{:4_199:}

梦江南 发表于 2024-11-8 07:36

起个网名好难 发表于 2024-11-7 15:54
欣赏美帖

早上问好老师，谢谢首席欣赏支持。{:4_204:}

梦江南 发表于 2024-11-8 07:38

红影 发表于 2024-11-7 17:53
很童趣，那蘑菇比小孩和狗狗还大呢。
动画制作很漂亮。欣赏江南好帖

蘑菇是要寻找的东西，所以要大点。{:4_173:}早上好！{:4_204:}

梦江南 发表于 2024-11-8 07:40

红影 发表于 2024-11-7 17:54
江南的动画制作总是很有特色

谢谢影子欣赏支持鼓励！

梦江南 发表于 2024-11-8 07:41

小辣椒 发表于 2024-11-7 20:42
欣赏梦江南的精彩制作，作业完成的速度的

问好小辣椒，我的速度是没有质量的啦。{:4_204:}

梦江南 发表于 2024-11-8 07:42

小辣椒 发表于 2024-11-7 20:45
梦江南的动图做的漂亮的

谢谢小辣椒欣赏支持鼓励！

秋思梦景 发表于 2024-11-8 08:13

问候老师好！精美音画佳作！向您学习！祝您一冬幸福安康！{:4_204:}{:5_108:}

梦江南 发表于 2024-11-8 13:54

秋思梦景 发表于 2024-11-8 08:13
问候老师好！精美音画佳作！向您学习！祝您一冬幸福安康！

问好梦景老师，谢谢支持。{:4_204:}

红影 发表于 2024-11-8 16:59

梦江南 发表于 2024-11-8 07:38
蘑菇是要寻找的东西，所以要大点。早上好！

这么大的蘑菇，采回去能炒好几盘了{:4_173:}

红影 发表于 2024-11-8 17:00

梦江南 发表于 2024-11-8 07:40
谢谢影子欣赏支持鼓励！

不客气啊，应该谢谢江南带来的好帖才是{:4_187:}

梦江南 发表于 2024-11-8 17:27

红影 发表于 2024-11-8 16:59
这么大的蘑菇，采回去能炒好几盘了

对这个小孩来说是大了，对大人来说也不大的。{:4_173:}

梦江南 发表于 2024-11-8 17:29

红影 发表于 2024-11-8 17:00
不客气啊，应该谢谢江南带来的好帖才是

我只是完成作业而已。黑黑老师每天出新帖才是要感谢的呢。

红影 发表于 2024-11-8 23:44

梦江南 发表于 2024-11-8 17:27
对这个小孩来说是大了，对大人来说也不大的。

跟常规蘑菇比起来也是很大的{:4_173:}

红影 发表于 2024-11-8 23:45

梦江南 发表于 2024-11-8 17:29
我只是完成作业而已。黑黑老师每天出新帖才是要感谢的呢。

是的，我们应该一起感谢黑黑老师{:4_204:}

梦江南 发表于 2024-11-9 15:37

红影 发表于 2024-11-8 23:44
跟常规蘑菇比起来也是很大的

是吗，{:4_173:}
页: [1] 2
查看完整版本: 寻找（学习黑黑老师的Dream Away代码）