爱情雨 TO：緑叶清舟
<meta charset="UTF-8">
<style type="text/css">
.mnBox {
margin: auto;
margin-top: 150px;
position: relative;
background: #333 url('https://xlaj.cn/assets/file/zp/20240307231057.gif') no-repeat center/cover;
height: 791px;
width: 1400px;
left: -400px;
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: 650px;
width: 40px; height: 40px;
line-height: 40px; 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:450px; width: 500px; top:550px; color: #b6d8d8;"><marqueescrollamount="3" direction="left" ><font face="微软雅黑" size="4">【周冰倩 - 爱情雨 (DJ默涵版)】我的爱情雨就这样的下了 滴滴哒哒不要再等了。。。。</font></marquee></p>
</div>
<div id="btn-ro" class="btn-ro">●</div>
</div>
<audio id="ymusic" src="https://file.uhsea.com/2403/da4e3b1338572fd1e46e4f47162cb4b10K.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>
@緑叶清舟
清舟谢谢你的精美礼物，这下雨天没有伞怎么办，好在有清舟送了二把伞{:4_172:} 哈哈，这首歌太合适了，爱情雨开始下了 只是我最近没有学习黑黑的教程，就简单做一个以前的转盘播放器，这个雨效果感觉也很美的，也是黑黑的代码编辑的雨效果 @冬天的雨
冬雨任务完成，只是礼物简单了一点 小辣椒 发表于 2024-3-29 21:29
@冬天的雨
冬雨任务完成，只是礼物简单了一点
对冬雨说，一点不简单了{:4_170:} 这个代码的雨效果很漂亮的，效果逼真{:4_199:} 这歌曲选太好了，清舟雨中送伞，小辣椒也是来个下雨，特别这歌，爱情雨{:4_170:} 冬天的雨 发表于 2024-3-29 21:38
对冬雨说，一点不简单了
冬雨来了，我刚准备下，看见小九生日了，还没有做贺帖 小辣椒 发表于 2024-3-29 21:41
冬雨来了，我刚准备下，看见小九生日了，还没有做贺帖
我肯定没有时间做帖了，明天有事 冬天的雨 发表于 2024-3-29 21:41
我肯定没有时间做帖了，明天有事
那我先下去做个帖，也是只能简单的那种，黑黑的教程我许多时间没有去看了 小辣椒 发表于 2024-3-29 21:43
那我先下去做个帖，也是只能简单的那种，黑黑的教程我许多时间没有去看了
最后写上冬雨名字{:4_172:} 冬天的雨 发表于 2024-3-29 21:43
最后写上冬雨名字
不写，你自己做 小辣椒 发表于 2024-3-29 21:44
不写，你自己做
你快下，我看时间再决定{:4_179:} 清舟收礼开心@緑叶清舟 辣椒制作真漂亮！诗情画意的景致，这几天开始流行下雨阿 {:4_170:}会感冒的
清舟收礼开心！ 大猫咪 发表于 2024-3-29 21:54
辣椒制作真漂亮！诗情画意的景致，这几天开始流行下雨阿 会感冒的
清舟收礼开心！
猫猫晚上好，最近不忙？ 冬天的雨 发表于 2024-3-29 21:56
猫猫晚上好，最近不忙？
兄弟 {:4_179:}这几天还好 下周去乡下办点年前的事就轻松了 大猫咪 发表于 2024-3-29 21:59
兄弟 这几天还好 下周去乡下办点年前的事就轻松了
猫猫难得轻松的，领导不好做啊{:4_170:} 冬天的雨 发表于 2024-3-29 22:00
猫猫难得轻松的，领导不好做啊
三陪怕了{:4_172:}