马黑黑 发表于 2022-2-4 14:28

半山听雨

本帖最后由 马黑黑 于 2022-2-4 14:30 编辑 <br /><br /><style type="text/css">
#banshan {
      margin: auto;
      position: relative;
      width: 720px;
      height: 500px;
      overflow: hidden;
      background: #000 url('https://www.huachaowang.com/data/attachment/forum/202202/04/142745qzg6t556pm06kopv.jpg') no-repeat center/cover;
}

#banshan iframe {
        position: absolute;
        left: -248px;
        top: calc(100% - 50px);
        clip-path: circle(16px at 271px);
        opacity: 0.8;
}
.rain_b {
        position: absolute;
        top: 0; height: 0;
        width: 2px;
        height: 4px;
        background: #ddd;
        animation: drop_rain 0.5s linear infinite;
}
@keyframes drop_rain {
        0% { opacity:0.5; }
        100% { opacity:0.8; top:100%;}
}
</style>

<div id="banshan">
        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=52 src="https://music.163.com/outchain/player?type=2&id=1839474588&auto=1&height=32"></iframe>
</div>

<script language="javascript">

function raining() {
      var pa = document.getElementById('banshan');
      for(i=0; i<100; i++) {
                var rain = document.createElement('div');
                rain.className = "rain_b";
                rain.style.left = Rnd(1,100) + "%";
                rain.style.top = Rnd(-400, -10) + "px";
                rain.style.animation = "drop_rain 0." + Rnd(2,9) + "s linear infinite";
                rain.style.animationDelay = Rnd(0,15) + "s";
                pa.appendChild(rain);
      }
}

function Rnd(min, max){ return Math.floor(Math.random() * (max - min + 1) + min); }

raining();

</script>

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

发现不要涟漪也很好看，尤其在这样的背景下。{:4_187:}

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

音乐很好听。欣赏黑黑纯css代码做的美丽的雨丝{:4_187:}

大猫咪 发表于 2022-2-4 15:44

本帖最后由 大猫咪 于 2022-2-4 16:03 编辑

真美，猫最喜欢的音乐之一，{:5_117:} 老黑越来越棒了，精彩不断，必须赞！

{:4_204:}{:4_190:}

大猫咪 发表于 2022-2-4 16:00

这个萧版的也很好听，独具幽谧，再来杯茶老黑 {:4_190:}禅音过耳绕心间

静心,亦清心 ，不自禁地忘了俗世的烦恼，得一片悠然清绝的心世界。。。

{:4_204:}

来看你 发表于 2022-2-4 17:10

好看又好听 {:4_199:}

加林森 发表于 2022-2-4 17:52

清凉世界，忘记了自己是谁，把自己容入这个世界中。音乐很空灵，真好的纯音乐。美就一个子。{:4_199:}

马黑黑 发表于 2022-2-4 19:31

红影 发表于 2022-2-4 15:36
发现不要涟漪也很好看，尤其在这样的背景下。

这里没办法放涟漪{:4_170:}

马黑黑 发表于 2022-2-4 19:32

红影 发表于 2022-2-4 15:37
音乐很好听。欣赏黑黑纯css代码做的美丽的雨丝

严格来讲是CSS+JS雨丝

马黑黑 发表于 2022-2-4 19:32

加林森 发表于 2022-2-4 17:52
清凉世界，忘记了自己是谁，把自己容入这个世界中。音乐很空灵，真好的纯音乐。美就一个子。

音乐确实不错{:5_108:}

马黑黑 发表于 2022-2-4 19:33

大猫咪 发表于 2022-2-4 15:44
真美，猫最喜欢的音乐之一， 老黑越来越棒了，精彩不断，必须赞！

我知道你会喜欢

马黑黑 发表于 2022-2-4 19:33

大猫咪 发表于 2022-2-4 16:00
这个萧版的也很好听，独具幽谧，再来杯茶老黑 禅音过耳绕心间

静心,亦清心 ，不自禁地忘了俗世 ...

嗯，听了会忘掉一切忧烦

马黑黑 发表于 2022-2-4 19:33

来看你 发表于 2022-2-4 17:10
好看又好听

节日好！

加林森 发表于 2022-2-4 19:43

马黑黑 发表于 2022-2-4 19:32
音乐确实不错

你也制作得好啊。画面真美！

马黑黑 发表于 2022-2-4 19:44

加林森 发表于 2022-2-4 19:43
你也制作得好啊。画面真美！

图音相符{:4_170:}

加林森 发表于 2022-2-4 20:05

马黑黑 发表于 2022-2-4 19:44
图音相符

对啊。{:4_199:}

红影 发表于 2022-2-4 20:35

马黑黑 发表于 2022-2-4 19:31
这里没办法放涟漪

不一定都每次要涟漪的啊{:4_173:}

红影 发表于 2022-2-4 20:36

马黑黑 发表于 2022-2-4 19:32
严格来讲是CSS+JS雨丝

不管是什么，效果很棒，沉醉在音画的世界里，不能自拔。这音乐太好听了，令人浮想联翩{:4_187:}

马黑黑 发表于 2022-2-4 20:54

红影 发表于 2022-2-4 20:36
不管是什么，效果很棒，沉醉在音画的世界里，不能自拔。这音乐太好听了，令人浮想联翩

这个音乐我听了几遍，觉得很好

马黑黑 发表于 2022-2-4 20:55

红影 发表于 2022-2-4 20:35
不一定都每次要涟漪的啊

嗯嗯，是这个道理
页: [1] 2 3
查看完整版本: 半山听雨