绿叶清舟 发表于 2022-4-1 11:04

祝九生日快乐



<style type="text/css">
#outBox {
      position: relative;
      border: 1px solid;
      border-color: navyred magenta green;
      width: 1080px;
      height: 676px;
      background: green url('https://pic.imgdb.cn/item/62466b0627f86abb2ae8ad1a.jpg') no-repeat center/cover;
      left: -304px;
}
.balloon {
      width: 200px;
      height: 200px;
      background: radial-gradient(circle at 10% 20%, rgba(0,128,0,.5), rgba(0,96,48,.8));
      border-radius: 100% 100% 60% 100%;
      transform: rotate(45deg);
      position: relative;
      left: calc(50% - 100px);
      top: 300px;
      animation: up 5s linear infinite;
}

.balloon::before, .balloon::after { content: ''; position: absolute; }

.balloon::before {
      width: 1px;
      height:100px;
      background: rgba(0,0,0,.7);
      left: 100%;
      top: 100%;
      transform: rotate(-45deg) translate(35px,-12px);
}

.balloon::after {
      background: rgba(0,128,0,.85);
      width: 10px;
      height: 10px;
      border-radius: 10%;
      top: 100%;
      left: 100%;
      transform: rotate(-45deg) translate(0,-28px);
}

.wyyPlay {
      position: absolute;
         width: 330px;
      height: 86px;
      left: 20px;
      top: 20px;
      clip-path: circle(33px at 43px 43px);
      border: 0;
      opacity: .4;
}

@keyframes up {
      to { top: -600px; }
}
.box { width: 100px; height: 100px; border: 1px solid; }
</style>

<div id="outBox">
      <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=4874234&auto=1&height=66"></iframe>
</div>

<script language="javascript">

let bln = document.getElementById('outBox');
let bArr = ['b0', 'b1', 'b2', 'b3', 'b4'];

for(j=0; j<5; j++) {
      let bBb = document.createElement('div');
      bBb.id = "b" + j;
      bBb.setAttribute('class','balloon');
      bBb.style.left = `${j*300-100}px`;
      chgColor(bBb);
      bln.appendChild(bBb);
}

function chgColor(obj){
      let c1 = `#${Math.random().toString(16).substr(-6)}`;
      let c2 = `#${Math.random().toString(16).substr(-6)}`;
      obj.style.background =`linear-gradient(120deg, ${c1} 0%, ${c2} 100%)`;
}

setInterval(function(){
      for (j=0; j<5; j++) {
                chgColor(document.getElementById(bArr));
      }
}, 5000);

</script>

小九 发表于 2022-4-1 11:13

谢谢清舟还记得，很开心的收下礼物{:5_150:}{:4_187:}

加林森 发表于 2022-4-1 12:36

小九生日快乐！{:4_204:}

小九 发表于 2022-4-1 12:50

加林森 发表于 2022-4-1 12:36
小九生日快乐！

谢谢队长！一起开心快乐！{:4_187:}

大猫咪 发表于 2022-4-1 12:58

清舟好用心的制作 ，温馨 ，歌真温暖！   一起祝福小九生日快乐！幸福安康！

{:4_204:}{:4_191:}{:4_176:}{:4_177:}{:5_166:}

加林森 发表于 2022-4-1 13:11

小九 发表于 2022-4-1 12:50
谢谢队长！一起开心快乐！

好的好的。{:4_204:}{:4_176:}

毋问我从哪里来 发表于 2022-4-1 14:14

快乐快乐快快乐！{:5_166:}

四海八荒 发表于 2022-4-1 15:52

小九生日快乐。

小九 发表于 2022-4-1 16:17

大猫咪 发表于 2022-4-1 12:58
清舟好用心的制作 ，温馨 ，歌真温暖！   一起祝福小九生日快乐！幸福安康！

{:4_176 ...

谢谢猫咪的祝福！ 一起快乐！{:4_191:}

小九 发表于 2022-4-1 16:18

毋问我从哪里来 发表于 2022-4-1 14:14
快乐快乐快快乐！

谢谢毋问！ 愿你的每一天都幸福平安快乐！{:4_191:}{:4_171:}

小九 发表于 2022-4-1 16:18

四海八荒 发表于 2022-4-1 15:52
小九生日快乐。

谢谢四海！ 也祝福你快乐与平安！{:4_171:}{:4_191:}

安宁 发表于 2022-4-1 17:47

蹭蛋糕吃的同学来了~~~~~
安宁蹭吃不送礼，写句祝福送给你，如果嫌礼不够，再把我也往上凑~~~~~我的宝贝，生日快乐！{:4_179:}

来看你 发表于 2022-4-1 19:21

好看的帖子，真诚的祝福

祝福小九 {:4_187:}

红影 发表于 2022-4-1 19:24

这气球效果用在这里真喜庆，欣赏清舟好帖。同祝九儿生日快乐{:4_187:}

小九 发表于 2022-4-1 19:45

安宁 发表于 2022-4-1 17:47
蹭蛋糕吃的同学来了~~~~~
安宁蹭吃不送礼，写句祝福送给你，如果嫌礼不够，再把我也往上凑~~~~~我的宝贝， ...

谢谢小安宁！ 也祝福你快乐每一天{:4_187:}{:4_183:}

小九 发表于 2022-4-1 19:45

来看你 发表于 2022-4-1 19:21
好看的帖子，真诚的祝福

祝福小九

谢谢看看！ 喜欢你的歌声！{:5_150:}{:4_187:}

小九 发表于 2022-4-1 19:46

红影 发表于 2022-4-1 19:24
这气球效果用在这里真喜庆，欣赏清舟好帖。同祝九儿生日快乐

谢谢影子！ 一起开心吃蛋糕{:4_187:}

红影 发表于 2022-4-2 11:15

小九 发表于 2022-4-1 19:46
谢谢影子！ 一起开心吃蛋糕

九儿的生日很特别呢，很容易记{:4_173:}
页: [1]
查看完整版本: 祝九生日快乐