朵拉 发表于 2023-6-13 20:47

云里的山里的云（尺八版）

本帖最后由 朵拉 于 2023-6-13 23:19 编辑 <br /><br /><css-doodle grid="2" id="mplayer">
      :doodle {
                @size: 1024px 682px;
                background: lightblue url('https://pic.imgdb.cn/item/6488659c1ddac507cc3450a0.jpg');
                box-shadow: 0 0 8px #000;
                position: relative;
                margin: 0 0 0 calc(50% - 593px);
                --state: paused;
      }
      position: absolute;
      @nth(1) {
                @place: 50% 10%;
                @size: 80px;
                :after {
                        @size: 100%;
                        @shape: windmill;
                        content: '';
                        background: radial-gradient(rgba(100,100,100,.3), rgba(0,0,100,.6));
                }
                cursor: pointer;
                z-index: calc(@size + 1);
                animation: rot 6s infinite linear var(--state);
      }
      @nth(2) {
                @size: 100%;
                background: @doodle(
                        @grid: 10 / 100%;
                        @place: @r(0,100)% -10%;
                        :after {
                              content: '@p(&#127800;,❀,&#127989;️,&#127802;,❄️,&#128174;,&#127811;)';
                              animation: rot 4s infinite linear;
                              font-size: @r(15,30)px;
                        }
                        animation: fly @r(30,50)s @r(0,-30)s infinite;
                        @keyframes rot { to { transform: rotate(@p(-360,360)deg); } }
                        @keyframes fly {
                              from { transform: rotate(0deg) translateY(0); opacity: .9;}
                              to { transform: rotate(@r(-30,30)deg) translateY(800px); opacity: 0; }
                        }
                );
      }
      @nth(3,4) {
                @place: 90% 95%;
                font-size: 4em;
                :after {content: '&#128007;'}
      }
      @nth(4){ transform: translate(20px); }
      @keyframes rot { to { transform: rotate(360deg); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1342834585" 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);
      window.onload = () => {
                let btn = mplayer.shadowRoot.querySelector('cell');
                btn.onclick = () => aud.paused ? aud.play() : aud.pause();
      }
})();
</script>

红影 发表于 2023-6-13 20:49

这个，把黑黑的帖子重发一遍？

朵拉 发表于 2023-6-13 21:00

@马黑黑
马师 晚上好，背景图的左右上下的距离在哪里调整？{:4_190:}

朵拉 发表于 2023-6-13 21:00

本帖最后由 朵拉 于 2023-6-13 21:17 编辑

呼叫马师~~{:4_190:}{:4_190:}

马黑黑 发表于 2023-6-13 21:32

朵拉 发表于 2023-6-13 21:00
@马黑黑
马师 晚上好，背景图的左右上下的距离在哪里调整？

margin: 30px auto;

改为

margin: 0 0 0 calc(50% - xxpx);

其中， xxpx 中的 xx 是一个数值，帖子宽度除以2再减去81

朵拉 发表于 2023-6-13 22:43

雾锁山头山锁雾，天连水尾水连天~~
喜欢的一首BGM，推荐给大家{:4_204:}

朵拉 发表于 2023-6-13 22:44

马黑黑 发表于 2023-6-13 21:32
margin: 30px auto;

改为


马师，学生重新调整了，请指点{:4_190:}

朵拉 发表于 2023-6-13 22:45

红影 发表于 2023-6-13 20:49
这个，把黑黑的帖子重发一遍？

影宝 晚上好，帖子已重新编辑，请点评~~{:4_204:}

红影 发表于 2023-6-13 23:11

朵拉 发表于 2023-6-13 22:45
影宝 晚上好，帖子已重新编辑，请点评~~

看到朵宝已经换了图片和音乐，前面看你直接发黑黑的帖子，都弄迷糊了{:4_173:}
calc(50% - 600px); 还是不对，应该是-593px

樵歌 发表于 2023-6-14 06:59

黑师那个有公子在，这个没有{:4_189:}

马黑黑 发表于 2023-6-14 07:04

朵拉 发表于 2023-6-13 22:43
雾锁山头山锁雾，天连水尾水连天~~
喜欢的一首BGM，推荐给大家

很优美

马黑黑 发表于 2023-6-14 07:04

樵歌 发表于 2023-6-14 06:59
黑师那个有公子在，这个没有

公子去相亲了吧也许

马黑黑 发表于 2023-6-14 07:17

红影 发表于 2023-6-13 23:11
看到朵宝已经换了图片和音乐，前面看你直接发黑黑的帖子，都弄迷糊了
calc(50% - 600px); 还 ...

做法是酱紫：

margin: 0 0 0 calc(50% - 帖子宽度的一半 + 81px);

还有一种做法：

        left: calc(50% - 81px);
        transform: translateX(-50%);

马黑黑 发表于 2023-6-14 07:18

朵拉 发表于 2023-6-13 22:45
影宝 晚上好，帖子已重新编辑，请点评~~

{:4_199:}

樵歌 发表于 2023-6-14 13:16

马黑黑 发表于 2023-6-14 07:04
公子去相亲了吧也许

也许在编代码呢{:4_170:}

马黑黑 发表于 2023-6-14 13:20

樵歌 发表于 2023-6-14 13:16
也许在编代码呢

这个我不了解{:4_170:}

小辣椒 发表于 2023-6-14 17:39

欣赏朵拉的精彩制作{:4_199:}

梦缘 发表于 2023-6-14 20:23

欣赏精彩视频佳作，谢谢分享，点赞！{:4_171:}
页: [1]
查看完整版本: 云里的山里的云（尺八版）