烟雨行舟TO马黑

绿叶清舟 发表于 2022-3-10 14:56

本帖最后由绿叶清舟于 2022-3-10 20:13 编辑 <br /><br /><style type="text/css">

.mnBox {
margin: auto;
margin-top: 20px;
position: relative;
background: #333 url('https://pic.imgdb.cn/item/622999b05baa1a80abf81c7a.jpg') no-repeat center/cover;
height: 800px;
width: 1200px;
top: -5px;
left: -300px;
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: -50px;
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: 8px; 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%;}
}

@keyframes rao {
   from {right:-70px; } to {right:-780px; }
}
.dong {
   margin:0px auto;
   width:700px;
   height:400px;
   padding:10px;
left: -1000px;
   background:url('') no-repeat right center;
}
.s_img {
   animation:rao 56s infinite alternate;
   width:77px;
   height:70px;
   position:relative;
   top:523px;
}
</style>

<div id="mnBox" class="mnBox">
<span class="rain"></span>
<span class="circle"></span>
<div class="dong">
<img class="s_img" alt="" src="https://pic.imgdb.cn/item/62299c015baa1a80abf9de64.png" />
</div>
</div>

<script language="javascript">
function rain() {
var str = "";
for(i=0; i<20; i++) {
var l = Math.ceil(Math.random()*800);
str += "<span class='rain' style='left:" + l +"px;'></span>";
}
for(j=0;j<10; j++){
var k1 = Math.ceil(Math.random()*100);
var k2 = Math.round(Math.random()*20+80);
str += "<span class='circle' style='left:" + k1 +"%;top:" + k2 +"%;'></span>";
}
document.getElementById('mnBox').innerHTML += str;
}
rain();
</script>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=3 height=6 src="//music.163.com/outchain/player?type=2&id=1301884692&auto=1&height=6"></iframe>

偶然~ 发表于 2022-3-10 14:57

唯美的作品，辛苦了。

加林森 发表于 2022-3-10 15:24

清舟制作真漂亮，辛苦了！{:4_187:}
老黑收礼开心！@马黑黑

马黑黑 发表于 2022-3-10 16:43

加林森发表于 2022-3-10 15:24
清舟制作真漂亮，辛苦了！
老黑收礼开心！@马黑黑

谢谢

马黑黑 发表于 2022-3-10 16:46

小船的行驶好创意。整帖大气漂亮，歌曲有特点

加林森 发表于 2022-3-10 17:16

马黑黑发表于 2022-3-10 16:43
谢谢

不客气的。

马黑黑 发表于 2022-3-10 17:18

加林森发表于 2022-3-10 17:16
不客气的。

客气一下是应该的

加林森 发表于 2022-3-10 17:19

马黑黑发表于 2022-3-10 17:18
客气一下是应该的

好的好的

马黑黑 发表于 2022-3-10 17:20

加林森发表于 2022-3-10 17:19
好的好的

{:4_190:}

加林森 发表于 2022-3-10 17:26

马黑黑发表于 2022-3-10 17:20

谢茶

大猫咪 发表于 2022-3-10 19:33

清舟制作真棒，好创意，特别是那慢慢远去的小船让歌曲更有味道了。。。

{:4_204:}{:4_199:}

红影发表于 2022-3-10 20:02

清舟的春代码于是漂亮，还有一只滑过的小船儿，真是好创意{:4_199:}

樵歌发表于 2022-3-10 20:03

好一幅动态的水墨丹青！小黑收礼开森。

红影发表于 2022-3-10 20:03

画面设计漂亮，动静相宜。真美。黑黑收礼开心{:4_187:}

樵歌发表于 2022-3-10 20:04

那渔舟一定安装马达了，跑得飞快。{:4_173:}

绿叶清舟 发表于 2022-3-10 20:07

加林森发表于 2022-3-10 15:24
清舟制作真漂亮，辛苦了！
老黑收礼开心！@马黑黑

谢谢队长，不辛苦{:4_189:}

绿叶清舟 发表于 2022-3-10 20:09

樵歌发表于 2022-3-10 20:04
那渔舟一定安装马达了，跑得飞快。

现在的人没马达都不知道咋开船了{:4_189:}

绿叶清舟 发表于 2022-3-10 20:12

马黑黑发表于 2022-3-10 16:46
小船的行驶好创意。整帖大气漂亮，歌曲有特点

船好象还能再慢些吧

马黑黑 发表于 2022-3-10 20:13

绿叶清舟发表于 2022-3-10 20:12
船好象还能再慢些吧

可以调整

绿叶清舟 发表于 2022-3-10 20:15

大猫咪发表于 2022-3-10 19:33
清舟制作真棒，好创意，特别是那慢慢远去的小船让歌曲更有味道了。。。

素材找着找着想起来让船动起来或许又是种味道了

页: [1] 2 3

花潮论坛's Archiver

烟雨行舟TO马黑