朵拉 发表于 2023-5-26 21:30

开往早晨的午夜（马黑黑原创）

本帖最后由 朵拉 于 2023-5-26 21:44 编辑 <br /><br /><css-doodle grid="20" id="mplayer">
      :doodle {
                @size: 1024px 640px;
                background: url('https://pic1.imgdb.cn/item/6470b3b8f024cca173c89540.webp') no-repeat center/cover, radial-gradient(black, blue);
                background-blend-mode: lighten;
                box-shadow: 0 0 8px 0 #000;
                position: relative;
                margin: 0 0 0 calc(50% - 593px);
                z-index: 1;
                --state: paused;
      }
      @size: @r(4, 8)px;
      @place: 90px 60px;
      border-radius: 50%;
      background: rgba(@m3(@r(222)), @r(.7, 1));
      animation: fly @r(6,16)s @r(-6,0)s infinite linear var(--state);
      @nth(@size) {
                @size: 100px;
                @shape: bud 5;
                background: rgba(50,50,250,.7);
                cursor: pointer;
                animation: rot 5s infinite linear var(--state);
      }
      @keyframes fly {
                0% { transform: perspective(800px) rotate(0) translate3d(0, 0, 0); }
                100% { transform: perspective(800px) rotate(@p(-720, 720)deg) translate3d(var(--rx), var(--ry), var(--rz)); }
      }
      @keyframes rot { to { transform: rotate(360deg); } }
      --rx: @r(10,50)px; --ry: @r(10,80)px; --rz: @r(20,800)px;
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2049804421" 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-5-26 21:37

@马黑黑
马师 晚上好，学生交作业哈，
请问 播放器的位置在哪一句调整{:4_190:}

马黑黑 发表于 2023-5-26 21:41

朵拉 发表于 2023-5-26 21:37
@马黑黑
马师 晚上好，学生交作业哈，
请问 播放器的位置在哪一句调整

@place: 390px 360px;

这一句，定位单元格的初始位置xy坐标值

朵拉 发表于 2023-5-26 21:46

马黑黑 发表于 2023-5-26 21:41
@place: 390px 360px;

这一句，定位单元格的初始位置xy坐标值

谢谢马师，位置已调整，您给看下可以吗{:4_190:}

红影 发表于 2023-5-26 21:59

制作漂亮，欣赏朵宝好帖{:4_187:}

马黑黑 发表于 2023-5-26 22:07

朵拉 发表于 2023-5-26 21:46
谢谢马师，位置已调整，您给看下可以吗

左上角也很不错
页: [1]
查看完整版本: 开往早晨的午夜（马黑黑原创）