绿叶清舟 发表于 2024-6-3 21:07

学不会


<style>
      #mydiv { margin: 30px 0 30px calc(50% - 633px); width: 1100px; height: 700px; background: url('https://p.upyun.com/demo/tmp/IxJBXsxM.webp') no-repeat center/cover; border: thick inset #2f2e31; overflow: hidden; pointer-events: none; z-index: 1; position: relative; }
      #mydiv::before, #mydiv::after { position: absolute; content: ''; width: 120px; height: 120px; background: inherit; border-radius: 50%; box-shadow: inset 0 0 80px #928e94, 0 0 60px #928e94; pointer-events: auto; cursor: pointer; transition: .75s; animation: rot 8s linear infinite var(--state); }
      #mydiv::before { left: 20px; top: 20px; }
      #mydiv::after { right: 5px; top: 555px; animation-delay: -3s; }
      #mydiv:hover::before, #mydiv:hover::after { box-shadow: inset 0 0 60px #928e94, 0 0 100px #928e94; }
      #vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: overlay; }
      .pic { position: absolute; offset-path: path('M-100 400 Q512 -80 1124 100'); animation: move 8s linear infinite var(--state); mix-blend-mode: overlay;}
      @keyframes move { to { offset-distance: 100%; } }
      @keyframes rot { to { transform:rotate(360deg); } }
</style>

<div id="mydiv" title="播放/暂停">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2101154391" autoplay loop></audio>
      <video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/92/5e67b140632a8.mp4" muted loop></video>
</div>

<script>
(function() {
      Array.from({length: 7}).forEach((pic,key) => {
                pic = new Image(100,88);
                pic.src = 'https://p.upyun.com/demo/tmp/mIWKHH8J.webp';
                pic.className = 'pic';
                pic.style.cssText += `left: -100px; top: ${key * 30 + 30}px; animation-delay: -${Math.random() * 2 * key}s; filter: hue-rotate(${360 * Math.random()}deg); z-index: ${key + 2};`;
                mydiv.appendChild(pic);
      });
      let mState = () => {
                mydiv.style.setProperty('--state', ['running','paused'][+aud.paused]);
                aud.paused ? vid.pause() : vid.play();
      };
      aud.onplaying = aud.onpause = () => mState();
      mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

红影 发表于 2024-6-3 21:59

哈哈，这个太好玩了{:4_173:}

红影 发表于 2024-6-3 22:00

这个还是黑黑的最新代码呢，清舟运用得很棒。构思巧妙{:4_199:}

红影 发表于 2024-6-3 22:00

字体设计也特别棒。那三个字聚起来也像副画呢{:4_199:}

醉美水芙蓉 发表于 2024-6-3 22:14

梦油 发表于 2024-6-4 11:04

寓意深刻，制作有新意。

绿叶清舟 发表于 2024-6-4 21:44

红影 发表于 2024-6-3 21:59
哈哈，这个太好玩了

正好搜到这二个图片就拿来了{:4_189:}

绿叶清舟 发表于 2024-6-4 21:44

梦油 发表于 2024-6-4 11:04
寓意深刻，制作有新意。

都是抄代码了

绿叶清舟 发表于 2024-6-4 21:44

醉美水芙蓉 发表于 2024-6-3 22:14
清舟美女一学就会呢！

搬一下的不用学啊

绿叶清舟 发表于 2024-6-4 21:45

红影 发表于 2024-6-3 22:00
字体设计也特别棒。那三个字聚起来也像副画呢

也是搜来的字了

红影 发表于 2024-6-5 14:47

绿叶清舟 发表于 2024-6-4 21:44
正好搜到这二个图片就拿来了

太好玩了，又有趣又好看{:4_187:}

红影 发表于 2024-6-5 14:48

绿叶清舟 发表于 2024-6-4 21:45
也是搜来的字了

这样的字体设计特别奇妙{:4_199:}

梦油 发表于 2024-6-5 16:32

绿叶清舟 发表于 2024-6-4 21:44
都是抄代码了

这是一个很好的组合。

绿叶清舟 发表于 2024-6-8 21:57

红影 发表于 2024-6-5 14:48
这样的字体设计特别奇妙

是啊，网上的设计比咱强很多了

绿叶清舟 发表于 2024-6-8 21:58

梦油 发表于 2024-6-5 16:32
这是一个很好的组合。

正好搜到学得好玩就组起来了{:4_173:}

红影 发表于 2024-6-8 23:57

绿叶清舟 发表于 2024-6-8 21:57
是啊，网上的设计比咱强很多了

清舟能找到也是本事啊{:4_173:}

小辣椒 发表于 2024-6-9 00:13

小辣椒~~学不会{:4_198:}

梦油 发表于 2024-6-9 15:42

绿叶清舟 发表于 2024-6-8 21:58
正好搜到学得好玩就组起来了

“组合”也是一门学问啊。

绿叶清舟 发表于 2024-6-11 20:43

红影 发表于 2024-6-8 23:57
清舟能找到也是本事啊

搜时加个关键词 -字，就可以了

绿叶清舟 发表于 2024-6-11 20:43

小辣椒 发表于 2024-6-9 00:13
小辣椒~~学不会

你做得这么好了，还要学啊
页: [1] 2
查看完整版本: 学不会