绿叶清舟 发表于 2025-3-11 21:15

Shape of My Heart


<style>
#papa {
      margin: 0 0 0 calc(50% - 681px);
      width: 1200px;
      height: 680px;
      background: url('https://pic1.imgdb.cn/item/67d033f4066befcec6e35971.jpg') no-repeat center/cover;
      box-shadow: 3px 3px 20px #000;
      overflow: hidden;
      z-index: 1;
      display: grid;
      place-items: center;
      position: relative;
}
#player {
      position: absolute;
      width: 200px;
      height: 200px;
      cursor: pointer;
      filter: opacity(.75) hue-rotate(270deg);
      background: url('https://img2.baidu.com/it/u=2780688643,1511728023&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=800') repeat -300px 0 / cover;
      mask: url('https://638183.freep.cn/638183/web/svg/heart.svg') no-repeat center/cover;
      -webkit-mask: url('https://638183.freep.cn/638183/web/svg/heart.svg') no-repeat center/cover;
      animation: rot 10s infinite linear var(--state), bgmov 8s infinite linear var(--state);
}
li-zi {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: snow;
      opacity: .95;
      animation: moving var(--duration) var(--delay) linear infinite alternate var(--state);
}
@keyframes moving {
      from { transform: translate(var(--x0),var(--y0)); opacity: 1; }
      to { transform: translate(var(--x1),var(--y1)); opacity: .5; }
}
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes bgmov { to { background-position: 0 0; } }
</style>

<div id="papa">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1226230" autoplay loop></audio>
      <div id="player"></div>
</div>

<script>
(function() {
      let all = 60;
      for(let i = 0; i < all; i++) {
                let lz = document.createElement('li-zi');
                let hudu = Math.PI / 180 * 360 / all * i;
                let xx = 800 * Math.cos(hudu), yy = 600 * Math.sin(hudu);
                lz.style.cssText += `
                        --x0: ${xx}px;
                        --y0: ${yy}px;
                        background: #${Math.random().toString(28).substr(-6)};
                        animation: moving ${Math.random() * 20 + 20}s -${Math.random() * 20}s infinite var(--state);
                `;
                papa.prepend(lz);
      }
      let mState = () => {
                papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      };
      aud.addEventListener('playing', mState, false);
      aud.addEventListener('pause', mState, false);
      player.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

红影 发表于 2025-3-11 21:52

这个很奇妙，这颗心形下的图形移动，让心形看着像是动态图图一般{:4_187:}

红影 发表于 2025-3-11 21:54

整个图片的风格和心形也特别协调，仿佛从扑克牌中拉出的红心。
粒子的运用和字体设计都很棒，欣赏清舟好帖{:4_199:}

流水光阴 发表于 2025-3-12 17:21

问好老师，这个也是AI图制作？

流水光阴 发表于 2025-3-12 17:21

感谢分享

小辣椒 发表于 2025-3-12 22:53

清舟这个图图耐看，也是有创意{:4_199:}

小辣椒 发表于 2025-3-12 22:54

欣赏精彩的制作

绿叶清舟 发表于 2025-3-13 20:07

小辣椒 发表于 2025-3-12 22:54
欣赏精彩的制作

谢谢辣椒，现在网易音乐越来越难找都不知道玩啥了

绿叶清舟 发表于 2025-3-13 20:08

流水光阴 发表于 2025-3-12 17:21
问好老师，这个也是AI图制作？

光阴晚上好，这是PS制作加代码的

绿叶清舟 发表于 2025-3-13 20:10

红影 发表于 2025-3-11 21:54
整个图片的风格和心形也特别协调，仿佛从扑克牌中拉出的红心。
粒子的运用和字体设计都很棒，欣赏清舟好帖 ...

那是心的备用形状咋成扑克了{:4_189:}

冬天的雨 发表于 2025-3-13 21:01

清洲好制作，冬雨羡慕嫉妒，不恨{:4_170:}

红影 发表于 2025-3-13 22:24

绿叶清舟 发表于 2025-3-13 20:10
那是心的备用形状咋成扑克了

你看右下方，多像扑克牌啊{:4_173:}

绿叶清舟 发表于 2025-3-18 20:19

冬天的雨 发表于 2025-3-13 21:01
清洲好制作，冬雨羡慕嫉妒，不恨

不恨就好{:4_189:}

绿叶清舟 发表于 2025-3-18 20:19

红影 发表于 2025-3-13 22:24
你看右下方，多像扑克牌啊

就是扑克了{:4_189:}

红影 发表于 2025-3-18 20:43

绿叶清舟 发表于 2025-3-18 20:19
就是扑克了

清舟的心思很灵巧{:4_187:}

冬天的雨 发表于 2025-3-23 19:44

绿叶清舟 发表于 2025-3-18 20:19
不恨就好

怎么可能会恨{:4_170:}
页: [1]
查看完整版本: Shape of My Heart