大猫咪 发表于 2022-3-31 23:19

学习

本帖最后由 大猫咪 于 2022-4-1 13:35 编辑 <br /><br /><style type="text/css">
#outBox {
      position: relative;
      border: 1px solid;
      border-color: navyred magenta green;
      width: 1200px;
      height: 576px;
      background: green url('https://s3.bmp.ovh/imgs/2022/03/31/667109fdc45e6a53.webp') 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 class="wyyPlay" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=408307811&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-3-31 23:32

本帖最后由 大猫咪 于 2022-4-1 13:36 编辑 <br /><br />{:5_112:}

加林森 发表于 2022-3-31 23:32

猫猫，音乐呢？

大猫咪 发表于 2022-3-31 23:32

晕老黑MP3放哪里啊   

大猫咪 发表于 2022-3-31 23:34

加林森 发表于 2022-3-31 23:32
猫猫，音乐呢？

放进去了不会响队长

加林森 发表于 2022-3-31 23:35

大猫咪 发表于 2022-3-31 23:32

猫猫你可以用老黑的的代码啊！老歌曲好听的。{:4_204:}{:4_179:}

大猫咪 发表于 2022-3-31 23:35

加林森 发表于 2022-3-31 23:32
猫猫，音乐呢？

队长MP3 代码放哪里{:4_190:}

加林森 发表于 2022-3-31 23:37

大猫咪 发表于 2022-3-31 23:32
晕老黑MP3放哪里啊

音乐代码啊

大猫咪 发表于 2022-3-31 23:37

本帖最后由 大猫咪 于 2022-3-31 23:39 编辑

加林森 发表于 2022-3-31 23:37
音乐代码啊
我放进去了不会响   在那格

加林森 发表于 2022-3-31 23:38

老歌曲好听的！

加林森 发表于 2022-3-31 23:39

大猫咪 发表于 2022-3-31 23:35
队长MP3 代码放哪里

音乐地址啊

大猫咪 发表于 2022-3-31 23:39

加林森 发表于 2022-3-31 23:39
音乐地址啊

不知道放真那   

加林森 发表于 2022-3-31 23:41

大猫咪 发表于 2022-3-31 23:39
不知道放真那

你好好看看啊；

大猫咪 发表于 2022-3-31 23:42

加林森 发表于 2022-3-31 23:39
音乐地址啊

眼睛好痛    明天来改    队长也早点休息    晚安{:4_204:}{:4_179:}

加林森 发表于 2022-3-31 23:50

大猫咪 发表于 2022-3-31 23:42
眼睛好痛    明天来改    队长也早点休息    晚安

好的好的，直接放进音乐地址就行了。猫猫好好休息啊！{:4_204:}{:4_179:}

加林森 发表于 2022-4-1 00:06

加油，猫猫懂的。

红影 发表于 2022-4-1 10:51

猫猫也做出来了，真棒{:4_199:}

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

猫猫，这个是你的音乐地址代码：
<div id="outBox">
      <iframe class="wyyPlay" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="http://music.163.com/song/media/outer/url?id=408307811.mp3"></iframe>
</div>

这个是我的音乐地址代码：
<div id="outBox">
      <iframe class="wyyPlay" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=1350455964&auto=1&height=66"></iframe>
</div>
现在你看看就明白了。

大猫咪 发表于 2022-4-1 13:33

加林森 发表于 2022-4-1 13:32
猫猫，这个是你的音乐地址代码：

      


谢谢队长{:4_179:}这就学习{:4_190:}

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

大猫咪 发表于 2022-4-1 13:33
谢谢队长这就学习

嗯嗯。
页: [1] 2
查看完整版本: 学习