加林森 发表于 2022-5-15 20:59

《半山听雨》-南箫 - 酒城笛歌


<style type="text/css">

.mnBox {
        margin: auto;
        margin-top: 20px;
        position: relative;
        background: #333 url('https://pic.imgdb.cn/item/6280f2650947543129ee5cbf.jpg') no-repeat center/cover;
        height: 400px;
        width: 720px;
        border: 1px solid;
        box-shadow: 0px 0px 0px 8px tan;
}
.mnBox iframe {
        position: absolute;
        left: -248px;;
        top: calc(100% - 50px);
        clip-path: circle(16px at 271px);
        opacity: 0.8;
}
.rain {
        width: 1px;
        height: 8px;
        top: -5px;
        left: 100px;
        background: #eee;
        position: relative;
        display: block;
        animation: rain 0.5s linear infinite;
}

.rain::before, .rain::after{
        content: "";
        position: absolute;
        left: 10px;
        top: -120px;
        width: 1px;
        height: 10px;
        background: #eee;
}

.rain::after { height: 12px; left: -70px; top: 50px; }

.circle {
        position:absolute;
        width: 3px;
        height: 1px;
        left: 85px;
        top: 90%;
        background:none;
        border: 1px solid #FFF;
        border-radius: 50%;
        animation:circle 2s ease-out infinite;
}

@keyframes circle {
        0% { width:0; height:0; }
        50% { opacity:0.1; width:2%; height:2%; }
        60% { opacity:0.2; width:2%; height:2%; }
        100% { opacity:0; width:2%; height:2%; }
}

@keyframes rain {
        0% { opacity:0.5; }
        100% { opacity:0.5; top:40%;}
}

</style>

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


<script language="javascript">
function rain() {
        var str = "";
        for(i=0; i<10; i++) {
                var l = Math.ceil(Math.random()*500);
                str += "<span class='rain' style='left:" + l +"px;'></span>";
        }
        for(j=0;j<10; j++){
                var k1 = Math.ceil(Math.random()*70+20);
                var k2 = Math.round(Math.random()*20+70);
                str += "<span class='circle' style='left:" + k1 +"%;top:" + k2 +"%;'></span>";
        }
        document.getElementById('mnBox').innerHTML += str;
}
rain();
</script>

东篱闲人 发表于 2022-5-15 21:04

这个好有意境。。。{:5_116:}

加林森 发表于 2022-5-15 21:06

东篱闲人 发表于 2022-5-15 21:04
这个好有意境。。。

谢谢老兄喜欢，我也挺喜欢的。{:5_116:}

大猫咪 发表于 2022-5-15 21:07

队长真棒！ 图音融合的漂亮！ 幽幽入耳，旋律入心， 释然、清心！ 赞！

{:4_187:}{:4_199:}

东篱闲人 发表于 2022-5-15 21:08

加林森 发表于 2022-5-15 21:06
谢谢老兄喜欢，我也挺喜欢的。

嗯嗯，美！

加林森 发表于 2022-5-15 21:10

大猫咪 发表于 2022-5-15 21:07
队长真棒！ 图音融合的漂亮！ 幽幽入耳，旋律入心， 释然、清心！ 赞！

猫猫也喜欢啊，那就好。{:4_204:}{:4_190:}

加林森 发表于 2022-5-15 21:10

东篱闲人 发表于 2022-5-15 21:08
嗯嗯，美！

知道的，夜景很美的。

大猫咪 发表于 2022-5-15 21:16

加林森 发表于 2022-5-15 21:10
猫猫也喜欢啊，那就好。

一直喜欢的经典    谢谢队长{:4_179:}

小辣椒 发表于 2022-5-15 21:18

队长真用功，又在复习以前的按钮了{:4_187:}

小辣椒 发表于 2022-5-15 21:19

这个图图光感特别漂亮

加林森 发表于 2022-5-15 21:19

大猫咪 发表于 2022-5-15 21:16
一直喜欢的经典    谢谢队长

嗯嗯，一样的。{:4_179:}

绿叶清舟 发表于 2022-5-15 21:22

队长这个制作太有味道了，很喜欢的曲

加林森 发表于 2022-5-15 21:22

小辣椒 发表于 2022-5-15 21:18
队长真用功，又在复习以前的按钮了

就是的。

加林森 发表于 2022-5-15 21:23

小辣椒 发表于 2022-5-15 21:19
这个图图光感特别漂亮

我给它加亮的。

小辣椒 发表于 2022-5-15 21:24

加林森 发表于 2022-5-15 21:23
我给它加亮的。

现在做图图有感觉了，越来越漂亮了

加林森 发表于 2022-5-15 21:25

小辣椒 发表于 2022-5-15 21:24
现在做图图有感觉了，越来越漂亮了

嗯嗯，比原来好多了。

加林森 发表于 2022-5-15 21:27

绿叶清舟 发表于 2022-5-15 21:22
队长这个制作太有味道了，很喜欢的曲

是的，我刚才看见这首音乐，就赶紧找图片，选了这张图片再制作了一下就变成这样了。

绿叶清舟 发表于 2022-5-15 21:28

加林森 发表于 2022-5-15 21:27
是的，我刚才看见这首音乐，就赶紧找图片，选了这张图片再制作了一下就变成这样了。

很棒的，效果加得也好

加林森 发表于 2022-5-15 21:29

绿叶清舟 发表于 2022-5-15 21:28
很棒的，效果加得也好

谢谢清舟了。{:4_204:}

红影 发表于 2022-5-15 21:58

队长的制作选图很好，意境营造得很棒，真美{:4_187:}
页: [1] 2
查看完整版本: 《半山听雨》-南箫 - 酒城笛歌