论坛 › 欢乐水吧 › 套用一个黑黑的归来效果

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

套用一个黑黑的归来效果

<style>
#papa {
        margin: 120 0 0 calc(50% - 593px);
        width: 730px;
        height: 749px;
        background: url('https://pic2.imgdb.cn/item/645b747f0d2dde5777906351.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: 100px;
                        @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: 720px 740px;
                }
                position: absolute;
                left: @r(100)%;
                top: -20%;
                :after {
                        position: absolute;
                        content: "@p(✿,❁,❀,&#127802;,&#128174;)";
                        color: snow;
                        font-size: @r(8, 25)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=1895365425" 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 18:47

@马黑黑

黑黑因为现在开电脑时间不多，现在是电脑上来就赶紧学习套用一个，晚上有时间手机上来再继续了。。。。

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

谢谢黑黑分享，来不及找图就这个小图练习一下了

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

本帖最后由 亦是金 于 2023-5-10 19:18 编辑

小辣椒 发表于 2023-5-10 18:48
谢谢黑黑分享，来不及找图就这个小图练习一下了迷糊了！发错地方了！{:5_111:}

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

欣赏美帖！问好小辣椒！{:4_187:}

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

亲爱的把那个球球弄小了，跟背景十分相当，很漂亮。欣赏亲爱的好帖{:4_199:}

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

小辣椒 发表于 2023-5-10 18:47
@马黑黑

黑黑因为现在开电脑时间不多，现在是电脑上来就赶紧学习套用一个，晚上有时间手机上来再继续 ...

辛苦辛苦

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

加上这些花朵，让画面特别灵动，亲爱的做得漂亮{:4_187:}

醉美水芙蓉 发表于 2023-5-10 19:40

醉美水芙蓉 发表于 2023-5-10 19:41

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

谢谢老师的精彩分享，欣赏问好！{:4_187:}

梦油 发表于 2023-5-10 20:35

小辣椒的颜色搭配得当。

起个网名好难 发表于 2023-5-10 20:57

欣赏佳作！ 晚上好！

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

好漂亮好漂亮{:4_204:}

小辣椒 发表于 2023-5-11 20:12

亦是金 发表于 2023-5-10 19:15
迷糊了！发错地方了！
发错了？？我作业一般就发水区的

小辣椒 发表于 2023-5-11 20:13

亦是金 发表于 2023-5-10 19:16
欣赏美帖！问好小辣椒！

谢谢欣赏，晚上好{:4_187:}

小辣椒 发表于 2023-5-11 20:14

红影 发表于 2023-5-10 19:21
亲爱的把那个球球弄小了，跟背景十分相当，很漂亮。欣赏亲爱的好帖

亲爱的，求速度，没有怎么修改，快速发了就下了

小辣椒 发表于 2023-5-11 20:14

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

不是辛苦，是没有电脑玩{:4_198:}

小辣椒 发表于 2023-5-11 20:16

红影 发表于 2023-5-10 19:22
加上这些花朵，让画面特别灵动，亲爱的做得漂亮

这个是套用黑黑代码，图图小就改小了尺寸

小辣椒 发表于 2023-5-11 20:16

醉美水芙蓉 发表于 2023-5-10 19:40
欣赏辣椒美女好作品！

谢谢水芙蓉欣赏{:4_187:}

查看完整版本: 套用一个黑黑的归来效果