朵拉 发表于 2025-7-25 22:06

和光同尘（学习马黑黑机械之心效果）

<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://638183.freep.cn/638183/t24/w4/jxvx.jpg') 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: 35%; transform-style: preserve-3d; animation: rot 10s linear infinite var(--state); cursor: pointer; }
    #mum:hover .son { filter: unset; }
    .son { position: absolute; width: 50%; height: 50%; background: url('https://638183.freep.cn/638183/small/2025/fl101.png') no-repeat center/ 100% 100%; 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: 100%; height: 100%; 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://cccimg.com/view.php/0f5086e1567a52de6672f3b91e2f31ed.mp3" 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-25 22:08

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

红影 发表于 2025-7-26 08:11

这个好像转动原点选得有问题？怎么转得绕圈了。
这个好像都没动，只换了播放器的图图，怎么会这样了？真是很奇怪{:4_204:}

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

欣赏朵拉老师美帖。问好！

梦油 发表于 2025-7-26 10:44

五彩缤纷的圆球真招人喜欢。

马黑黑 发表于 2025-7-27 07:51

{:4_199:}
页: [1]
查看完整版本: 和光同尘（学习马黑黑机械之心效果）