明月天涯录

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

本帖最后由东篱闲人于 2023-7-19 13:12 编辑 <br /><br />
<style>
/* 父元素 */
#mydiv {
         margin: 20px auto 0;
         width: 1400px;
         height: 800px;
         LEFT: -400px;
         z-index: 1;
         background: #333 url('https://pic.imgdb.cn/item/64b52e3e1ddac507cc19a679.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>


<div id="mydiv"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=470736413" autoplay="autoplay" loop="loop"></audio>


<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 20:06

东篱大哥只喜欢这个效果啊，还可以套别的效果哦{:4_173:}

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

这个制作好漂亮，给东篱大哥点赞{:4_199:}

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

歌曲也很豪放，特别适合{:4_199:}

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

红影发表于 2023-7-17 20:06
东篱大哥只喜欢这个效果啊，还可以套别的效果哦

嗯嗯，这个是剪影效果。。。

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

红影发表于 2023-7-17 20:07
这个制作好漂亮，给东篱大哥点赞

色彩很好，这样的月色是不是很美。。。

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

老头这个小狗狗用上了，最好移动一下位置。小狗狗是仰望月亮的{:4_173:}

红影发表于 2023-7-17 22:27

东篱闲人发表于 2023-7-17 20:16
嗯嗯，这个是剪影效果。。。

是的，在这个帖子里特别漂亮{:4_187:}

红影发表于 2023-7-17 22:28

东篱闲人发表于 2023-7-17 20:17
色彩很好，这样的月色是不是很美。。。

东篱大哥会制图，对色彩肯定把握得很好呢{:4_199:}

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

小辣椒发表于 2023-7-17 21:49
老头这个小狗狗用上了，最好移动一下位置。小狗狗是仰望月亮的

有小狗吗？在哪？{:5_115:}

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

红影发表于 2023-7-17 22:28
东篱大哥会制图，对色彩肯定把握得很好呢

马马虎虎。。。

红影发表于 2023-7-18 15:50

东篱闲人发表于 2023-7-18 08:48
有小狗吗？在哪？

水里那个黄色的就是啊，还有红色的小舌头呢。东篱大哥自己没看到？{:4_173:}

东篱闲人 发表于 2023-7-18 16:04

红影发表于 2023-7-18 15:50
水里那个黄色的就是啊，还有红色的小舌头呢。东篱大哥自己没看到？

真没看到。。。{:5_153:}

红影发表于 2023-7-18 19:39

东篱闲人发表于 2023-7-18 16:04
真没看到。。。

这个是颜文字，有些电脑看不到的。图上的那个黑框那里就是。

东篱闲人 发表于 2023-7-18 19:59

红影发表于 2023-7-18 19:39
这个是颜文字，有些电脑看不到的。图上的那个黑框那里就是。

黑框看到了，好觉得挺别扭呢。。。{:5_117:}

红影发表于 2023-7-18 20:40

东篱闲人发表于 2023-7-18 19:59
黑框看到了，好觉得挺别扭呢。。。

那根不是黑框，是小狗狗，能看到的人会觉得很漂亮，东篱大哥不用别扭啊{:4_173:}

东篱闲人 发表于 2023-7-18 20:42

红影发表于 2023-7-18 20:40
那根不是黑框，是小狗狗，能看到的人会觉得很漂亮，东篱大哥不用别扭啊

四方狗？

红影发表于 2023-7-18 20:46

东篱闲人发表于 2023-7-18 20:42
四方狗？

不是啊，是黄色小狗。我家里电脑也不行，否则抓个图给你看看{:4_173:}

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

红影发表于 2023-7-18 20:46
不是啊，是黄色小狗。我家里电脑也不行，否则抓个图给你看看

这就是那个小狗？{:5_115:}

红影发表于 2023-7-19 16:50

东篱闲人发表于 2023-7-19 13:13
这就是那个小狗？

对的，能演示时是这样的
https://pic.imgdb.cn/item/64b7a3991ddac507cc9b1714.png

页: [1] 2

花潮论坛's Archiver

明月天涯录