雨夜的浪漫TO小辣椒&冬雨
<style>
#papa {
margin: 20px 0 0 calc(50% - 633px);
width: 1100px;
height: 700px;
background: url('https://pic.imgdb.cn/item/66016d5a9f345e8d033f3446.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1000;
}
#btnplay {
position: absolute;
left: 10px;
top: 10px;
width: 180px;
height: 180px;
transition: 5s;
cursor: pointer;
opacity: .9;
animation: rot 6s linear infinite var(--state);
}
#papa:fullscreen #btnplay { width: 120px; height: 120px; }
#papa video {
position: absolute;
width: 100%;
height: 100%;
border-radius: 0 50%;
object-fit: cover;
opacity: .2;
pointer-events: none;
}
@keyframes rot { to { transform: rotate(360deg); } }
.rain {
width: 2px;
height: 4px;
top: -5px;
left: 100px;
background: #fcfcce;
position: absolute;
animation: rain 0.5s linear infinite;
}
/* 涟漪 */
.circle {
position: absolute;
left: 80px;
top: 80%;
width: 1px;
height: 1px;
background: none;
border: 1px dotted #eee;
border-radius: 50%;
opacity: 0.8;
animation:circle 1s ease-out infinite;
}
@keyframes rain {
0% { opacity:0.2; }
100% { opacity:0.5; top:80%;}
}
@keyframes circle {
0% { width:0; height:0; }
50% { opacity:0.1; width:5%; height:5%; }
60% { opacity:0; width:5%; height:5%; }
100% { opacity:0; width:5%; height:5%; }
}
</style>
<div id="papa">
<audio src="https://music.163.com/song/media/outer/url?id=188747" autoplay loop></audio>
<div class="rain"></div>
<div class="circle"></div>
<img id="btnplay" src="https://img0.baidu.com/it/u=4096927855,3462405764&fm=253&fmt=auto&app=138&f=PNG?w=350&h=350" alt="" title="点击播放" />
</div>
<script>
(function() {
let sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fsgo_hc.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
papa: '#papa',
css: '--bg: transparent; --color: #ccc; bottom: 10px; left: 48%;',
go: {x: true, y: true}
});
})();
function addrain() {
var papa = document.getElementById('papa');
for(i=0; i<50; i++) { //50个雨丝
var rain = document.createElement('div');
var rLeft = Math.ceil(Math.random()*100);
var aTime = Math.random();
rain.className = "rain";
rain.style.left = rLeft + "%";
rain.style.animation = "rain " + aTime + "s linear infinite";
papa.appendChild(rain);
}
for(j=0; j<20; j++){ // 20个涟漪
var circle = document.createElement('div');
var cLeft = Math.floor(Math.random() * 100);
var cTop =Math.round(Math.random()*20+70);
var cTime = Math.random();
circle.className = "circle";
circle.style.left = cLeft + "%";
circle.style.top = cTop + "%";
circle.style.animation = "circle " +cTime + "s ease-out infinite";
papa.appendChild(circle);
}
}
addrain();
</script> 哇塞，小辣椒冬雨这里是外国人了{:4_170:}
@冬天的雨 欣赏清舟美美的图意，浪漫的雨夜二人躲在雨伞下真的太浪漫了{:4_172:} 人家两人就喜欢共用一把伞，清舟又给加了一把{:4_173:} 制作真漂亮，清舟的字体设计非常出彩，很赞{:4_199:} 谢谢清舟的礼物，小辣椒收了，先下了。{:4_179:} 小辣椒 发表于 2024-3-27 22:11
哇塞，小辣椒冬雨这里是外国人了
@冬天的雨
接到小电报立马上来收礼{:4_170:} 红影 发表于 2024-3-27 22:13
人家两人就喜欢共用一把伞，清舟又给加了一把
美女你看见是二把伞 感谢清舟的礼物，哈哈，太好了，这样可以督促小辣椒不要忘记，以后出去浪漫记得叫上冬雨{:4_170:} 手机看怎么画面会一突一突的，是代码效果？ 清舟高产，每天都有漂亮的图图出来，此地掌声无数{:4_199:} 谢谢清舟的礼物，回礼任务交小辣椒了@小辣椒 这把伞会飞 欣赏楼主美帖{:4_199:} 送礼，收礼的都开心{:4_187:} 冬天的雨 发表于 2024-3-27 22:32
美女你看见是二把伞
我什么都没看见，你们继续浪漫{:4_189:} 歌神经典之一，老喜欢了 {:4_187:}清舟这制作氛围温馨而浪漫，好棒！{:5_117:}
辣椒和冬雨上海报了，分不清是身置雨景或是梦境，情意绵绵滴 {:4_172:} 大猫咪 发表于 2024-3-28 20:01
歌神经典之一，老喜欢了 清舟这制作氛围温馨而浪漫，好棒！
辣椒和冬雨上海报了，分 ...
猫下雨了也去浪漫下下 绿叶清舟 发表于 2024-3-28 20:12
猫下雨了也去浪漫下下
会感冒的 {:4_172:} 小辣椒 发表于 2024-3-27 22:11
哇塞，小辣椒冬雨这里是外国人了
@冬天的雨
这不是出国旅游去的嘛{:4_189:}