论坛 › 动画音画 › 归来

马黑黑 发表于 2023-5-10 07:44

归来

本帖最后由 马黑黑 于 2023-5-10 07:57 编辑 <br /><br /><style>
#papa {
        margin: 0 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t23/1/gvld.jpeg') 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>
(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 = () => 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 07:56

<style>
        .papa {}
        .papa > p {margin: 8px 0;}
        .mama {height: fit-content; display: grid; grid-template-columns: 50px auto; grid-template-rows: 1fr; padding: 0; margin: 20px 0; background: #f9f9f9; box-shadow: 0 0 2px #000; position: relative;}
        .hCode, .hLineNum {margin: 0;padding: 10px 4px;width: 100%;box-sizing: border-box;font-size: 14px;line-height: 16px;}
        .hCode {overflow-x: auto; tab-size: 3;}
        .hLineNum {border-right: 1px solid #ccc;text-align: right;color: gray;user-select: none;}
        .stage {display: grid; place-items: center;}
</style>

<div class="papa">
        <p>帖子代码：</p>
        <div class="mama">
                <pre class="hLineNum"></pre>
                <pre class="hCode">
&lt;style&gt;
#papa {
        margin: auto;
        width: 1024px;
        height: 640px;
        background: url('https://638183.freep.cn/638183/t23/1/gvld.jpeg') no-repeat center/cover;
        box-shadow: 0 0 8px #000;
        position: relative;
        z-index: 1;
        --state: paused;
}
css-doodle { position: absolute; }

&lt;/style&gt;

&lt;div id="papa"&gt;
        &lt;css-doodle grid="6" id="mplayer"&gt;
                :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); } }
        &lt;/css-doodle&gt;
        &lt;css-doodle grid="20"&gt;
                :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); }
                }
        &lt;/css-doodle&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=544954253" autoplay loop&gt;&lt;/audio&gt;
&lt;/div&gt;

&lt;script&gt;
        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 = () =&gt; papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        mplayer.onclick = () =&gt; aud.paused ? aud.play() : aud.pause();
&lt;/script&gt;</pre>
        </div>
</div>

<script>
let hCodes = document.querySelectorAll('.hCode'),
        hLineNums = document.querySelectorAll('.hLineNum');

hCodes.forEach((item,key) => {
        let lines = hCodes.innerText.trim().split('\n').length;
        let str = '';
        for(i = 0; i < lines; i ++) {
                str += i + 1 + '\n';
        }
        hLineNums.innerText = str;
});
</script>

起个网名好难 发表于 2023-5-10 09:28

欣赏，学习

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

这么漂亮哇

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

樵歌 发表于 2023-5-10 11:48

为是楼兰菇凉撒的花雨么{:4_189:}

樵歌 发表于 2023-5-10 11:50

觉得吧，左上那个圆球播放器和漫天的花雨不是太和谐。

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

那个圆球也是代码做的啊，这个还是头一次看到。
content: "@p(✿,❁,❀,&#127802;,&#128174;)"; 这个居然还能选带颜色的图标，不知道这些图标都哪找到。{:4_187:}

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

这些花瓣真多，撒在荒城绵延的历史中。黑黑的制作漂亮{:4_199:}

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

目不暇接

马黑黑 发表于 2023-5-10 18:07

梦油 发表于 2023-5-10 16:31
目不暇接

感谢支持

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

欣赏黑黑的新产品{:4_187:}

焱鑫磊 发表于 2023-5-10 19:05

漂亮！学习！{:4_187:}

马黑黑 发表于 2023-5-10 19:21

焱鑫磊 发表于 2023-5-10 19:05
漂亮！学习！

{:4_191:}

亦是金 发表于 2023-5-10 19:29

问好黑黑老师！欣赏学习了！{:4_190:}

马黑黑 发表于 2023-5-10 20:07

亦是金 发表于 2023-5-10 19:29
问好黑黑老师！欣赏学习了！

晚上好

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

感谢老师的代码分享，欣赏问好！{:4_187:}

马黑黑 发表于 2023-5-10 21:09

梦缘 发表于 2023-5-10 20:50
感谢老师的代码分享，欣赏问好！

晚上好

南无月 发表于 2023-5-10 21:55

看看，彩球漂亮

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

南无月 发表于 2023-5-10 21:55
看看，彩球漂亮

晚上嚎

查看完整版本: 归来