请教黑黑老师
<style type="text/css">.mnBox {
margin: auto;
margin-top: 150px;
position: relative;
background: #333 url('https://wj.zp68.com/lxx/yunhua/2022/02/11/GIF.gif') no-repeat center/cover;
height: 726px;
width: 1285px;
left: -340px;;
border: 1px solid;
box-shadow: 0px 0px 0px 2px tan;
}
.mnBox iframe {
position: absolute;
left: -48px;;
top: calc(100% - 50px);
clip-path: circle(16px at 271px);
opacity: 0.8;
}
.rain {
width: 1px;
height: 8px;
top: -5px;
left: 200px;
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>
</div>
<script language="javascript">
function rain() {
var str = "";
for(i=0; i<50; i++) {
var l = Math.ceil(Math.random()*1200);
str += "<span class='rain' style='left:" + l +"px;'></span>";
}
for(j=0;j<40; j++){
var k1 = Math.ceil(Math.random()*100);
var k2 = Math.round(Math.random()*40+70);
str += "<span class='circle' style='left:" + k1 +"%;top:" + k2 +"%;'></span>";
}
document.getElementById('mnBox').innerHTML += str;
}
rain();
</script>
黑黑，我这个播放器放不进去，昨天后来我想用文件夹上传，把css,js都下载了，电脑预览好的，上传后出来有乱码了
<audio style="width:0px;height:0px;" controls="controls" autoplay="autoplay" loop="loop" src="https://oss.shandianpan.com/fb779314f4a9eff9aa66e87090f3a1da.mp3" type="audio/mpeg"></audio> 上次灯笼我下载了文件夹加H5播放器是好的，这次没有成功
我估计又是父盘的问题我不会加的原因 那个文字也是跑上面去了 重新做一次 你那边的帖打开就转出去了，不能回帖@马黑黑 亲爱的帖子做的真漂亮。滚动字和播放器的确跑出去了，等着黑黑来解答{:4_204:} 代码这么长啊
我昨天贴歌准备用这个播放器的，结果显示出来的是一个大黑点 ，一动不动的大黑点 红影 发表于 2022-2-11 21:31
亲爱的帖子做的真漂亮。滚动字和播放器的确跑出去了，等着黑黑来解答
是的，主要我这个父容器怎么设置不懂，本来可以想笨办法，我可以分开上传，但这个按钮就是不行，上传出来有乱码 来看你 发表于 2022-2-11 21:38
代码这么长啊
我昨天贴歌准备用这个播放器的，结果显示出来的是一个大黑点 ，一动不动的大黑点
看看，这个单用转盘按钮很简单的，我是加下雨特效里面不会 小辣椒 发表于 2022-2-11 21:43
看看，这个单用转盘按钮很简单的，我是加下雨特效里面不会
按钮是这个代码吗 <div class="paBox">
<div class="soBox"></div>
<!-- 按钮 -->
<div id="roBox" class="roBox60" style="left:-5%;top:-120.9%;">●</div>
</div>
<audio id="ymusic" src="https://oss.shandianpan.com/fb779314f4a9eff9aa66e87090f3a1da.mp3" autoplay="autoplay" loop="loop"></audio> 来看你 发表于 2022-2-11 21:45
按钮是这个代码吗
上面都要加进去，那边我艾特你了，你去看看，要源码我发出来你看看。这个要黑黑来纠正错误的 这个，太乱，修改不如重建 马黑黑 发表于 2022-2-11 21:59
这个，太乱，修改不如重建
怎么重建呢？是不是父容器没有加进去？ 马黑黑 发表于 2022-2-11 21:59
这个，太乱，修改不如重建
黑黑我删了吧 小辣椒 发表于 2022-2-11 22:02
怎么重建呢？是不是父容器没有加进去？
总之吧，你要整合，不是两个东东简单放在一起，这可不是搭伙过日子{:4_170:}
<style type="text/css">
.mnBox {
margin: auto;
margin-top: 150px;
position: relative;
background: #333 url('https://wj.zp68.com/lxx/yunhua/2022/02/11/GIF.gif') no-repeat center/cover;
height: 726px;
width: 1285px;
left: -340px;
border: 1px solid;
box-shadow: 0px 0px 0px 2px tan;
}
.rain {
width: 1px;
height: 8px;
top: -5px;
left: 200px;
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%;}
}
/* 旋转按钮*/
.btn-ro {
position: absolute;
left: 1200px;
width: 32px; height: 32px;
line-height: 32px; font-size: 12px;
background: linear-gradient(blue,gray,red);
outline:none;
color: white;
border-radius: 50%;
text-align: center;
box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.25);
cursor: pointer;
animation: rol linear 2s infinite;
}
.btn-ro:hover { opacity: 0.8; }
.btn-ro:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>
<div id="mnBox" class="mnBox">
<div style="color:#fff;margin:0px;padding:10px;font-size:5px;font-family:'微软雅黑';text-shadow:1px 1px 1px #000;">
<p style="position: absolute; left:600px; top:550px; color: #b6d8d8;"><marqueescrollamount="3" direction="left" ><font face="微软雅黑" size="4">【刘紫玲】三月里的小雨 淅沥沥下个不停。。。。</font></marquee></p>
</div>
<div id="btn-ro" class="btn-ro">●</div>
</div>
<audio id="ymusic" src="https://oss.shandianpan.com/fb779314f4a9eff9aa66e87090f3a1da.mp3" autoplay="autoplay" loop="loop"></audio>
<script language="javascript">
//雨丝放在前面
function rain() {
var str = "";
for(i=0; i<50; i++) {
var l = Math.ceil(Math.random()*1200);
str += "<span class='rain' style='left:" + l +"px;'></span>";
}
for(j=0;j<40; j++){
var k1 = Math.ceil(Math.random()*100);
var k2 = Math.round(Math.random()*20+70);
str += "<span class='circle' style='left:" + k1 +"%;top:" + k2 +"%;'></span>";
}
document.getElementById('mnBox').innerHTML += str;
}
rain();
//按钮放后面
var mu = document.getElementById('ymusic');
var mbtn = document.getElementById('btn-ro');
mu.autoplay ? mbtn.style.animationPlayState="running" : mbtn.style.animationPlayState="paused";
mu.addEventListener("ended", function(){ mbtn.style.animationPlayState="paused"; })
mbtn.onclick = function(){ mu.paused ? (mu.play(), mbtn.style.animationPlayState="running") : (mu.pause(), mbtn.style.animationPlayState="paused"); }
</script>
小辣椒 发表于 2022-2-11 22:22
黑黑我删了吧
不用的 马黑黑 发表于 2022-2-11 22:26
不用的
哦，才看见你这样说，我以后重新做一次，这个效果留着 小辣椒 发表于 2022-2-11 22:27
哦，才看见你这样说，我以后重新做一次，这个效果留着
你试一下16楼的代码 马黑黑 发表于 2022-2-11 22:25
总之吧，你要整合，不是两个东东简单放在一起，这可不是搭伙过日子
好的，我仔细看看，谢谢黑黑{:4_187:}