《烟雨行舟（原唱：伦桑）》-司南
本帖最后由 加林森 于 2022-3-8 17:39 编辑 <br /><br /><style type="text/css">.mnBox {
margin: auto;
margin-top: 20px;
position: relative;
background: #333 url('https://pic.imgdb.cn/item/622600405baa1a80ab80cbb4.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=1301884692&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>
@马黑黑 @红影 @绿叶清舟 @大猫咪 队长都会制作下雨了 {:5_106:} 真漂亮，音乐融合的真棒！
{:4_187:}{:4_199:} 大猫咪 发表于 2022-3-7 21:42
队长都会制作下雨了真漂亮，音乐融合的真棒！
这个是原来老黑教的教程，今天又制作一个，怕忘记了。{:4_190:} 加林森 发表于 2022-3-7 21:43
这个是原来老黑教的教程，今天又制作一个，怕忘记了。
队长真棒 ！{:4_187:}看着舒服{:4_190:} 大猫咪 发表于 2022-3-7 21:48
队长真棒 ！看着舒服
老黑有教程的，我们几个都制作过的。 加林森 发表于 2022-3-7 21:49
老黑有教程的，我们几个都制作过的。
嗯嗯慢慢学习{:4_187:}先消化下{:5_106:} 大猫咪 发表于 2022-3-7 21:52
嗯嗯慢慢学习 先消化下
好的好的。 漂亮，司南的歌有特点 马黑黑 发表于 2022-3-7 22:07
漂亮，司南的歌有特点
谢谢老黑，这些都是你教我们的。{:4_187:} 加林森 发表于 2022-3-7 22:29
谢谢老黑，这些都是你教我们的。
{:4_180:} 马黑黑 发表于 2022-3-7 22:38
{:4_191:}你喝 加林森 发表于 2022-3-7 22:41
你喝
好的，谢谢 马黑黑 发表于 2022-3-7 22:47
好的，谢谢
嗯嗯 很美的雨景，是加的flash？ 队长现在也是制图高手了，来祝贺下{:4_187:}{:4_176:} 漂亮的纯css雨丝，队长这个帖子真漂亮{:4_187:} 千羽 发表于 2022-3-7 22:52
很美的雨景，是加的flash？
不是的 千羽 发表于 2022-3-7 22:53
队长现在也是制图高手了，来祝贺下
全部是代码制作的！ 红影 发表于 2022-3-7 22:59
漂亮的纯css雨丝，队长这个帖子真漂亮
谢谢红影啊。我怕忘记原来制作的，又制作了一个。