朵拉 发表于 2025-7-27 18:10

鸟儿摇（学习马黑黑Purple Magic效果）

<style>
    #pa { --per: 0%; margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: url('https://pic.imgdb.cn/item/64e89257661c6c8e54046ae2.gif') no-repeat center/cover, rgba(0,128,0,.45); background-blend-mode: difference; box-shadow: 2px 2px 8px #000; z-index: 1; overflow: hidden; position: relative; }
    #pa::after { content: ''; position: absolute; width: 100%; height: 100%; background: url('https://cccimg.com/view.php/3e47d33956d8e5a80474b5850af4e2c0.jpg') no-repeat center/cover; clip-path: polygon(0 calc(100% - var(--per)), var(--per) 100%, 100% 100%, 100% var(--per), calc(100% - var(--per)) 0, 0 0); transition: 1s; }
    #pa:hover { --per: 100%; }
    #player { position: absolute; bottom: 100px; left: 100px; height: 80px; width: 80px; cursor: pointer; transform-style: preserve-3d; animation: rot 6s linear infinite var(--state); }
    li-zi { --hh: 35%; position: absolute; left: -50%; top: calc(50% - var(--hh)); width: 100%; height: var(--hh); background: radial-gradient(circle at 10% 10%, red, purple); border-radius: 50% 100% 0 100%; box-shadow: inset 0 0 30px lightblue, 2px 4px 16px rgba(0,0,0,.35); transform-origin: 100% 100%; }
    #btnFs { left: 20px; 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; z-index: 9; pointer-events: none; }
    @keyframes rot {
      to { transform: rotate(1turn); }
    }
</style>

<div id="pa">
    <audio id="aud" src="https://cccimg.com/view.php/7ef6a2a5ebcbe3a3b61d573405f58c53.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>
    <div id="player"></div>
</div>

<script type="module">
    import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
    FS(pa, player);
    const tt = 12;
    Array.from({length: tt}).forEach( (lz,idx) => {
      lz = document.createElement('li-zi');
      lz.style.cssText += `transform: rotate3d(0, 0.1, 1, ${idx * 360 / tt}deg);`;
      player.appendChild(lz);
    });
</script>

朵拉 发表于 2025-7-27 18:11

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

红影 发表于 2025-7-27 19:01

伪元素换了张不一样的图图，挺不错的。不过底图是动图的，暂停时无法停下来呢。
朵宝真快啊。欣赏朵宝好帖{:4_187:}

马黑黑 发表于 2025-7-27 19:06

红影 发表于 2025-7-27 19:01
伪元素换了张不一样的图图，挺不错的。不过底图是动图的，暂停时无法停下来呢。
朵宝真快啊。欣赏朵宝好帖 ...

.gif 基于 img 标签，没有暂停功能，需要处理的话得借助其它方案

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

{:4_199:}

红影 发表于 2025-7-27 20:43

马黑黑 发表于 2025-7-27 19:06
.gif 基于 img 标签，没有暂停功能，需要处理的话得借助其它方案

我是说如果把这两张图图换一下，就都解决了啊{:4_173:}

马黑黑 发表于 2025-7-27 21:52

红影 发表于 2025-7-27 20:43
我是说如果把这两张图图换一下，就都解决了啊

动图不是在里层么

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

马黑黑 发表于 2025-7-27 21:52
动图不是在里层么

如果换到外层就可以鼠标触碰而关闭了啊。

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

红影 发表于 2025-7-27 22:07
如果换到外层就可以鼠标触碰而关闭了啊。

酱紫

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

欢快的画面，动感的音乐，谢谢朵拉精彩分享{:4_204:}

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

马黑黑 发表于 2025-7-27 22:20
酱紫

就不用考虑如何停止动态效果了，就像你那个兔子的动图，你把它用圆球关掉了，就看不到小兔子的动态了{:4_173:}

马黑黑 发表于 2025-7-27 23:12

红影 发表于 2025-7-27 22:53
就不用考虑如何停止动态效果了，就像你那个兔子的动图，你把它用圆球关掉了，就看不到小兔子的动态了{:4_ ...

是酱紫

红影 发表于 2025-7-28 22:00

马黑黑 发表于 2025-7-27 23:12
是酱紫

所以这法子是最省力的解决动图暂停的{:4_173:}

马黑黑 发表于 2025-7-28 22:19

红影 发表于 2025-7-28 22:00
所以这法子是最省力的解决动图暂停的

gif将来可能会被改造，不过也有可能被替代

红影 发表于 2025-7-28 23:42

马黑黑 发表于 2025-7-28 22:19
gif将来可能会被改造，不过也有可能被替代

它可能会变成纯代码。

马黑黑 发表于 2025-7-29 12:47

红影 发表于 2025-7-28 23:42
它可能会变成纯代码。

不是，是本质上的变化。实际上现在已经出现新型gif，点击它它才动，只是不知为什么不被大众接受。

红影 发表于 2025-7-29 13:38

马黑黑 发表于 2025-7-29 12:47
不是，是本质上的变化。实际上现在已经出现新型gif，点击它它才动，只是不知为什么不被大众接受。

哦，还有这样的gif啊，头一次听说呢。

马黑黑 发表于 2025-7-29 13:44

红影 发表于 2025-7-29 13:38
哦，还有这样的gif啊，头一次听说呢。

有一些网站用到，主要是为了演示某种效果

红影 发表于 2025-7-29 20:17

马黑黑 发表于 2025-7-29 13:44
有一些网站用到，主要是为了演示某种效果

这个从来不知道，黑黑知道的真多啊。

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

欣赏朵拉的漂亮制作，现在小辣椒什么都不会了
页: [1]
查看完整版本: 鸟儿摇（学习马黑黑Purple Magic效果）