醉美水芙蓉 发表于 2023-7-11 22:01

一枝梅

<style>#papa {
        margin: 0 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: tan url('https://pic.imgdb.cn/item/64ad53bb1ddac507ccc07a13.png')no-repeat center / cover; ;
        box-shadow: 0 0 8px #000;
        display: grid;
        place-items: center;
        position: relative;
        overflow: hidden;
        --state: paused;
}

#mydiv {
      margin: 20px auto;
      width: 1024px;
         height: 640px;
      overflow: hidden;
      position: relative;
      opacity: .96;
}
li-zi {
      position: absolute;
      animation: rot 9s infinite linearvar(--state);
}
@keyframes rot { to { transform: rotate(3turn); } }

css-doodle { position: absolute; }
</style>
<div id="papa"><div id="mydiv"></div>
        <css-doodle grid="1" id="mplayer">
                :doodle { @size: 60px; cursor: pointer; left: 30px; bottom: 30px; opacity: .96;z-index: 4; }
                clip-path: @shape(
                        fill: evenodd;
points: 300;
scale: .45;
x: cos(2t) + cos(7t);
y: sin(2t) + sin(7t);
                );
                background: linear-gradient(DeepSkyBlue,LightSkyBlue,MediumPurple);
                animation: rot 6s infinite linear var(--state);
                @keyframes rot { to { transform: rotate(360deg); } }
        </css-doodle>

<css-doodle>
</css-doodle></div><audio id="aud" src="https://music.163.com/song/media/outer/url?id=431080654" autoplay="autoplay" loop="loop"></audio><script>(function() {
let canMove = true;
class Lizi {
      constructor(pa) {
                this.pa = pa;
                this.left = 10;
                this.top = 10;
                this.xstep = 0;
                this.ystep = 0;
                this.ele = document.createElement('li-zi');
      }

      creating() {
                this.ele.style.cssText = `
                        left: ${this.left}px;
                        top: ${this.top}px;
                `;
                this.pa.appendChild(this.ele);
                this.moving();
      }

      moving() {
      if(canMove) {
                this.left += this.xstep;
                this.top += this.ystep;
                if(this.left >= this.pa.offsetWidth) this.left = - this.ele.offsetWidth;
                if(this.top >= this.pa.offsetHeight) this.top = -this.ele.offsetHeight;
                this.ele.style.left = this.left + 'px';
                this.ele.style.top = this.top + 'px';
                }
                requestAnimationFrame(this.moving.bind(this));
      }
}               
//let stepAr = ;
let stepAr = ;
let txtAr = ['\u{2744}','\u{2746}','\u{2744}','\u{2744}','\u2745','\u2733'];
Array.from({length: 160}).forEach((element) => {
      let xIdx = Math.floor(Math.random() * stepAr.length),
                yIdx = Math.floor(Math.random() * stepAr.length),
                txtIdx = Math.floor(Math.random() * txtAr.length);
      element = new Lizi(mydiv);
      element.left = Math.ceil(Math.random() * (mydiv.offsetWidth - 50));
      element.top = Math.ceil(Math.random() * (mydiv.offsetHeight - 50));
      element.xstep = stepAr;
      element.ystep = stepAr;
      element.bg = 'none';
      element.ele.innerText = txtAr;
      element.creating();
      
      element.ele.style.fontSize = 10 + Math.ceil(Math.random() * 26) + 'px';
      element.ele.style.color = '#' + Math.random().toString(16).substr(-6);
});

        let script = document.createElement('script');
        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.3.0/css-doodle.min.js';
      script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
        document.head.appendChild(script);
        let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'), canMove = false) : (papa.style.setProperty('--state','running'), canMove = true);
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        window.onload = () => {
                let btn = papa.shadowRoot.querySelector('cell');
                btn.onclick = () => aud.paused ? aud.play() : aud.pause();
        }
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();</script>

东篱闲人 发表于 2023-7-11 22:09

漂亮！{:5_116:}

红影 发表于 2023-7-11 22:22

漂亮的多彩花瓣。欣赏水芙蓉美女好帖{:4_187:}

马黑黑 发表于 2023-7-11 22:39

南无月的雪花

庶民 发表于 2023-7-12 05:58

意境真美

醉美水芙蓉 发表于 2023-7-12 07:08

东篱闲人 发表于 2023-7-11 22:09
漂亮！

谢谢老师鼓励！

醉美水芙蓉 发表于 2023-7-12 07:09

红影 发表于 2023-7-11 22:22
漂亮的多彩花瓣。欣赏水芙蓉美女好帖

谢谢红影美女支持！

醉美水芙蓉 发表于 2023-7-12 07:10

马黑黑 发表于 2023-7-11 22:39
南无月的雪花

老师早上好！

醉美水芙蓉 发表于 2023-7-12 07:10

庶民 发表于 2023-7-12 05:58
意境真美

老师来了！真好！

樵歌 发表于 2023-7-12 07:54

太美了！{:4_178:}

小文 发表于 2023-7-12 08:55

这是多么的漂亮的雪啊，赞！{:4_178:}

南无月 发表于 2023-7-12 10:49

这个意境太美了，彩色雪花跟白衣女子更搭。。。{:4_187:}

醉美水芙蓉 发表于 2023-7-12 11:57

樵歌 发表于 2023-7-12 07:54
太美了！

谢谢樵歌支持！

醉美水芙蓉 发表于 2023-7-12 11:57

小文 发表于 2023-7-12 08:55
这是多么的漂亮的雪啊，赞！

谢谢小文支持！

醉美水芙蓉 发表于 2023-7-12 11:58

南无月 发表于 2023-7-12 10:49
这个意境太美了，彩色雪花跟白衣女子更搭。。。

这个是月儿五彩雪花！

樵歌 发表于 2023-7-12 12:27

醉美水芙蓉 发表于 2023-7-12 11:57
谢谢樵歌支持！

必须的呀{:4_187:}

小辣椒 发表于 2023-7-12 21:37

欣赏水芙蓉的精彩制作{:4_171:}

醉美水芙蓉 发表于 2023-7-12 21:44

小辣椒 发表于 2023-7-12 21:37
欣赏水芙蓉的精彩制作

小辣椒美女晚上好！

南无月 发表于 2023-7-12 21:55

醉美水芙蓉 发表于 2023-7-12 11:58
这个是月儿五彩雪花！

{:4_199:}用得好，很漂亮！
页: [1]
查看完整版本: 一枝梅