本帖最后由 加林森 于 2022-1-18 11:20 编辑 <br /><br />马黑黑 发表于 2021-12-7 12:43
又在想什么？
<style type="text/css">
.mBox {
position: relative;
left: -304px;
top: 100px;
width: 1200px;
min-height: 300px;
box-shadow: 2px 2px 4px 1pxrgba(0,0,0,.2);
background: transparent;
}
.sBox {
background: #aaa;
text-align: center;
}
.sBox h2, p { padding: 10px; }
.marq {
margin: 10px auto;
position: relative;
top: -620px;
left: -120px;
width: 50%;
animation: goNow 10s linear infinite alternate;
}
@keyframes goNow {
from { transform: translate(0,0); }
to { transform: translateX(-50%); }
}
.btnDiv {
position: relative;
width: 32px;
height: 32px;
border: none;
background: #035575;
border-radius: 50%;
box-shadow: 1px 1px 1px 0px rgba(0,0,0,.5);
cursor: pointer;
}
.btnDiv:hover {
opacity: .8;
box-shadow: 1px 1px 2px 1px rgba(0,0,0,.5);
}
.btnDiv:active {
opacity: .8;
box-shadow: 1px 1px 1px 0px rgba(0,0,0,.9);
}
.btn-play {
position: absolute;
width: 0px;
height: 0px;
border: 10px solid #000;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:#eee;
left: 12px;
top: 6px;
}
.btn-pause {
position: absolute;
display:none;
width: 2px;
height: 20px;
border-right: 4px solid #eee;
border-bottom:0px;
border-left: 4px solid #eee;
left: 11px;
top: 6px;
}
</style>
<div class="mBox">
<div class="sBox">
<img src="https://www.80wp.com/wj/3015592/bf2d87f673d2cd18bc206c616896c9c7.jpg" alt="" />
</div>
</div>
<h2 class ="marq">[陈心蕊]花季年龄_DJ慢摇嗨曲</h2>
<audio id="ymusic" src="https://www.80wp.com/wj/3015495/6054b3224dde6771f310106407f928d0.mp3"></audio>
<div id="btnDiv" class="btnDiv">
<div id="btn-play" class="btn-play"></div>
<div id="btn-pause" class="btn-pause"></div>
</div>
<script language="javascript">
var mu = document.getElementById('ymusic');
var btn = document.getElementById('btnDiv');
var playbtn = document.getElementById('btn-play');
var pausebtn = document.getElementById('btn-pause');
btn.onclick = function(){ iplay(1); }
mu.addEventListener("ended", function(){ iplay(0); })
function iplay(flag){
if(flag==1){
mu.paused ? (mu.play(), playbtn.style.display="none", pausebtn.style.display="block") : (mu.pause(), playbtn.style.display="block", pausebtn.style.display="none");
}else{
playbtn.style.display= "block";
pausebtn.style.display = "none";
}
}
</script>
加林森 发表于 2021-12-7 12:46
又在想什么？
思考上帝思考的问题
本帖最后由 加林森 于 2022-2-12 17:20 编辑 <br /><br />马黑黑 发表于 2021-12-7 12:54
思考上帝思考的问题
是不是哦
<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>
加林森 发表于 2021-12-7 13:12
是不是哦
这个是必须的
马黑黑 发表于 2021-12-7 18:14
这个是必须的
哦哦哦，你厉害。
加林森 发表于 2021-12-7 18:28
哦哦哦，你厉害。
那是那是
马黑黑 发表于 2021-12-7 18:35
那是那是
小心你的小苹果。