一斛珠 发表于 2023-5-10 11:37

我也试试

<style>
#papa {
        margin: 0 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: url('https://img.wyc520.com.cn/data/attachment/forum/201708/25/182156wdmqrd3dbdnzbbmr.jpg') no-repeat center/cover;
        box-shadow: 0 0 8px #000;
        position: relative;
        z-index: 1;
        --state: paused;
}
css-doodle { position: absolute; }
</style>
<div id="papa">
        <css-doodle grid="6" id="mplayer">
                :doodle {
                        @size: 200px;
                        @shape: circle;
                        left: 10px;
                        top: 10px;
                        cursor: pointer;
                        z-index: 2;
                        animation: rot 6s infinite linear forwards var(--state);
                }
                border: @r(2px, 10px) solid hsla(calc(100 * @i()), 80%, 60%, @r(.6));
                border-radius: 50%;
                transform: scale(@r(6, 15));
                @keyframes rot { to { transform: rotate(360deg); } }
        </css-doodle>
        <css-doodle grid="20">
                :doodle {
                        @size: 1024px 640px;
                }
                position: absolute;
                left: @r(100)%;
                top: -20%;
                :after {
                        position: absolute;
                        content: "@p(✿,❁,❀,&#127802;,&#128174;)";
                        color: snow;
                        font-size: @r(12, 40)px;
                }
                animation: fall @r(8,20)s @r(-6, 6)s infinite var(--state);
                @keyframes fall {
                        0% { top: -20%; transform: rotate(0deg); }
                        100% {top: 120%; transform: rotate(360deg); }
                }
        </css-doodle>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=544954253" autoplay loop></audio>
</div>
<script>
        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 = () => papa.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 11:38

哈哈，我的怎么不是全屏呢？

一斛珠 发表于 2023-5-10 11:38

套用黑帅的代码{:4_189:}

醉美水芙蓉 发表于 2023-5-10 11:45

红影 发表于 2023-5-10 12:32

用图文做背景也很漂亮。珠儿聪明，做的帖子很漂亮{:4_187:}

红影 发表于 2023-5-10 12:35

制作没居中，需要往左调一下{:4_187:}

风舞红尘 发表于 2023-5-10 16:21

不是全屏，也不中啊{:4_204:}

梦油 发表于 2023-5-10 16:32

学以致用啊！

一斛珠 发表于 2023-5-10 17:21

红影 发表于 2023-5-10 12:35
制作没居中，需要往左调一下

这个代码和我以前的代码不一样，看不懂哈

一斛珠 发表于 2023-5-10 17:21

风舞红尘 发表于 2023-5-10 16:21
不是全屏，也不中啊

哈，是呀是呀。

一斛珠 发表于 2023-5-10 17:22

梦油 发表于 2023-5-10 16:32
学以致用啊！

谁说不是，我是好学生

小辣椒 发表于 2023-5-10 18:16

测试很成功，欢迎新同学{:4_171:}

樵歌 发表于 2023-5-10 18:52

珠儿散花{:4_173:}别说，这珠儿后来居上，从小师妹位上向上挪了挪{:4_173:}

红影 发表于 2023-5-10 19:44

一斛珠 发表于 2023-5-10 17:21
这个代码和我以前的代码不一样，看不懂哈

要不，我帮你调过来吧{:4_173:}

梦缘 发表于 2023-5-10 20:48

给力，欣赏问好！{:4_176:}

梦油 发表于 2023-5-11 11:09

一斛珠 发表于 2023-5-10 17:22
谁说不是，我是好学生

给你带上一朵小红花。{:4_187:}
页: [1]
查看完整版本: 我也试试