论坛 › 祝福礼堂 › 一首萨克斯风送猫猫生日快乐 (学习套用黑黑明月逐人归效果）

小辣椒 发表于 2023-7-13 00:24

一首萨克斯风送猫猫生日快乐 (学习套用黑黑明月逐人归效果）

<!-- CSS代码 -->
<style>
/* 父元素 */
#mydiv {
       margin: 150pxcalc(50% - 790px);      
      width: 1413px;
      height: 775px;
      z-index: 1;
      background: #333 url('https://yinhua.ru/20221214/6IF.gif');
      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 120px sans-serif;
      transform: translate(910px,580px) rotate(25deg);
}
/* 月亮 */
#mydiv::after {
      width: 70px;
      height: 70px;
      background: linear-gradient(45deg,antiquewhite 0%,White 90%,White 100%);
      border-radius: 50%;
      left: calc(41% - 33px);
      top: 85px;
      box-shadow: 0 0 30px 0px lightblue, 0 0 100px 0 white;
}
/* 月亮变大 */
#mydiv:hover:after { transform: scale(1.2); }
/* 粒子 */
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; }

}
#btz {
      position: absolute;
         left: 100px;
      top: 900px;
      background-image:url('https://xlaj.cn/assets/file/zp/20230712224126.gif'); background-size:cover;
      width:800px; height:200px; font: bold 2.6em serif;
      text-align:center; line-height:200px; color:transparent;
      -webkit-background-clip:text;
      border:0px #f0e9e8 solid; z-index: 20;
}
</style>
<div id="btz">猫猫生日快乐</div>

</style>

<!-- HTML代码 -->
<div id="mydiv"></div>
<audio id="aud" src="https://xlaj.cn/assets/file/zp/20230712224205.mp3" 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-13 00:28

猫猫生日到了，小辣椒来不及做漂亮的图图了，就这个以前的图图重新做一次加了黑黑的（明月逐人归）效果，学习做一次，作业当礼物了，不嫌弃啊{:4_179:}

小辣椒 发表于 2023-7-13 00:30

@马黑黑
黑黑小辣椒就挑最简单的作业完成一个，还带送礼了{:4_170:}

马黑黑 发表于 2023-7-13 06:40

小辣椒 发表于 2023-7-13 00:30
@马黑黑
黑黑小辣椒就挑最简单的作业完成一个，还带送礼了

狗狗Emoji文本图标，在安卓下挺漂亮

樵歌 发表于 2023-7-13 07:08

所有可爱的都 来给猫咪庆祝生日了。好好玩呵。猫咪今天要开心，明天后天以后天天都开心。{:4_204:}{:4_176:}

樵歌 发表于 2023-7-13 07:13

在昨光下，在木屋旁，夜空静谧，多美好和谐的庆典！小辣椒创意无限！

梦油 发表于 2023-7-13 09:56

借小辣椒朋友的精美贺帖，祝福猫咪朋友生日快乐、万事如意！

红影 发表于 2023-7-13 11:02

亲爱的好漂亮的帖子。今天是猫猫生日的正日子，在明亮的月光下，一起祝福猫猫生日快乐{:4_187:}{:4_177:}

辫子哥哥 发表于 2023-7-13 12:47

祝猫咪生日快乐{:4_191:}{:4_176:}

小九 发表于 2023-7-13 15:43

这音乐很有快乐的氛围哟，猫生日快乐{:4_187:}

千羽 发表于 2023-7-13 19:48

静谧的乡村夜晚，天幕上显示了浪漫又温馨的生日祝福，好美呀，猫咪快乐收礼来{:4_187:}

千羽 发表于 2023-7-13 19:50

借下小辣椒的美图，同祝猫咪生日快乐，幸福快乐{:4_187:}

大猫咪 发表于 2023-7-13 20:01

谢谢辣椒精美好帖，真漂亮！{:5_106:}{:4_187:}好喜欢这场景，环绕耳边的音符在空气中悠然地飘着
随风而至，给人以如痴如醉的享受！真棒！
也祝辣椒每一天都健康开心幸福，平平安安，事事顺心！
{:4_204:}{:4_178:}{:5_150:}{:4_191:}

大猫咪 发表于 2023-7-13 20:02

小辣椒 发表于 2023-7-13 00:28
猫猫生日到了，小辣椒来不及做漂亮的图图了，就这个以前的图图重新做一次加了黑黑的（明月逐人归）效果，学 ...

制作好棒 啊，老喜欢了{:4_187:}{:4_179:}干一杯{:4_176:}

大猫咪 发表于 2023-7-13 20:05

千羽 发表于 2023-7-13 19:48
静谧的乡村夜晚，天幕上显示了浪漫又温馨的生日祝福，好美呀，猫咪快乐收礼来

谢谢千羽祝福{:4_204:}开心！来干一杯{:4_176:} 祝小仙女天天开心，健健康康，平平安安，事事顺心！

{:5_106:}{:4_204:}{:4_178:}

千羽 发表于 2023-7-13 20:08

大猫咪 发表于 2023-7-13 20:05
谢谢千羽祝福开心！来干一杯 祝小仙女天天开心，健健康康，平平安安，事事顺心！

{ ...

谢谢小小猫咪，祝你生日快乐，天天开心，健健康康，平平安安，事事顺心！{:4_187:}

醉美水芙蓉 发表于 2023-7-13 21:01

小辣椒 发表于 2023-7-13 21:34

马黑黑 发表于 2023-7-13 06:40
狗狗Emoji文本图标，在安卓下挺漂亮

是的，我感觉特别的漂亮，小狗狗我放大了尺寸，因为这个图图原来就有一个月亮，所以我把这个月亮效果移动了一下，就把狗狗的仰视角度调整了一下，看看整体效果感觉很好，哈哈。{:4_173:}

谢谢黑黑的教程分享

小辣椒 发表于 2023-7-13 21:36

樵歌 发表于 2023-7-13 07:08
所有可爱的都 来给猫咪庆祝生日了。好好玩呵。猫咪今天要开心，明天后天以后天天都开心。{:4_176: ...

樵哥哥也是喜欢过生日啊{:4_170:}

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

樵歌 发表于 2023-7-13 07:13
在昨光下，在木屋旁，夜空静谧，多美好和谐的庆典！小辣椒创意无限！

樵哥哥，这个图图是岁月的原创，我只是加了几个效果而已，岁月才是最棒的

查看完整版本: 一首萨克斯风送猫猫生日快乐 (学习套用黑黑明月逐人归效果）