马黑黑 发表于 2023-4-22 09:49

Magic

本帖最后由 马黑黑 于 2023-4-22 09:56 编辑 <br /><br /><style>
#papa {margin: -80px 0 0 calc(50% - 593px);width: 1024px;height: 640px;background: lightblue url('https://638183.freep.cn/638183/t23/webp1/t3.webp') no-repeat center/cover;box-shadow: 0 0 8px #444;z-index: 1;position: relative;--state: paused;}
#papa::after {position: absolute;content: '';left: calc(50% - 180px);bottom: 0;width: 360px;height: 202px;background: gray url('https://638183.freep.cn/638183/t22/gif/wave.gif') no-repeat center/cover;mix-blend-mode: screen;}
</style>

<div id="papa">
        <css-doodle id="mplayer" click-to-update>
                :doodle {
                        @grid: 4 / 200px;
                        @shape: circle;
                        filter: drop-shadow(10px 10px 20px black);
                        position: absolute;
                        left: calc(50% - 90px);
                        bottom: 40px;
                        cursor: pointer;
                        z-index: 2;
                }
                background: #@repeat(6, @p());
                @shape: bud @p(3,4,5,6);
                @size: @r(20, 40)px;
                animation: rot 6s infinite linear var(--state);
                @keyframes rot { to { transform: rotate(360deg); } }
        </css-doodle>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=29379953" autoplay loop></audio>
</div>

<script>
(function() {
        let scriptEle = document.createElement('script');
        scriptEle.setAttribute('type','text/javascript');
        scriptEle.setAttribute('src','https://unpkg.com/css-doodle@0.34.8/css-doodle.min.js');
        document.head.appendChild(scriptEle);
        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-4-22 11:09

圆形排布的3-6叶草，很漂亮。这水波也很有趣，像被播放器弄出来的{:4_187:}

马黑黑 发表于 2023-4-22 11:43

红影 发表于 2023-4-22 11:09
圆形排布的3-6叶草，很漂亮。这水波也很有趣，像被播放器弄出来的

水波是悄然弄出来的

醉美水芙蓉 发表于 2023-4-22 11:49

马黑黑 发表于 2023-4-22 11:50

醉美水芙蓉 发表于 2023-4-22 11:49
播放器加水波更漂亮了！

上午好{:4_180:}

雨中悄然 发表于 2023-4-22 12:37

大小形状颜色都不一样的万花筒的碎片。再多点可以不

马黑黑 发表于 2023-4-22 12:41

雨中悄然 发表于 2023-4-22 12:37
大小形状颜色都不一样的万花筒的碎片。再多点可以不

可以可以，但不是越多越好，合适就成

罗浮梦 发表于 2023-4-22 13:43

这画面太美了

马黑黑 发表于 2023-4-22 13:43

罗浮梦 发表于 2023-4-22 13:43
这画面太美了

下午好。感谢支持！

梦缘 发表于 2023-4-22 19:27

好美的播放器，水波万花筒啊，欣赏点赞！{:4_185:}

马黑黑 发表于 2023-4-22 19:31

梦缘 发表于 2023-4-22 19:27
好美的播放器，水波万花筒啊，欣赏点赞！

里面也许还有一条鱼{:4_170:}

小辣椒 发表于 2023-4-22 21:30

这个也是没有看见过，现在我都漏看好多教程了。。。。。

马黑黑 发表于 2023-4-22 22:21

小辣椒 发表于 2023-4-22 21:30
这个也是没有看见过，现在我都漏看好多教程了。。。。。

应该

红影 发表于 2023-4-22 22:25

马黑黑 发表于 2023-4-22 11:43
水波是悄然弄出来的

很漂亮{:4_187:}

马黑黑 发表于 2023-4-22 22:36

红影 发表于 2023-4-22 22:25
很漂亮

不错的

红影 发表于 2023-4-23 10:56

马黑黑 发表于 2023-4-22 22:36
不错的

我看到代码也可以弄出水波来呢。

马黑黑 发表于 2023-4-23 11:00

红影 发表于 2023-4-23 10:56
我看到代码也可以弄出水波来呢。

代码可以弄动态水波纹，这个俺们以前玩过的

红影 发表于 2023-4-23 13:24

马黑黑 发表于 2023-4-23 11:00
代码可以弄动态水波纹，这个俺们以前玩过的

对，而且你还让叶子上的水滴滴落的速度跟涟漪的动作设计成一致的{:4_187:}

马黑黑 发表于 2023-4-23 23:04

红影 发表于 2023-4-23 13:24
对，而且你还让叶子上的水滴滴落的速度跟涟漪的动作设计成一致的

这个玩过

红影 发表于 2023-4-24 20:10

马黑黑 发表于 2023-4-23 23:04
这个玩过

是的，我还用你的这个代码做过帖子，所以记得{:4_173:}
页: [1] 2
查看完整版本: Magic