三月里的小雨
<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: 120px;
top: 550px;
width: 60px; height: 60px;
line-height: 60px; font-size: 14px;
background: linear-gradient(Blue,Pink,Teal);
outline:none;
color: Indigo;
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:400px; 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://wj1.zp68.com:812/lxx/yunhua/2022/07/3yuexyu.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>
<br><br><br><br><br><br><br><br><br><br>
谢谢黑黑，看了昨天给我修改的代码太佩服你了，特别干净，利索的，没有多余的东西@马黑黑 小辣椒 发表于 2022-2-12 20:46
谢谢黑黑，看了昨天给我修改的代码太佩服你了，特别干净，利索的，没有多余的东西@马黑黑
{:5_109:} 制作漂亮，真漂亮。{:4_187:} 黑黑，我就想再问问，按钮转盘的圆中心，字体是12.我修改大以后，不会改%。出来转盘会偏心，这个我不懂，因为图片大，按钮转盘就想改大一点了 马黑黑 发表于 2022-2-12 20:47
啊，黑黑在啊{:4_187:}
昨天认真看了你的代码，不得不佩服啊，现在脑子里面有点数了 小辣椒 发表于 2022-2-12 20:51
啊，黑黑在啊
昨天认真看了你的代码，不得不佩服啊，现在脑子里面有点数了
如此最好 加林森 发表于 2022-2-12 20:48
制作漂亮，真漂亮。
队长晚上好{:4_187:} 马黑黑 发表于 2022-2-12 20:51
如此最好
其实我以前学习基本是自己瞎捣鼓的，就H5播放器的代码我基本都是这样弄出来的，但css我真的不会组合，现在好在有你{:4_191:}{:4_176:}开心喝酒{:4_173:} 小辣椒 发表于 2022-2-12 20:52
队长晚上好
小辣椒晚上好。 小辣椒 发表于 2022-2-12 20:55
其实我以前学习基本是自己瞎捣鼓的，就H5播放器的代码我基本都是这样弄出来的，但css我真的不会组合，现 ...
其实为更擅长JS，CSS略懂一二 马黑黑 发表于 2022-2-12 20:58
其实为更擅长JS，CSS略懂一二
都没有好好学习过的，所以做的东西就这样了{:4_203:} 小辣椒 发表于 2022-2-12 21:32
都没有好好学习过的，所以做的东西就这样了
慢慢来不急
好漂亮的播放器好美的图图和动听的歌声。小辣椒早上好。{:4_187:} 纯粹的代码的小雨，还有纯代码的播放器，亲爱的帖子真漂亮{:4_187:} {:4_178:} 小辣椒 发表于 2022-2-12 20:49
黑黑，我就想再问问，按钮转盘的圆中心，字体是12.我修改大以后，不会改%。出来转盘会偏心，这个我不懂，因 ...
我记得我用了line-height，它的值要和高度值一样。字体大小似乎没多大关系 马黑黑 发表于 2022-2-16 18:38
我记得我用了line-height，它的值要和高度值一样。字体大小似乎没多大关系
有关系的，我修改后会偏一边去，当时我设置字体24 这个圆就靠一边了 小辣椒 发表于 2022-2-16 22:22
有关系的，我修改后会偏一边去，当时我设置字体24 这个圆就靠一边了
line-height要配套，和元素的高度一样 马黑黑 发表于 2022-2-16 22:23
line-height要配套，和元素的高度一样
这个有元素同类？
页:
[1]
2