下雨天
本帖最后由 绿叶清舟 于 2024-7-25 20:17 编辑 <br /><br /><style>#papa { --width: 1280px; margin: 30px 0 30px calc(50% - (var(--width) / 2 + 91px)); width: var(--width); height: 780px; background: url('https://p.upyun.com/demo/tmp/YAg9MEyJ.webp') no-repeat center/cover; z-index: 1; overflow: hidden; box-shadow: 3px 3px 8px #666; position: relative; }
#papa::before { content: attr(data-lrc); position: absolute; top: 15px; width: 100%; height: 60px; text-align: center; font: normal 32px/60px sans-serif; color: transparent; text-shadow: 2px 2px 2px rgba(0,0,0,.8); background: repeating-linear-gradient(to right, gold, #54535b, snow, #54535b, orange) 50%/200px 60px; -webkit-background-clip: text; }
#player { position: absolute; left: calc(50% - 50px); bottom: 100px; width: 100px; height: 100px; background: linear-gradient(#100806,#7b461c) repeat-y center/5% 5%, linear-gradient(to right,#100806,#7b461c) repeat-x center/5% 5%; border: thick double; border-color: #f0b979 #7b461c; border-radius: 50%; cursor: pointer; animation: rot 6s linear infinite var(--state); }
#player:hover { transform: scale(1.2); filter: drop-shadow(0 50px 0 #100806); }
#player::before, #player::after { position: absolute; content: ''; }
#player::before { inset: 0; background: inherit; transform: rotate(45deg); }
#player::after { inset: 40px; background: #f0b979; border-radius: 50%; }
.vid { position: absolute; width: 100%; height: 110%; object-fit: cover; pointer-events: none; }
.vid:nth-of-type(1) { bottom: 0; mix-blend-mode: screen; }
.vid:nth-of-type(2) { height: 45%; width: 30%; top: 60px; mix-blend-mode: screen; }
#papa:fullscreen .vid:nth-of-type(1) { height: 100%; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa"data-lrc="下 雨 天-曼丽,王闻">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=277928" autoplay loop></audio>
<video class="vid" src="https://img.tukuppt.com/video_show/15653652/00/80/83/60d0445e4511e.mp4" autoplay loop muted></video>
<video class="vid" src="https://img.tukuppt.com/video_show/2269348/00/14/17/5e1ca9303ecc7.mp4" autoplay loop muted></video>
<div id="player" titel="播放/暂停"></div>
</div>
<script>
var vids = papa.querySelectorAll('.vid');
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
papa: '#papa',
css: 'bottom: 20px; left: 50%; transform: translate(-50%); --color: lightblue; --fsBg: #100806;',
});
var mState = () => {
player.style.setProperty('--state',['running','paused'][+aud.paused]);
player.title = ['暂停','播放'][+aud.paused];
vids.forEach(vid => aud.paused ? vid.pause() : vid.play());
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script> 雨停后，连续的38度天。那天去洗头聊起说想念下雨的日子了，立刻得到众师傅们的附合，这天也太难了{:4_189:} 哇塞，清舟这雨下的，一下子感觉凉快多了{:4_189:} 这效果真好，意境特别的美，感觉这个播放器在这里简直就是黑黑为你特制的{:4_189:} 小播的颜色调的和背景十分符合，背景的人物溶图也很美。
两个视频也使用得很好，欣赏清舟好帖{:4_199:} 全屏后那雨丝怎么只下在了下半部，上半部没雨了么，楚门的世界是下了局部的雨，清舟这个也是啊{:4_173:} 小辣椒 发表于 2024-7-7 20:57
哇塞，清舟这雨下的，一下子感觉凉快多了
天天38度都被烤到三分熟了，得来点雨降个温了 绿叶清舟 发表于 2024-7-7 21:24
天天38度都被烤到三分熟了，得来点雨降个温了
我看手机上说上周的38.2度是全国最高温度{:4_173:} 红影 发表于 2024-7-7 21:16
全屏后那雨丝怎么只下在了下半部，上半部没雨了么，楚门的世界是下了局部的雨，清舟这个也是啊
没去点开过了{:4_189:} 红影 发表于 2024-7-7 21:26
我看手机上说上周的38.2度是全国最高温度
今年不知道要多少天这种温度了 绿叶清舟 发表于 2024-7-7 21:37
没去点开过了
也是，不点开就是正常下雨{:4_173:} 绿叶清舟 发表于 2024-7-7 21:38
今年不知道要多少天这种温度了
今年也是40天的伏天呢，煎熬的日子开始了。 我们这里天天报有雨，但天天不见雨。 及时雨呵。{:4_199:} 红影 发表于 2024-7-7 21:45
也是，不点开就是正常下雨
会不会和二个视频有关了 红影 发表于 2024-7-7 21:45
今年也是40天的伏天呢，煎熬的日子开始了。
温度一降又是雨，今年别就这样过夏天了啊 梦油 发表于 2024-7-8 09:28
我们这里天天报有雨，但天天不见雨。
我们这里又下雨了 樵歌 发表于 2024-7-8 11:15
及时雨呵。
还真把雨叫来了{:4_189:} 绿叶清舟 发表于 2024-7-11 20:29
会不会和二个视频有关了
不是，应该是这句 #papa:fullscreen .vid:nth-of-type(1) { height: 38%; }
让满屏时变小了。 绿叶清舟 发表于 2024-7-11 20:30
温度一降又是雨，今年别就这样过夏天了啊
只要凉快了，都好说，今天就挺舒服{:4_173:}