论坛 › 音乐沙龙 › 点星

马黑黑 发表于 2023-6-16 19:53

点星

<css-doodle grid="10" id="mplayer">
        :doodle {
                @size: 1242px 699px;
                position: relative;
                background: url('https://638183.freep.cn/638183/t23/webp1/dmxk15.webp');
                box-shadow: 0 0 8px #000;
                opacity: .95;
                z-index: 1;
                margin: 0 0 0 calc(50% - 702px);
                --state: paused;
        }
        @nth(1) {
                @size: 100px;
                @shape: hypocycloid 4;
                @place: 50% 160px;
                background: radial-gradient(transparent, rgba(0,0,100,.8), rgba(255,255,255,.6));
                cursor: pointer;
                z-index: @size;
                animation: rot 6s infinite linear var(--state);
        }
        @match(i ≥ 2) {
                @size: @r(2,10)px;
                @shape: hypocycloid 4;
                @place: @r(20, 1242)px @r(0,200)px;
                background: #909ccb;
                opacity: .8;
                transform: rotate(-30deg);
                animation: flash .5s @r(-1)s infinite alternate;
        }
        @keyframes rot { to { transform: rotate(360deg); } }
        @keyframes flash { to { transform: rotate(30deg); opacity: 0; } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=505688656" 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-16 19:55

欣赏点赞！

马黑黑 发表于 2023-6-16 19:57

帖子代码
<css-doodle grid="10" id="mplayer">
        :doodle {
                @size: 1242px 699px;
                position: relative;
                background: url('https://638183.freep.cn/638183/t23/webp1/dmxk15.webp');
                box-shadow: 0 0 8px #000;
                opacity: .95;
                z-index: 1;
                margin: 0 0 0 calc(50% - 540px);
                --state: paused;
        }
        @nth(1) {
                @size: 100px;
                @shape: hypocycloid 4;
                @place: 50% 160px;
                background: radial-gradient(transparent, rgba(0,0,100,.8), rgba(255,255,255,.6));
                cursor: pointer;
                z-index: @size;
                animation: rot 6s infinite linear var(--state);
        }
        @match(i ≥ 2) {
                @size: @r(2,10)px;
                @shape: hypocycloid 4;
                @place: @r(20, 1242)px @r(0,200)px;
                background: #909ccb;
                opacity: .8;
                transform: rotate(-30deg);
                animation: flash .5s @r(-1)s infinite alternate;
        }
        @keyframes rot { to { transform: rotate(360deg); } }
        @keyframes flash { to { transform: rotate(30deg); opacity: 0; } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=505688656" 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-16 19:58

岩新新 发表于 2023-6-16 19:55
欣赏点赞！

晚上好

上海朝阳 发表于 2023-6-16 20:12

犹如玄机，神呀

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

嫦娥要找你收取月地使用费{:4_189:}

南无月 发表于 2023-6-16 20:18

一个大星星带一群小星星。。。
z-index: @size;还可以这么设？

马黑黑 发表于 2023-6-16 20:37

南无月 发表于 2023-6-16 20:18
一个大星星带一群小星星。。。
z-index: @size;还可以这么设？

@size 是 css-doodle 函数，返回单元格总数。第一个单元格用单元格总数做层级够了，它不会被压底层了。当然，更保险的做法是calc(@size + 1)

马黑黑 发表于 2023-6-16 20:41

上海朝阳 发表于 2023-6-16 20:12
犹如玄机，神呀

晚上好

马黑黑 发表于 2023-6-16 20:42

樵歌 发表于 2023-6-16 20:13
嫦娥要找你收取月地使用费

没见城管出没

小辣椒 发表于 2023-6-16 21:07

马黑黑 发表于 2023-6-16 20:42
没见城管出没

我就最烦城管{:4_170:}

马黑黑 发表于 2023-6-16 21:07

小辣椒 发表于 2023-6-16 21:07
我就最烦城管

{:4_172:}

小辣椒 发表于 2023-6-16 21:08

马黑黑 发表于 2023-6-16 20:37
@size 是 css-doodle 函数，返回单元格总数。第一个单元格用单元格总数做层级够了，它不会被压底层了。当 ...

这个我感觉很生疏，现在只能套用了

马黑黑 发表于 2023-6-16 21:10

小辣椒 发表于 2023-6-16 21:08
这个我感觉很生疏，现在只能套用了

对你来说，这是一个新的知识体系，不过会一点点HTML和CSS的，也基本能看懂，套用时改哪里心中不会没数

千羽 发表于 2023-6-16 21:12

黑黑老师会占星术啊，还有点像古钱币呢{:4_173:}

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

千羽 发表于 2023-6-16 21:12
黑黑老师会占星术啊，还有点像古钱币呢

眼里尽是钱钱钱。你不会想象成这是高雅艺术呀{:4_172:}

绿叶清舟 发表于 2023-6-16 21:13

这个星星漂亮

马黑黑 发表于 2023-6-16 21:17

绿叶清舟 发表于 2023-6-16 21:13
这个星星漂亮

这个也是裁剪出来的，不同的是，css-doodle帮剪的，你只需用一个指令：

@shape: hypocycloid 4;

千羽 发表于 2023-6-16 21:19

马黑黑 发表于 2023-6-16 21:13
眼里尽是钱钱钱。你不会想象成这是高雅艺术呀

哈哈，你才是呢……你得先{:4_203:}有那个想象的空间呀

马黑黑 发表于 2023-6-16 21:19

千羽 发表于 2023-6-16 21:19
哈哈，你才是呢……你得先有那个想象的空间呀

月亮辣么大，空间还不够吗

查看完整版本: 点星