论坛 › 音乐沙龙 › 花 - 鞠婧祎

绿叶清舟 发表于 2023-6-7 20:13

花 - 鞠婧祎

<css-doodle grid="3x1" id="mplayer">
      :doodle {
                @size: 1100px 700px;
                background: tan url('https://pic.imgdb.cn/item/648072361ddac507cc19fba8.jpg') no-repeat center / cover;
                box-shadow: 0 0 6px #000;
                position: relative;
                filter: blur(1px) opacity(.95);
                z-index: 1;
                margin: 0 0 0 calc(50% - 633px);
                --state: paused;
      }
      clip-path: @shape(
                points: 300;
                r: cos(@pn(5,4,2)t);
      );
      background: radial-gradient(purple, orange, lightgreen);
      @nth(1,3) {
                @size: 100px;
                @place: 88px 108px;
                cursor: pointer; animation: rot 6s infinite linear var(--state);
      }
      @nth(2) { @size: 50px; @place: 35% 30%; }
      @nth(3) { @size: 160px; @place: 58% 56%; }
      @keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>

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

<script>
(function() {
      let script = document.createElement('script');
      script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
      document.head.appendChild(script);
      let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);
      mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

小九 发表于 2023-6-7 20:35

沙发上欣赏{:4_187:}

醉美水芙蓉 发表于 2023-6-7 20:46

上海朝阳 发表于 2023-6-7 20:52

美美的，两朵小花都是开关键

梦油 发表于 2023-6-7 20:54

清舟朋友制作的作品与众不同。

红影 发表于 2023-6-7 21:21

底图的色彩好奇妙，几朵花儿安排得也很到位。欣赏清舟好帖{:4_187:}

马黑黑 发表于 2023-6-7 22:56

精细的设计

梦缘 发表于 2023-6-8 09:44

真漂亮的图，好看好听，感谢分享！{:4_187:}

岩新新 发表于 2023-6-8 13:05

欣赏精彩制作！

风舞红尘 发表于 2023-6-13 09:15

我怎么看到都是代码{:4_173:}

查看完整版本: 花 - 鞠婧祎