绿叶清舟 发表于 2023-6-24 21:19

幻境


<css-doodle grid="10" id="mplayer">
      :doodle {
                @size: 1100px 700px;
                position: relative;
                background: url('https://pic.imgdb.cn/item/6496eb3a1ddac507ccdc7138.jpg');
                box-shadow: 0 0 8px #000;
                opacity: .95;
                z-index: 1;
                margin: 0 0 0 calc(50% - 633px);
                --state: paused;
      }
      @nth(1) {
                @size: 50px;
                @shape: hypocycloid 4;
                @place: 38.5% 158px;
                background: radial-gradient(transparent, rgba(35,255,-50,.8), rgba(2,79,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=526468496" 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-24 21:28

做梦的样子

小九 发表于 2023-6-24 21:35

梦幻{:4_187:}

岩新新 发表于 2023-6-24 21:44

欣赏点赞！

醉美水芙蓉 发表于 2023-6-24 22:16

红影 发表于 2023-6-24 23:18

非常迷幻的画面。清舟的制图非常奇妙。那个小播放器也很不错，正好套在背景上，真漂亮的制作{:4_199:}

梦油 发表于 2023-6-25 10:12

虚幻神异的境界在科技日益发达的今天渐渐成为现实，一切将不再遥远。

绿叶清舟 发表于 2023-7-1 20:50

马黑黑 发表于 2023-6-24 21:28
做梦的样子

梦到啥了

马黑黑 发表于 2023-7-1 20:51

绿叶清舟 发表于 2023-7-1 20:50
梦到啥了

蚊子叮咬

绿叶清舟 发表于 2023-7-1 20:51

梦油 发表于 2023-6-25 10:12
虚幻神异的境界在科技日益发达的今天渐渐成为现实，一切将不再遥远。

将来都分不清活在梦里还是现实里了

绿叶清舟 发表于 2023-7-1 20:52

红影 发表于 2023-6-24 23:18
非常迷幻的画面。清舟的制图非常奇妙。那个小播放器也很不错，正好套在背景上，真漂亮的制作

教程都没时间去看了，只能瞎折腾个

绿叶清舟 发表于 2023-7-1 20:52

醉美水芙蓉 发表于 2023-6-24 22:16
清舟的图图就是高级！

谢谢芙蓉，晚上好

绿叶清舟 发表于 2023-7-1 20:52

岩新新 发表于 2023-6-24 21:44
欣赏点赞！

谢谢新新

绿叶清舟 发表于 2023-7-1 20:55

马黑黑 发表于 2023-7-1 20:51
蚊子叮咬

真是，是不是被咬太少了到梦里想着了

马黑黑 发表于 2023-7-1 20:56

绿叶清舟 发表于 2023-7-1 20:55
真是，是不是被咬太少了到梦里想着了

好久不见都是想念{:4_170:}

绿叶清舟 发表于 2023-7-1 21:00

马黑黑 发表于 2023-7-1 20:56
好久不见都是想念

你那蚊子出差去了吗，这时节会见不着啊

马黑黑 发表于 2023-7-1 21:01

绿叶清舟 发表于 2023-7-1 21:00
你那蚊子出差去了吗，这时节会见不着啊

估计是蚊子不喜欢抽烟喝酒的人吧

绿叶清舟 发表于 2023-7-1 21:04

马黑黑 发表于 2023-7-1 21:01
估计是蚊子不喜欢抽烟喝酒的人吧

怕被你灌醉了啊{:5_117:}

红影 发表于 2023-7-1 21:38

绿叶清舟 发表于 2023-7-1 20:52
教程都没时间去看了，只能瞎折腾个

你那么忙，还在做帖子，已经很不容易了，何况还做的这么漂亮。{:4_187:}

马黑黑 发表于 2023-7-1 21:48

绿叶清舟 发表于 2023-7-1 21:04
怕被你灌醉了啊

有可能
页: [1] 2
查看完整版本: 幻境