马黑黑 发表于 2025-7-24 20:16

机械之心

<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: 100%; height: 100%; background: url('https://638183.freep.cn/638183/small/2025/f00.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://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-24 20:16

帖子代码

<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: 100%; height: 100%; background: url('https://638183.freep.cn/638183/small/2025/f00.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://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-24 21:05

原来小播里的图图是只取了图图的一部分。这鼠标触碰也有意思，直接清除滤镜效果了呢{:4_187:}

红影 发表于 2025-7-24 21:07

这样的小播像一个毛茸茸的心的聚合，如此的机械之心{:4_199:}

马黑黑 发表于 2025-7-24 21:42

红影 发表于 2025-7-24 21:05
原来小播里的图图是只取了图图的一部分。这鼠标触碰也有意思，直接清除滤镜效果了呢

背景图片是完整取的，并用伪元素再装一份

马黑黑 发表于 2025-7-24 21:42

红影 发表于 2025-7-24 21:07
这样的小播像一个毛茸茸的心的聚合，如此的机械之心

动作也有机械性呢

红影 发表于 2025-7-24 22:26

马黑黑 发表于 2025-7-24 21:42
背景图片是完整取的，并用伪元素再装一份

奇怪，看着好像只有树冠的那部分呢{:4_173:}

红影 发表于 2025-7-24 22:27

马黑黑 发表于 2025-7-24 21:42
动作也有机械性呢

嗯嗯，这样的转动很有机械性{:4_187:}

马黑黑 发表于 2025-7-24 22:27

红影 发表于 2025-7-24 22:26
奇怪，看着好像只有树冠的那部分呢

它们衔接在一起了

马黑黑 发表于 2025-7-24 22:27

红影 发表于 2025-7-24 22:27
嗯嗯，这样的转动很有机械性

{:4_181:}

杨帆 发表于 2025-7-24 22:34

效果惊艳，谢谢马老师精彩分享{:4_190:}

马黑黑 发表于 2025-7-24 22:35

杨帆 发表于 2025-7-24 22:34
效果惊艳，谢谢马老师精彩分享

{:4_190:}

红影 发表于 2025-7-24 22:40

马黑黑 发表于 2025-7-24 22:27
它们衔接在一起了

哦，那就是错觉了。

红影 发表于 2025-7-24 22:41

马黑黑 发表于 2025-7-24 22:27


那个鼠标触动的变化也很有趣，原来清除滤镜也一样效果很有趣。

梦江南 发表于 2025-7-25 08:40

看看头像蜻蜓，看看翅膀像蝴蝶，中间的大圆球像什么呢？惊呆了！{:4_187:}

小文 发表于 2025-7-25 09:27

太美妙啦，必须欣赏！问好先生！

马黑黑 发表于 2025-7-25 18:04

小文 发表于 2025-7-25 09:27
太美妙啦，必须欣赏！问好先生！

{:4_191:}

马黑黑 发表于 2025-7-25 18:05

梦江南 发表于 2025-7-25 08:40
看看头像蜻蜓，看看翅膀像蝴蝶，中间的大圆球像什么呢？惊呆了！

这个造型是随意的，没有刻意去做四不像哈{:4_189:}

马黑黑 发表于 2025-7-25 18:06

红影 发表于 2025-7-24 22:41
那个鼠标触动的变化也很有趣，原来清除滤镜也一样效果很有趣。

unset是重置，原来的咋样，现在倒回头

马黑黑 发表于 2025-7-25 18:06

红影 发表于 2025-7-24 22:40
哦，那就是错觉了。

错觉也挺美妙
页: [1] 2
查看完整版本: 机械之心