朵拉 发表于 2023-5-10 21:15

金风玉露（马黑黑原创）

本帖最后由 朵拉 于 2023-5-10 21:25 编辑 <br /><br /><css-doodle grid="1x2" id="mplayer">
    :doodle {
      @size: 1024px 576px;
      background: lightgreen url('https://pic2.imgdb.cn/item/645b98180d2dde5777b8f908.jpg') no-repeat center/cover;
      position: relative;
      margin: -80px 0 0 calc(50% - 593px);
      box-shadow: 0 0 8px 0 #000;
      pointer-evetns: none;
      z-index: 2;
      --state: paused;
    }
    @size: 200px;
    @place: 50% 16%;
    background: radial-gradient(red,orange,lightgreen);
    clip-path: @shape(
      points: 580;
      r: cos(100t);
    );
    @at(1,2) { background: radial-gradient(darkred,black,snow); }
    cursor: pointer;
    pointer-events: auto;
    animation: rot @pn(6s, 8s) infinite linear var(--state);
    @keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1958200222" autoplay loop></audio>

<script>
(function() {
      let script = document.createElement('script');
      script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.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-5-10 21:16

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

红影 发表于 2023-5-10 21:30

这个背景图很漂亮，播放器也用得好。要是加上歌词同步就更好了。欣赏朵宝好帖{:4_187:}

小文 发表于 2023-5-10 21:31

图很漂亮

马黑黑 发表于 2023-5-10 22:11

欣赏

亦是金 发表于 2023-5-10 22:36

背景美，歌好听。有歌词就完美了！问好朵拉！{:4_187:}

焱鑫磊 发表于 2023-5-11 00:00

欣赏！{:4_204:}{:4_204:}{:4_204:}

朵拉 发表于 2023-5-11 09:43

马黑黑 发表于 2023-5-10 22:11
欣赏

马师好，看过来 他们一致认为加上歌词更完美，请赐教~~{:4_190:}

马黑黑 发表于 2023-5-11 12:15

朵拉 发表于 2023-5-11 09:43
马师好，看过来 他们一致认为加上歌词更完美，请赐教~~

这个需要加另外的机制

亦是金 发表于 2023-5-11 12:50

问好朵拉！{:4_187:}这歌真好听！也想做一个帖子玩玩！{:4_189:}

梦缘 发表于 2023-5-11 21:24

制作好看，欣赏问好！{:4_187:}
页: [1]
查看完整版本: 金风玉露（马黑黑原创）