论坛 › 欢乐水吧 › 《宁夏 (口哨)》（纯音乐）【根据老黑的教程制作】

加林森 发表于 2022-5-6 11:09

《宁夏 (口哨)》（纯音乐）【根据老黑的教程制作】

本帖最后由 加林森 于 2022-5-7 10:37 编辑 <br /><br /><style>
.bgDiv {
      left: -202px;
      width: 1000px;
      height: 644px;
      background-color: rgb(0,0,0);
      background-image: radial-gradient(circle, white 2px, green 32px, gray 36px,blue), linear-gradient(120deg, pink,tan);
      background-blend-mode: overlay,difference,lighten;
      animation: magic 50s ease-in-out infinite alternate;
      position: relative;
}
.bgDiv img { position: absolute; left: 0; top: 0; mix-blend-mode: multiply; }
.mamaDiv {
      width: 100px;
      height: 100px;
      left: calc(50% - 50px);
      top: calc(50% - 50px);
      cursor: pointer;
      position: relative;
      animation: rot 4s linear infinite;
}
.sonDiv {
      width: inherit;
      height: inherit;
      border: 1px solid red;
      border-radius: 0 100%;
      position: absolute;
}
@keyframes rot { to { transform: rotate(1turn); } }
@keyframes magic { to { background-color: rgb(255,255,255); } }
</style>

<div class="bgDiv">
      <img src ="https://pic.imgdb.cn/item/6274b2ee0947543129fdcff8.jpg" alt="" />
      <div class="mamaDiv"></div>
</div>

<script>
let flag = true;
let mama = document.querySelector('.mamaDiv');
let divStr = '';
for(j=0; j<5; j++){
      let color = Math.random().toString(16).substr(-6);
      divStr += `<div class='sonDiv' style='border-color: #${color}; transform: rotate(${j*72}deg)'></div>`;
}
mama.innerHTML += divStr;

let au = document.createElement('audio');
au.src = 'https://www.joy127.com/url/90203.mp3';
au.autoplay = flag;
au.loop = true;
au.style.display = 'none';
mama.appendChild(au);

mama.onclick = function(){
      flag ? (au.pause(), this.style.animationPlayState = 'paused', flag = false) : (au.play(), this.style.animationPlayState = 'running', flag = true);
}
</script>

加林森 发表于 2022-5-6 11:09

@马黑黑

加林森 发表于 2022-5-6 11:12

好神奇的变化，一张明亮的图片，随着播放器的转变图片变得很多种颜色了。老黑真厉害。

红影 发表于 2022-5-6 12:58

漂亮，这个图图选得不错。队长学得真快{:4_187:}

加林森 发表于 2022-5-6 13:00

红影 发表于 2022-5-6 12:58
漂亮，这个图图选得不错。队长学得真快

谢谢红影！{:4_204:}我准备再去换一张有太阳的，试一试是什么样子的。

马黑黑 发表于 2022-5-6 13:01

加林森 发表于 2022-5-6 11:12
好神奇的变化，一张明亮的图片，随着播放器的转变图片变得很多种颜色了。老黑真厉害。

这是背景色、渐变背景、图片在多个滤镜下综合作用的结果。创作前的知识准备是对所使用的滤镜掌握好，知道每一个滤镜会咋样，结合背景、图片有机组织起来，就能产生很不一般的观感。

加林森 发表于 2022-5-6 13:06

马黑黑 发表于 2022-5-6 13:01
这是背景色、渐变背景、图片在多个滤镜下综合作用的结果。创作前的知识准备是对所使用的滤镜掌握好，知道 ...

是的是的，我这次感受很深的。谢谢老黑为我们分享了这么多的知识。{:4_190:}

马黑黑 发表于 2022-5-6 13:07

加林森 发表于 2022-5-6 13:06
是的是的，我这次感受很深的。谢谢老黑为我们分享了这么多的知识。

这个能用就好，能理解那就更好

加林森 发表于 2022-5-6 13:21

马黑黑 发表于 2022-5-6 13:07
这个能用就好，能理解那就更好

能理解的。我又要去养老院了，等会见！

梦油 发表于 2022-5-6 15:04

优美的（口哨）乐曲，与大图相互呼应，相得益彰。

来看你 发表于 2022-5-6 16:21

声音都变没了 {:5_115:}

加林森 发表于 2022-5-6 16:50

梦油 发表于 2022-5-6 15:04
优美的（口哨）乐曲，与大图相互呼应，相得益彰。

是的是的。

加林森 发表于 2022-5-6 16:50

来看你 发表于 2022-5-6 16:21
声音都变没了

有声音的啊

红影 发表于 2022-5-6 22:21

加林森 发表于 2022-5-6 13:00
谢谢红影！我准备再去换一张有太阳的，试一试是什么样子的。

看到了，挺好的{:4_187:}

加林森 发表于 2022-5-6 23:08

红影 发表于 2022-5-6 22:21
看到了，挺好的

谢谢啊！{:4_204:}

梦油 发表于 2022-5-7 10:31

加林森 发表于 2022-5-6 16:50
是的是的。

加林森朋友的制作越来越精彩

加林森 发表于 2022-5-7 10:36

梦油 发表于 2022-5-7 10:31
加林森朋友的制作越来越精彩

谢谢老梦鼓励！

梦油 发表于 2022-5-7 11:31

加林森 发表于 2022-5-7 10:36
谢谢老梦鼓励！

期待你的新作。

加林森 发表于 2022-5-7 11:40

梦油 发表于 2022-5-7 11:31
期待你的新作。

我刚才又发了一个帖出来，你去听听。

梦油 发表于 2022-5-7 13:22

加林森 发表于 2022-5-7 11:40
我刚才又发了一个帖出来，你去听听。

好的。我现在就去欣赏

查看完整版本: 《宁夏 (口哨)》（纯音乐）【根据老黑的教程制作】