红影 发表于 2023-7-16 09:13

最美不过你的笑 TO 芊芊

<style>
#mydiv {
      margin: 90px 0 0 calc(50% - 593px);
      width: 1024px;
      height: 640px;
      z-index: 1;

      box-shadow: 0 0 8px 0 #000;
      overflow: hidden;
      position: relative;
}
li-zi {
      position: absolute;
      border-radius: 100% 100% 100% 0;
      background: lightblue;
      box-shadow: inset -2px -2px 10px 0 antiquewhite;
      opacity: .9;
      cursor: pointer;
      transform: rotate(-45deg);
}
#pic1 {
      position: absolute;
      right: 2.4%;
      top: 80%;
      width: 150px;
      height: 90px;
      opacity: 0.8;
}
body { overflow-x: hidden; }
#baiBox {
      margin: auto;
      width: 400px;
      text-align: center;
      font-size: 4.0rem;
      font-weight: bold;
      font-family: Arial,"FangSong";
      color: transparent;      
      background: linear-gradient(180deg,hsla(240,100%,35%,.65),hsla(320,100%,60%,.85));
      filter: drop-shadow(2px 2px 6px hsla(45,0%,0%,.95));
      -webkit-background-clip: text;
      transform-origin: top;
      animation: yao 1.2s linear infinite alternate;
}
@keyframes yao {
      from{transform: perspective(800px) rotatex(30deg); }
      to { transform: perspective(800px) rotatex(-30deg); }
}
.shipin { position: absolute; width: 100%; height: 695px; top:-55px;object-fit: cover; z-index: -10 }
.vid { position: absolute;LEFT: 100px;top:-110px; width: 180px; height: 200px; object-fit: cover; opacity: 0.7; clip-path: circle(99% at bottom) ;mix-blend-mode: lighten; z-index: -2 }
.wenzi { position: absolute; right:15px; bottom: 20px; color: #FFFFBB; font: bold 16px/20px 'FangSong',serif; opacity: .45; }
</style>

<div id="mydiv">
<video class="shipin" src="https://img.tukuppt.com/video_show/2475824/00/02/16/5b53eaca0f2f5_10s_big.mp4" muted="muted" autoplay="autoplay" loop="loop"></video>
<div id="baiBox" style="position: absolute; left:300px; top: 20px; z-index: 2">欢迎芊芊归来</div>
<img id="pic1" src="https://pic.imgdb.cn/item/64a8acda1ddac507ccdd9df6.gif" alt="" />
<div class="wenzi">2023年7月16日 红影</div>
<video class="vid" style="position: relative; LEFT: 120px; TOP: 280px" src="https://img.tukuppt.com/video_show/2475824/00/07/98/5d146a6b076b0_10s_big.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
<video class="vid" style="position: relative; LEFT: 320px; TOP: 280px" src="https://img.tukuppt.com/video_show/2475824/00/07/98/5d146a6b076b0_10s_big.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
</div>
<audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2021/01/31/ab98efc0f5b93727587b2d9d99f48eaa.mp3" autoplay="autoplay" loop="loop"></audio>

<script>
(function() {

//粒子运动开关
let canMove = true;

//创建 Lizi 类
class Lizi {
      //构造函数 : 属性设计/设置 pa - 粒子宿主元素，size - 粒子大小
      constructor(pa,size = 20) {
                this.pa = pa;
                this.size = size;
                this.bg = 'purple';
                this.left = 10;
                this.top = 10;
                this.ystep = 1; //垂直移动步幅
                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;
                        background: ${this.bg};
                `;
                this.pa.appendChild(this.ele);
                this.moving();
      }
      //移动粒子
      moving() {
                if(canMove) {
                        this.left += this.xstep;
                        this.top += this.ystep;
                        if(this.top <= -this.size) this.top = this.pa.offsetHeight;
                        this.ele.style.left = this.left + 'px';
                        this.ele.style.top = this.top + 'px';
                }
                requestAnimationFrame(this.moving.bind(this));
      }
}

//实例化Lizi
Array.from({length: 40}).forEach((element) => {
      element = new Lizi(mydiv);
      element.size = 20 + Math.ceil(Math.random() * 20);
      element.left = Math.floor(Math.random() * (mydiv.offsetWidth - element.size));
      element.top = Math.floor(Math.random() * (mydiv.offsetHeight - element.size));
      element.xstep = 0;
      element.ystep = -0.5 - Math.random();
      element.bg = '#' + Math.random().toString(16).substr(-6);
      element.creating();
});

mState = () => aud.paused ? (mydiv.style.setProperty('--state','paused'),canMove = false) : (mydiv.style.setProperty('--state','running'),canMove = true);
      aud.addEventListener('play', mState, false);
      aud.addEventListener('pause', mState, false);
      mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();

})();
</script>

红影 发表于 2023-7-16 09:15

学习一个气球效果，谢谢黑黑的代码{:4_204:}

红影 发表于 2023-7-16 09:16

@芊芊看到你回来，特别开心{:4_177:}

樵歌 发表于 2023-7-16 09:44

好热烈的场面！那歌曲也真好，里面站了两个灵魂一样的人物手舞足蹈的，是怎么做到的。师妹把黑科技用得娴熟无比！

樵歌 发表于 2023-7-16 09:45

最开心的事莫过于见到老朋友归来{:4_205:}

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

樵歌 发表于 2023-7-16 09:44
好热烈的场面！那歌曲也真好，里面站了两个灵魂一样的人物手舞足蹈的，是怎么做到的。师妹把黑科技用得娴熟 ...
那个是视频，我加了两个视频在里面而已。关键是气球的代码，是套用黑黑的{:4_173:}

红影 发表于 2023-7-16 09:51

樵歌 发表于 2023-7-16 09:45
最开心的事莫过于见到老朋友归来

是啊，看到芊芊找回QQ，终于联系上了，真的是喜上眉梢呢{:4_205:}

罗浮梦 发表于 2023-7-16 10:42

真有心的礼物，祝芋芋收礼开心

南无月 发表于 2023-7-16 11:29

树林里飞着五颜六色的气球，还有两位舞者快乐的起舞。。贴子热烈大气，欣赏影子好贴！随影子一起欢迎芊芊回坛！{:4_187:}{:4_199:}

醉美水芙蓉 发表于 2023-7-16 12:01

芊芊 发表于 2023-7-16 12:22

谢谢

红影 发表于 2023-7-16 12:48

罗浮梦 发表于 2023-7-16 10:42
真有心的礼物，祝芋芋收礼开心

谢谢梦儿，周日快乐{:4_187:}

红影 发表于 2023-7-16 12:49

南无月 发表于 2023-7-16 11:29
树林里飞着五颜六色的气球，还有两位舞者快乐的起舞。。贴子热烈大气，欣赏影子好贴！随影子一起欢迎芊芊回 ...

在视频之上另加了两个视频，图个热闹{:4_173:}

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

醉美水芙蓉 发表于 2023-7-16 12:01
欣赏红影美女漂亮的帖子！

谢谢焱鑫磊鼓励，中午好{:4_187:}

红影 发表于 2023-7-16 12:51

芊芊 发表于 2023-7-16 12:22
谢谢

抱抱芊芊，不客气啊{:4_179:}

南无月 发表于 2023-7-16 13:25

红影 发表于 2023-7-16 12:49
在视频之上另加了两个视频，图个热闹

目的达到了，效果非常好{:4_187:}

红影 发表于 2023-7-16 15:11

南无月 发表于 2023-7-16 13:25
目的达到了，效果非常好

谢谢月儿，被你夸奖特别开心{:4_173:}

樵歌 发表于 2023-7-16 19:41

红影 发表于 2023-7-16 09:50
那个是视频，我加了两个视频在里面而已。关键是气球的代码，是套用黑黑的

所以师妹是活学活用！

樵歌 发表于 2023-7-16 19:43

红影 发表于 2023-7-16 09:51
是啊，看到芊芊找回QQ，终于联系上了，真的是喜上眉梢呢

嗯，见到故人归来，喜之不尽呢

红影 发表于 2023-7-16 20:42

樵歌 发表于 2023-7-16 19:41
所以师妹是活学活用！

师兄只是没去学而已，否则也一样啊。{:4_173:}
页: [1] 2
查看完整版本: 最美不过你的笑 TO 芊芊