谷雨
<style>#papa { margin: 20px 0 20px calc(50% - 721px); width: 1280px; height: 720px; background: #68b9ac; box-shadow: 3px 3px 6px rgba(0, 0, 0, .5); position: relative; }
#mama { position: absolute; width: 100%; height: 100%; }
#background { display: none; }
#player { position: absolute; left: calc(50% - 60px); bottom: 20px; cursor: pointer; z-index: 100; opacity: .75; animation: rot 10s linear infinite var(--state); }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=410161058" autoplay loop></audio>
<div id="mama"></div>
<img id="player" src="https://638183.freep.cn/638183/small/4yc.png" width="120" height="120" alt="" />
</div>
<script>
var engine;
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/js/rainyday.js';
document.body.appendChild(sF);
sF.onload = function() {
var image = new Image();
image.crossOrigin = 'anonymous';
image.onload = function() {
engine = new RainyDay({
image: this,
parentElement: mama,
});
var canv = document.querySelector('#papa canvas');
canv.style.cssText += 'left: 0; top: 0';
mState();
};
image.src = 'https://638183.freep.cn/638183/t24/2/f11.jpeg';
var mState = () => {
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.paused ? engine.pause() : engine.resume();
};
aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
};
</script>
<style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<h2>帖子代码</h2>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2"> #papa { <span class="tBlue">margin:</span> 20px 0 20px calc(50% - 641px); <span class="tBlue">width:</span> 1280px; <span class="tBlue">height:</span> 720px; <span class="tBlue">background:</span> #68b9ac; <span class="tBlue">box-shadow:</span> 3px 3px 6px rgba(0, 0, 0, .5); <span class="tBlue">position:</span> relative; }</cl-cd>
<cl-cd data-idx="3"> #mama { <span class="tBlue">position:</span> absolute; <span class="tBlue">width:</span> 100%; <span class="tBlue">height:</span> 100%; }</cl-cd>
<cl-cd data-idx="4"> #background { <span class="tBlue">display:</span> none; }</cl-cd>
<cl-cd data-idx="5"> #player { <span class="tBlue">position:</span> absolute; <span class="tBlue">left:</span> calc(50% - 60px); <span class="tBlue">bottom:</span> 20px; <span class="tBlue">cursor:</span> pointer; <span class="tBlue">z-index:</span> 100; <span class="tBlue">opacity:</span> .75; <span class="tBlue">animation:</span> rot 10s linear infinite <span class="tBlue">var</span>(--state); }</cl-cd>
<cl-cd data-idx="6"> @keyframes rot { to { <span class="tBlue">transform:</span> rotate(1turn); } }</cl-cd>
<cl-cd data-idx="7"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="8"> </cl-cd>
<cl-cd data-idx="9"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span>></cl-cd>
<cl-cd data-idx="10"> <<span class="tDarkRed">audio</span> <span class="tRed">id</span>=<span class="tMagenta">"aud"</span> src=<span class="tMagenta">"https://music.163.com/song/media/outer/url?<span class="tRed">id</span>=410161058"</span> autoplay loop><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="11"> <span class="tGreen"><!-- mama是约束水珠的载体，它需要通过CSS设置为绝对定位 --></span></cl-cd>
<cl-cd data-idx="12"> <<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"mama"</span>><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="13"> <<span class="tDarkRed">img</span> <span class="tRed">id</span>=<span class="tMagenta">"player"</span> src=<span class="tMagenta">"https://638183.freep.cn/638183/small/4yc.png"</span> width=<span class="tMagenta">"120"</span> height=<span class="tMagenta">"120"</span> alt=<span class="tMagenta">""</span> /></cl-cd>
<cl-cd data-idx="14"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="15"> </cl-cd>
<cl-cd data-idx="16"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="17"> <span class="tBlue">var</span> engine;</cl-cd>
<cl-cd data-idx="18"> <span class="tBlue">var</span> sF = <span class="tRed">document</span>.createElement(<span class="tMagenta">'script'</span>);</cl-cd>
<cl-cd data-idx="19"> sF.src = <span class="tMagenta">'https://638183.freep.cn/638183/web/js/rainyday.js'</span>;</cl-cd>
<cl-cd data-idx="20"> <span class="tRed">document</span>.body.appendChild(sF);</cl-cd>
<cl-cd data-idx="21"> sF.onload = <span class="tBlue">function</span>() {</cl-cd>
<cl-cd data-idx="22"> <span class="tBlue">var</span> image = <span class="tBlue">new</span> Image();</cl-cd>
<cl-cd data-idx="23"> image.crossOrigin = <span class="tMagenta">'anonymous'</span>;</cl-cd>
<cl-cd data-idx="24"> image.onload = <span class="tBlue">function</span>() {</cl-cd>
<cl-cd data-idx="25"> engine = <span class="tBlue">new</span> RainyDay({</cl-cd>
<cl-cd data-idx="26"> <span class="tBlue">image:</span> <span class="tBlue">this</span>,</cl-cd>
<cl-cd data-idx="27"> <span class="tBlue">parentElement:</span> mama,</cl-cd>
<cl-cd data-idx="28"> });</cl-cd>
<cl-cd data-idx="29"> <span class="tBlue">var</span> canv = <span class="tRed">document</span>.querySelector(<span class="tMagenta">'#papa canvas'</span>);</cl-cd>
<cl-cd data-idx="30"> canv.style.cssText += <span class="tMagenta">'<span class="tBlue">left:</span> 0; <span class="tBlue">top:</span> 0'</span>;</cl-cd>
<cl-cd data-idx="31"> mState();</cl-cd>
<cl-cd data-idx="32"> };</cl-cd>
<cl-cd data-idx="33"> <span class="tGreen">//图片地址（需支持跨域）</span></cl-cd>
<cl-cd data-idx="34"> image.src = <span class="tMagenta">'https://638183.freep.cn/638183/t24/2/f11.jpeg'</span>;</cl-cd>
<cl-cd data-idx="35"> </cl-cd>
<cl-cd data-idx="36"> <span class="tBlue">var</span> mState = () => {</cl-cd>
<cl-cd data-idx="37"> papa.style.setProperty(<span class="tMagenta">'--state'</span>, aud.paused ? <span class="tMagenta">'paused'</span> : <span class="tMagenta">'running'</span>);</cl-cd>
<cl-cd data-idx="38"> aud.paused ? engine.pause() : engine.resume();</cl-cd>
<cl-cd data-idx="39"> };</cl-cd>
<cl-cd data-idx="40"> aud.onplaying = aud.onpause = () => mState();</cl-cd>
<cl-cd data-idx="41"> player.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="42"> };</cl-cd>
<cl-cd data-idx="43"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
挺不错的，马版喜爱分享音画作品教程啊。 设置的水珠出现随机，水珠大小也随机。
滚动下拖水痕效果，跟真的玻璃水珠流动一样。。{:4_199:} 愤怒的葡萄 发表于 2024-5-8 13:35
挺不错的，马版喜爱分享音画作品教程啊。
下午好 南无月 发表于 2024-5-8 17:51
设置的水珠出现随机，水珠大小也随机。
滚动下拖水痕效果，跟真的玻璃水珠流动一样。。
这些都是默认设置的 马黑黑 发表于 2024-5-8 17:57
下午好
已经是傍晚了，我现在来花潮的时间也不是很多的。 愤怒的葡萄 发表于 2024-5-8 18:00
已经是傍晚了，我现在来花潮的时间也不是很多的。
这个随意就好 马黑黑 发表于 2024-5-8 18:01
这个随意就好
我不太来花潮了，因为我现在不太想经营论坛的账号了，我以前经营的九个论坛之中已经有五个关闭了，还有的也没多少人气了。
中国大陆的BBS都没多少人气了，70后和80后也老了，还是在现实生活中做点更加有意义的事情吧。 愤怒的葡萄 发表于 2024-5-8 18:06
我不太来花潮了，因为我现在不太想经营论坛的账号了，我以前经营的九个论坛之中已经有五个关闭了，还有的 ...
这也是天涯玩不下去的原由吧：随着硬件的发展和各种新平台的兴起，人们“跳槽”的心态很普遍。 马黑黑 发表于 2024-5-8 18:09
这也是天涯玩不下去的原由吧：随着硬件的发展和各种新平台的兴起，人们“跳槽”的心态很普遍。
天涯在我心目中可以算是一个神坛，我是非常喜欢煮酒论史版块的，可惜天涯关闭了，怪可惜的。 愤怒的葡萄 发表于 2024-5-8 18:14
天涯在我心目中可以算是一个神坛，我是非常喜欢煮酒论史版块的，可惜天涯关闭了，怪可惜的。
转型复活了，不过不太可能能回到过去的风光：
https://www.tianya.net.cn/luntan/ 马黑黑 发表于 2024-5-8 18:33
转型复活了，不过不太可能能回到过去的风光：
https://www.tianya.net.cn/luntan/
天涯真是可惜了，原来的数据库也没有了，我去看了一下，也没煮酒论史版块啊。 愤怒的葡萄 发表于 2024-5-8 18:52
天涯真是可惜了，原来的数据库也没有了，我去看了一下，也没煮酒论史版块啊。
全新转型，先活下来吧 好神奇的雨滴效果。还以为背景图是设置的模糊度，原来是JS里加载的呢。
黑黑又带来新的效果呢，黑黑真是大宝库啊，精彩效果层出不穷{:4_199:} 马黑黑 发表于 2024-5-8 19:14
全新转型，先活下来吧
论坛的界面我不是很喜欢的，再说吧。 愤怒的葡萄 发表于 2024-5-8 20:09
论坛的界面我不是很喜欢的，再说吧。
实在不容易的，本来已经死了 马黑黑 发表于 2024-5-8 20:23
实在不容易的，本来已经死了
以前的天涯社区的确是一个好坛子，不过很可惜关闭了。 愤怒的葡萄 发表于 2024-5-8 20:27
以前的天涯社区的确是一个好坛子，不过很可惜关闭了。
转型关键期没能把握好 红影 发表于 2024-5-8 19:19
好神奇的雨滴效果。还以为背景图是设置的模糊度，原来是JS里加载的呢。
黑黑又带来新的效果呢，黑黑真是大 ...
这个 raindrop 效果已经出来好久了