小辣椒 发表于 2023-5-6 21:57

微风 （套用黑黑房前效果）


<css-doodle id="mplayer">
:doodle {
    margin: 120px 0 0 calc(50% - 730px);
    @grid: 26x1 / 1276px 700px;
    background: #eee url('https://wx.ttt.dj/updir/62d4283186dd7.gif') no-repeat center / cover;
    box-shadow: 0 0 8px #000;
    pointer-events: none;
    position: relative;
    -webkit-box-reflect: below 0px linear-gradient(transparent,transparent 85%,rgba(0,0,0,.8));
    --state: paused;
}

--colors: (#75b9be,#696d7d,#d72638,#f49d37,#140f2d);
--color-1: @p(--colors);
--color-2: @P;
--transform: translateY(@r(2, 90)%);
--size: 30px;
transform: var(--transform) rotate(0deg);
transform-origin: 50% 100%;

@random(0.5) { animation: swing @r(3, 5)s ease infinite alternate both; }
@random(0.5) { animation: swingLeft @r(3, 5)s ease infinite alternate both; }

@keyframes swing {
    0% { transform: var(--transform) rotate(0deg); }
    100% { transform: var(--transform) rotate(1deg); }
}

@keyframes swingLeft {
    0% { transform: var(--transform) rotate(0deg); }
    100% { transform: var(--transform) rotate(-1deg); }
}

@keyframes rot {
        0% { transform: var(--transform) rotate(0deg); }
        100% { transform: var(--transform) rotate(360deg); }
}

::after {
    content: "";
    position: absolute;
    top: -15px;
    left: calc(50% - var(--size) / 2);
    width: var(--size);
    height: var(--size);
    background: @p(
      radial-gradient(@stripe(@m4(var(--color-@pn(1, 2))), transparent 29.7%)),
      @doodle(
      @grid: 1 / 100%;
      ::after {
          content: "@p(✿,❁,❀,❃,❊)";
          position: absolute;
          top: -4px;
          left: 50%;
          transform: translate3d(-50%, 0, 0);
          font-size: 40px;
          color: transparent;
          background-image: radial-gradient(var(--color-1) 20%, var(--color-2) calc(20% + 0.5px));
          -webkit-background-clip: text;
      }
      ),
      @doodle(
      @grid: 1 / 100%;
      ::after {
          content: "@p(&#127800;,&#127804;)";
          position: absolute;
          top: 0;
          left: 50%;
          transform: translate3d(-50%, 0, 0);
          font-size: 28px;
          color: transparent;
          background-image: radial-gradient(var(--color-1) 20%, var(--color-2) calc(20% + 0.5px));
          -webkit-background-clip: text;
      }
      )
    );
}

background: @doodle(
    @grid: 1x40;
    background: linear-gradient(90deg, @stripe(transparent, @p(--colors) 2px, transparent));

    @nth(1, 2) {
      ::before { display: none; }
    }

    @random(.5) {
      ::before {
      content: "";
      @place: 10px center;
      @size: 50% 100%;
      border-radius: 0 100% 0 100%;
      background: @p(--colors);
      -webkit-box-reflect: @p(right, initial);
      }
    }
);

@at(@X, @Y) {
        @size: 100px;
        @shape: clover 4;
        @place: 50% 10%;
        background: crimson;
        transform-origin: 50% 50%;
        animation: rot 6s infinite linear var(--state);
        ::before { display: none; }
        ::after { display: none; }
        cursor: pointer;
        pointer-events: auto;
       
}
</css-doodle>
<audio id="aud" src="https://wx.ttt.dj/updir/62d428bb180b0.mp3" autoplay loop></audio>

<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 = () => mplayer.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>
<br><br><br><br><br><br>

小辣椒 发表于 2023-5-6 21:58

@马黑黑

黑黑纯套用，旧图，旧音乐，就看看效果怎么样{:4_189:}

小辣椒 发表于 2023-5-6 21:59

黑黑太强大，纯代码编辑的花朵，树叶，真的不可想象

焱鑫磊 发表于 2023-5-6 22:18

欣赏小辣椒佳作！{:4_187:}

小辣椒 发表于 2023-5-6 22:21

焱鑫磊 发表于 2023-5-6 22:18
欣赏小辣椒佳作！

哈哈~~这个是纯套用，js现在我真的不够理解

马黑黑 发表于 2023-5-6 22:34

效果杠杠的

竹溪 发表于 2023-5-6 22:50

好看。欣赏点赞。

樵歌 发表于 2023-5-7 06:26

献给小盆友的礼物。{:4_189:}

醉美水芙蓉 发表于 2023-5-7 06:58

红影 发表于 2023-5-7 09:14

这个做得漂亮，那么多树丛都是代码的表现。亲爱的好帖{:4_199:}

梦缘 发表于 2023-5-7 16:47

效果好棒，欣赏问好！{:4_176:}

三月的阳光 发表于 2023-5-7 20:34

师傅，周末快乐，制作的效果肯定是极佳的~~{:4_199:}

千羽 发表于 2023-5-8 19:51

小辣椒学的真快，添加了几个动图，很生动绚丽的画面{:4_187:}

千羽 发表于 2023-5-8 19:53

这个播放器很养眼的，漂亮{:4_181:}
页: [1]
查看完整版本: 微风 （套用黑黑房前效果）