东篱闲人 发表于 2023-7-17 17:32

明月夜

本帖最后由 东篱闲人 于 2023-7-17 18:59 编辑 <br /><br /><!-- CSS代码 -->
    <style>
    /* 父元素 */
    #mydiv {
            margin: 20px auto 0;
            width: 1400px;
            height: 800px;
            LEFT: -400px;
            z-index: 1;
            background: #333 url('https://pic.imgdb.cn/item/64b50ab01ddac507cc963912.jpg');
            box-shadow: 0 0 8px 0 #000;
            overflow: hidden;
            position: relative;
            --state: paused;
    }
    /* 父元素伪元素 ：通用属性 */
    #mydiv::before, #mydiv::after {
            position: absolute;
            content: '';
            cursor: pointer;
            transition: 1s;
    }
    /* 狗 */
    #mydiv::before {
            content: '\1F415';
            font: normal 60px sans-serif;
            transform: translate(510px,540px) rotate(45deg);
    }
    /* 月亮 */
    #mydiv::after {
            width: 80px;
            height: 80px;
            background: linear-gradient(45deg,antiquewhite 0%, snow 90%, snow 100%);
            border-radius: 50%;
            left: calc(50% - 40px);
            top: 20px;
            box-shadow: 0 0 30px 0px lightblue, 0 0 100px 0 white;
    }
    /* 月亮变大 */
    #mydiv:hover:after { transform: scale(1.5); }
    /* 粒子 */
    li-zi {
            position: absolute;
            background: lightblue;
            opacity: .9;
            transform: rotate(-45deg);
            animation: flash .5s var(--delay) infinite alternate var(--state);
            --delay: 0s;
    }
    /* 关键帧动画 ：旋转+闪烁 */
    @keyframes flash {
            to { transform: rotate(-30deg); opacity: .2; }
    }
    </style>

    <!-- HTML代码 -->
    <div id="mydiv"></div>
    <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1909912633" autoplay="autoplay" loop="loop"></audio>

    <!-- JS代码 -->
    <script>
            //类
            let total = 100;
            class Lizi {
                  constructor(pa,size = 20) {
                            this.pa = pa;
                            this.size = size;
                            this.left = 10;
                            this.top = 10;
                            this.ele = document.createElement('li-zi');
                  }
                  creating() {
                            this.ele.style.cssText = `
                                    width: ${this.size}px;
                                    height: ${this.size}px;
                                    left: ${this.left}px;
                                    top: ${this.top}px;
                            `;
                            this.pa.appendChild(this.ele);
                  }
            }
            //实例化类
            Array.from({length: total}).forEach((element,key) => {
                  let r = 10 + Math.random() * 160;
                  element = new Lizi(mydiv);
                  element.size = 2 + Math.ceil(Math.random() * 2);
                  element.left = key < total / 2 ? Math.random() * 400 : 600 + Math.random() * 390;
                  element.top = key < total / 2 ? Math.random() * 200 : Math.random() * 160;
                  element.creating();
                  element.ele.style.setProperty('--delay', Math.random() + 's');
            });
            //音频控制
            let mState = () => mydiv.style.setProperty('--state', aud.paused ? 'paused' : 'running');
            aud.addEventListener('play', mState, false);
            aud.addEventListener('pause', mState, false);
            mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();

    </script>

东篱闲人 发表于 2023-7-17 17:35

本帖最后由 东篱闲人 于 2023-7-17 18:01 编辑

行了。

马黑黑 发表于 2023-7-17 18:05

美不胜收

醉美水芙蓉 发表于 2023-7-17 18:06

东篱闲人 发表于 2023-7-17 19:00

马黑黑 发表于 2023-7-17 18:05
美不胜收

生套！{:5_106:}

东篱闲人 发表于 2023-7-17 19:00

醉美水芙蓉 发表于 2023-7-17 18:06
太美了！

{:4_180:}

马黑黑 发表于 2023-7-17 19:01

东篱闲人 发表于 2023-7-17 19:00
生套！

套的好

红影 发表于 2023-7-17 19:09

东篱大哥的制图加上黑黑的代码，真是绝妙的组合。好漂亮的制作{:4_199:}

红影 发表于 2023-7-17 19:10

欢迎东篱大哥加入代码制作小组{:4_173:}

东篱闲人 发表于 2023-7-17 19:11

马黑黑 发表于 2023-7-17 19:01
套的好

你多做点能套的。。。

东篱闲人 发表于 2023-7-17 19:11

红影 发表于 2023-7-17 19:10
欢迎东篱大哥加入代码制作小组

整不了，迷糊。。。。

红影 发表于 2023-7-17 19:35

东篱闲人 发表于 2023-7-17 19:11
整不了，迷糊。。。。

套用还是挺方便的啊，东篱大哥多试，肯定就不迷糊了{:4_173:}这个

东篱闲人 发表于 2023-7-17 19:36

红影 发表于 2023-7-17 19:35
套用还是挺方便的啊，东篱大哥多试，肯定就不迷糊了这个

对。看有适合的就生套！{:5_112:}

红影 发表于 2023-7-17 19:37

东篱闲人 发表于 2023-7-17 19:36
对。看有适合的就生套！

这个就特别适合。那一闪一闪的月亮好美呀。{:4_204:}

东篱闲人 发表于 2023-7-17 20:02

红影 发表于 2023-7-17 19:37
这个就特别适合。那一闪一闪的月亮好美呀。

再套一个。。。

红影 发表于 2023-7-17 20:10

东篱闲人 发表于 2023-7-17 20:02
再套一个。。。

新套的那个更好，特别豪放{:4_199:}

马黑黑 发表于 2023-7-17 21:51

东篱闲人 发表于 2023-7-17 19:11
你多做点能套的。。。

我做的都能套，很安全、稳定、好用

小辣椒 发表于 2023-7-17 21:52

老头这个图图配的月亮特别漂亮{:4_199:}

东篱闲人 发表于 2023-7-18 08:50

马黑黑 发表于 2023-7-17 21:51
我做的都能套，很安全、稳定、好用

氛围适合的少，都眼花缭乱的。。。{:5_117:}

东篱闲人 发表于 2023-7-18 08:51

小辣椒 发表于 2023-7-17 21:52
老头这个图图配的月亮特别漂亮

这个月亮可以送给师傅，拿去玩呗。。。
页: [1] 2
查看完整版本: 明月夜