小辣椒 发表于 2025-8-2 18:00

又是大雪飞满天（学习套用黑黑岁月如风播放器效果）TO：朵拉

<style>
      #papa { margin: 130px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: url('https://wj.zp68.com/lxx/yunhua/2025/08/02/bj.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; z-index: 1; overflow: hidden; display: grid; place-items: center; position: relative; }
      #player { left: 35%; top: 40%; aspect-ratio: 1/1; width: 10%; transform-style: preserve-3d; animation: rot 8s linear infinite var(--state); cursor: pointer; position: absolute; }
      .ring { position: absolute; left: -30%; width: 80%; height: 80%; border: 4px dotted white; border-radius: 20px; background: url('https://wj.zp68.com/lxx/yunhua/2025/08/02/xi.png') no-repeat center/cover; box-sizing: border-box; transform-origin: 100% 0%; transform: rotateY(var(--ay)); box-shadow: inset 0 0 36px BlueViolet; transition: .7s; }
      #player:hover .ring { filter: hue-rotate(var(--ay)); }
      #btnFs { bottom: 20px; color: #eee; }
      .vid {position: absolute; width: 100%; height: 100%; opacity: .65; pointer-events: none; }
      @keyframes rot {
                from { transform: rotateX(-15deg) rotateY(0deg); }
                to { transform: rotateX(-15deg) rotateY(360deg); }
      }

#dt2{ position: absolute; width:320px; height: 90px;bottom: 40px;   left: 150px; }

</style>

<div id="papa">

      <audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/f10c-audiofreehighqps/21/1F/GKwRINsLIPsfACAAAAM4mohl.m4a" autoplay loop></audio>
      <video class="vid" src="https://video-qn.51miz.com/vcg/video/preview/51miz42N1355219061.mp4" autoplay loop muted></video>
      <div id="player"></div>

<img id="dt2" src="https://wj.zp68.com/lxx/yunhua/2025/08/02/bt.png" alt="" />
<img id="dt3" src="https://xlaj.cn/assets/file/zp/20231112124430.jpg " alt="" />
</div>
<script type="module">
      import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
      FS(papa, player);

      const total = 10;
      Array.from({ length: total }).forEach( (d, k) => {
                d = document.createElement('div');
                d.className = 'ring';
                d.style.cssText += `--ay: ${k * 360 / total}deg`;
                player.appendChild(d);
      });
</script>

小辣椒 发表于 2025-8-2 18:03

小辣椒套用玩一个，偷懒就直接用了视频背景@马黑黑

学习黑黑源码分享

小辣椒 发表于 2025-8-2 18:04

@朵拉

谢谢朵拉的精美礼物，小辣椒学习套用黑黑的代码完成一个作业，就当回礼了，别嫌弃啊{:4_179:}

梦江南 发表于 2025-8-2 18:12

这么热的天，看到这么大的雪，感觉凉爽了许多。
谢谢小辣椒带来美的享受！晚上好！{:4_187:}

马黑黑 发表于 2025-8-2 18:36

非常有创意，漂亮

梦油 发表于 2025-8-2 19:32

白雪皑皑，如梦似幻，仿佛是冬日的情诗，美不胜收。

红影 发表于 2025-8-2 19:51

播放器里还加了小雪人，颜色调整得也漂亮。这个视频太美了。
这个制作好棒，欣赏亲爱的好帖{:4_199:}

红影 发表于 2025-8-2 19:53

这个字体设计得也很漂亮，色彩和小播一致，相互呼应，特别美{:4_199:}

樵歌 发表于 2025-8-2 20:25

直接把冰雪元素融入转运的美丽的书页里了。我很喜欢！

樵歌 发表于 2025-8-2 20:27

看到心里就非常凉快，目下，也只有海拔4000米雪线以上有这景儿了

小文 发表于 2025-8-2 20:27

不错的感觉，欣赏{:4_191:}

朵拉 发表于 2025-8-2 20:48

美美哒制作，让小辣椒辛苦了，多注意休息哈{:4_204:}

朵拉 发表于 2025-8-2 20:53

这大热天看到大雪纷飞，凉爽许多~~
谢谢小辣椒的礼物，么么哒 开心哈{:4_204:}

亦是金 发表于 2025-8-3 08:47

问好小辣椒！欣赏美帖点赞！{:4_187:}

老谟深虑 发表于 2025-8-3 08:51

            欣赏美贴，点赞！

小九 发表于 2025-8-3 10:40

谢谢辣椒带来的凉爽{:4_187:}{:4_199:}

杨帆 发表于 2025-8-3 13:06

本帖最后由 杨帆 于 2025-8-3 13:08 编辑

漂亮！谢谢小辣椒精彩分享，祝朵拉收礼开心{:4_204:}

小辣椒 发表于 2025-8-12 21:13

梦江南 发表于 2025-8-2 18:12
这么热的天，看到这么大的雪，感觉凉爽了许多。
谢谢小辣椒带来美的享受！晚上好！

阿姨晚上好，又许多时间没有玩了，都快忘记了

小辣椒 发表于 2025-8-12 21:14

马黑黑 发表于 2025-8-2 18:36
非常有创意，漂亮

黑黑晚上好，又许多时间没有玩，基本都忘记了{:4_198:}

小辣椒 发表于 2025-8-12 21:15

梦油 发表于 2025-8-2 19:32
白雪皑皑，如梦似幻，仿佛是冬日的情诗，美不胜收。

梦油晚上好，好久没有上来了，想大家的
页: [1] 2
查看完整版本: 又是大雪飞满天（学习套用黑黑岁月如风播放器效果）TO：朵拉