思归 - 小新 （根据黑黑教程制作）TO：马黑黑
本帖最后由 加林森 于 2022-2-2 17:09 编辑 <br /><br /><style type="text/css">.mnBox {
margin: auto;
margin-top: 20px;
position: relative;
background: #333 url('https://pic.imgdb.cn/item/61f9f7902ab3f51d91acc12d.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=1914211561&auto=1&height=32"></iframe>
</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()*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-2-2 11:01
@马黑黑 看看一什么问题？我感觉播放器好像有点问题吧。
挺好的，没啥问题 现在终于调整好了。谢谢老黑的教程！{:5_154:} 加林森 发表于 2022-2-2 11:11
现在终于调整好了。谢谢老黑的教程！
这个用到的元素不多，图片合适的话，无需更改尺寸，需要更改的，有几个数值可以改改，主要是下雨的动画100%处，把 top 值跟着改一点就行 马黑黑 发表于 2022-2-2 11:11
挺好的，没啥问题
哈哈，我又换了另外一张图片。 马黑黑 发表于 2022-2-2 11:13
这个用到的元素不多，图片合适的话，无需更改尺寸，需要更改的，有几个数值可以改改，主要是下雨的动画10 ...
嗯嗯，谢谢。{:4_191:} 加林森 发表于 2022-2-2 11:18
嗯嗯，谢谢。
{:4_180:} 加林森 发表于 2022-2-2 11:18
哈哈，我又换了另外一张图片。
图片是讲究的，要么调整一些元素的数值 马黑黑 发表于 2022-2-2 11:26
图片是讲究的，要么调整一些元素的数值
是的，我在试看什么图片最合适的。 马黑黑 发表于 2022-2-2 11:25
{:4_190:} 队长也作出这么多雨丝，很赞的{:4_187:} 红影 发表于 2022-2-2 12:32
队长也作出这么多雨丝，很赞的
谢谢红影。初二快乐！{:4_187:} 加林森 发表于 2022-2-2 11:27
涟漪本应在水面之上才有。可以修改JS中对涟漪生成的随机位置百分比做设定，比如，水面在图中的水平位置如果在20%到70%之间、垂直位置预设在70%到90之间，那么：
var k1 = Math.ceil(Math.random()*100);
var k2 = Math.round(Math.random()*20+80);
改为：
var k1 = Math.round(Math.random()*70+20);
var k2 = Math.round(Math.random()*20+70); 马黑黑 发表于 2022-2-2 13:52
涟漪本应在水面之上才有。可以修改JS中对涟漪生成的随机位置百分比做设定，比如，水面在图中的水平位置如 ...
好的，我去修改。 加林森 发表于 2022-2-2 17:07
好的，我去修改。
不要改出问题来额{:5_106:} 马黑黑 发表于 2022-2-2 17:26
不要改出问题来额
现在已经改好了。你再看看。 加林森 发表于 2022-2-2 18:11
现在已经改好了。你再看看。
O(∩_∩)O好的 不错哈，这样更逼真了 马黑黑 发表于 2022-2-2 20:26
不错哈，这样更逼真了
就是就是
页:
[1]
2