梦江南 发表于 2025-7-26 15:27

套用黑黑老师的机械之心代码 （无题）

本帖最后由 梦江南 于 2025-7-26 15:27 编辑 <br /><br /><style>
    #papa { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: url('https://cccimg.com/view.php/7242ecf363111688d9f3a72d5e70ae6b.png') no-repeat center/cover; box-shadow: 2px 2px 8px #000; z-index: 1; overflow: hidden; perspective: 800px; display: grid; place-items: center; position: relative; }
    #mum { position: absolute; aspect-ratio: 1/1; width: 25%; transform-style: preserve-3d; animation: rot 10s linear infinite var(--state); cursor: pointer; }
    #mum:hover .son { filter: unset; }
    .son { position: absolute; width: 100%; height: 100%; background: url('https://cccimg.com/view.php/8d2db8c5165ea10c08274010df4cd9fb.png') no-repeat center/ 50% 50%; border: 0px dashed magenta; border-radius: 25%; transform: rotateY(var(--a)) rotateZ(-45deg); filter: hue-rotate(calc(var(--a) + 15deg)); transition: 1s; --a: 5deg; }
    .son::before { position: absolute; content: ''; width: 50%; height:50%; background: inherit; transform: scale(-1); }
    #btnFs { bottom: 20px; color: #eee; }
    .vid {position: absolute; width: 100%; height: 100%; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .45; pointer-events: none; }
    @keyframes rot { to { transform: rotate3d(1, 0, 1, 360deg); } }
</style>

<div id="papa">
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2713826200" autoplay loop></audio>
    <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/25/03/05/12/16/26/video67c7d01a5fa5e.mp4" autoplay loop muted></video>
    <video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/19/50/54/video6363ab1e86aba.mp4" autoplay loop muted></video>
    <div id="mum"></div>
</div>

<script type="module">
    import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
    FS(papa, mum);
    const total = 20;
    Array.from({length: total}).forEach( (d, k) => {
      d = document.createElement('div');
      d.className = 'son';
      d.style.setProperty('--a', k * 360 / total + 'deg');
      mum.appendChild(d);
    });
</script>

梦油 发表于 2025-7-26 16:52

连猫咪都削喜欢你这个不断变换色彩的圆。

杨帆 发表于 2025-7-26 17:42

漂亮！谢谢江南精彩分享{:4_171:}

梦江南 发表于 2025-7-26 17:48

梦油 发表于 2025-7-26 16:52
连猫咪都削喜欢你这个不断变换色彩的圆。

谢谢首席欣赏支持，傍晚好！{:4_204:}

梦江南 发表于 2025-7-26 17:50

杨帆 发表于 2025-7-26 17:42
漂亮！谢谢江南精彩分享

问好杨帆，我不会加歌词呢，只会套用。傍晚好！{:4_201:}

杨帆 发表于 2025-7-26 17:54

梦江南 发表于 2025-7-26 17:50
问好杨帆，我不会加歌词呢，只会套用。傍晚好！

是，慢慢来，鼓捣多了就会了{:4_204:}

樵歌 发表于 2025-7-26 18:08

各有创新！相当漂亮哈。

梦江南 发表于 2025-7-26 18:16

杨帆 发表于 2025-7-26 17:54
是，慢慢来，鼓捣多了就会了

我是学不会了。

梦江南 发表于 2025-7-26 18:18

樵歌 发表于 2025-7-26 18:08
各有创新！相当漂亮哈。

问好樵歌老师，谢谢欣赏鼓励，傍晚好！祝老师身体健康，夏安！{:4_204:}

小文 发表于 2025-7-26 19:40

十分欣赏，很玄妙！美不胜收！问好江南！

红影 发表于 2025-7-26 19:54

这个有意思，让小播出来了两种伞呢，非常奇妙{:4_199:}

红影 发表于 2025-7-26 20:01

都没看出来这个小播是怎么弄出来的{:4_173:}
欣赏江南好帖。视频换一下更好些。

梦油 发表于 2025-7-26 21:51

梦江南 发表于 2025-7-26 17:48
谢谢首席欣赏支持，傍晚好！

欣赏你的作品也是一种快乐。

小辣椒 发表于 2025-7-31 13:55

现在小辣椒许多黑黑的代码教程都没有看的，都不知道是那个了

小辣椒只能欣赏加学习了{:4_199:}
页: [1]
查看完整版本: 套用黑黑老师的机械之心代码 （无题）