雨的印记
<style>#mydiv { margin: 20px 0 20px calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/2/4e.jpg') no-repeat center/cover; box-shadow: 2px 2px 6px #333; z-index: 1; user-select: none; position: relative; }
#mama { position: absolute; left: 328px; width: 696px; height: 640px; }
#background { display: none; }
#player { position: absolute; left: calc(50% - 60px); top: calc(50% - 60px); cursor: pointer; z-index: 100; animation: rot 10s linear infinite var(--state); }
@keyframes rot { to { transform: rotate(1turn); } }
</style>
<div id="mydiv">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=407761824" autoplay loop></audio>
<div id="mama"></div>
<img id="player" src="https://638183.freep.cn/638183/t23/btn/snow.webp" width="120" alt="" title="播放/暂停" />
</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('#mama canvas');
canv.style.cssText += 'left: -164px; top: 0; border-radius: 50%;';
mState();
};
image.src = 'https://638183.freep.cn/638183/t24/2/4e1.jpg';
var mState = () => {
mydiv.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>代码</h3>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2"> #mydiv { <span class="tBlue">margin:</span> 20px auto; <span class="tBlue">width:</span> 1024px; <span class="tBlue">height:</span> 640px; <span class="tBlue">background:</span> url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/2/4e.jpg'</span>) no-repeat center/cover; <span class="tBlue">box-shadow:</span> 2px 2px 6px #333; <span class="tBlue">z-index:</span> 1; <span class="tBlue">user-select:</span> none; <span class="tBlue">position:</span> relative; }</cl-cd>
<cl-cd data-idx="3">#mama { <span class="tBlue">position:</span> absolute; <span class="tBlue">left:</span> 328px; <span class="tBlue">width:</span> 696px; <span class="tBlue">height:</span> 640px; }</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">top:</span> calc(50% - 60px); <span class="tBlue">cursor:</span> pointer; <span class="tBlue">z-index:</span> 100; <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">"mydiv"</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>=407761824"</span> autoplay loop><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="11"> <<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="12"> <<span class="tDarkRed">img</span> <span class="tRed">id</span>=<span class="tMagenta">"player"</span> src=<span class="tMagenta">"https://638183.freep.cn/638183/t23/btn/snow.webp"</span> width=<span class="tMagenta">"120"</span> alt=<span class="tMagenta">""</span> title=<span class="tMagenta">"播放/暂停"</span> /></cl-cd>
<cl-cd data-idx="13"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="14"> </cl-cd>
<cl-cd data-idx="15"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="16"> <span class="tBlue">var</span> engine;</cl-cd>
<cl-cd data-idx="17"> <span class="tBlue">var</span> sF = <span class="tRed">document</span>.createElement(<span class="tMagenta">'script'</span>);</cl-cd>
<cl-cd data-idx="18"> sF.src = <span class="tMagenta">'https://638183.freep.cn/638183/web/js/rainyday.js'</span>;</cl-cd>
<cl-cd data-idx="19"> <span class="tRed">document</span>.body.appendChild(sF);</cl-cd>
<cl-cd data-idx="20"> sF.onload = <span class="tBlue">function</span>() {</cl-cd>
<cl-cd data-idx="21"> <span class="tBlue">var</span> image = <span class="tBlue">new</span> Image();</cl-cd>
<cl-cd data-idx="22"> image.crossOrigin = <span class="tMagenta">'anonymous'</span>;</cl-cd>
<cl-cd data-idx="23"> image.onload = <span class="tBlue">function</span>() {</cl-cd>
<cl-cd data-idx="24"> engine = <span class="tBlue">new</span> RainyDay({</cl-cd>
<cl-cd data-idx="25"> <span class="tBlue">image:</span> <span class="tBlue">this</span>,</cl-cd>
<cl-cd data-idx="26"> <span class="tBlue">parentElement:</span> mama,</cl-cd>
<cl-cd data-idx="27"> });</cl-cd>
<cl-cd data-idx="28"> <span class="tBlue">var</span> canv = <span class="tRed">document</span>.querySelector(<span class="tMagenta">'#mama canvas'</span>);</cl-cd>
<cl-cd data-idx="29"> canv.style.cssText += <span class="tMagenta">'<span class="tBlue">left:</span> -164px; <span class="tBlue">top:</span> 0; <span class="tBlue">border-radius:</span> 50%;'</span>;</cl-cd>
<cl-cd data-idx="30"> mState();</cl-cd>
<cl-cd data-idx="31"> };</cl-cd>
<cl-cd data-idx="32"> image.src = <span class="tMagenta">'https://638183.freep.cn/638183/t24/2/4e1.jpg'</span>;</cl-cd>
<cl-cd data-idx="33"> </cl-cd>
<cl-cd data-idx="34"> <span class="tBlue">var</span> mState = () => {</cl-cd>
<cl-cd data-idx="35"> mydiv.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="36"> aud.paused ? engine.pause() : engine.resume();</cl-cd>
<cl-cd data-idx="37"> };</cl-cd>
<cl-cd data-idx="38"> aud.onplaying = aud.onpause = () => mState();</cl-cd>
<cl-cd data-idx="39"> player.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="40"> };</cl-cd>
<cl-cd data-idx="41"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
二十几岁的时候第一次听这首钢琴曲，确实是好曲子。 看到有新帖，来看看代码～跟谷雨有哪些不同 这个好，下雨只下在窗口，而不是全部。有选择的下{:4_199:} 这个定位还得再琢磨一下，比如canv.style.cssText += 'left: -164px; top: 0; border-radius: 50%;';和#mama { position: absolute; left: 328px;，，，，的关系。貌似画布返回一半呢。{:4_173:} border-radius要在画布里设置啊，我以为在css里就能设置呢{:4_173:} 马黑黑 发表于 2024-5-25 08:12
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'And ...
-164 有点费解，按说canv是mama的child 定位不应该是left：0 top：0 ， 它究竟依照谁为准定位了。 背景一张大图，宽1024，下雨的位置窗户，是个小图，宽696。它们相差328
小图设为left:328px把小图推开到最右边
水珠设left:-164px，再往左边拉回来328的一半，刚好到圆的位置。
一推一拉，这操作妙极。。
做个贴子跟跳国标似的{:4_170:} 也可以这样：
mama不设左右，left:0px让它靠左边跟大图站齐。
水珠背景图left:164px,
因为两张图片相差328，左右各分一半，所以离左边164px也可以达到相同的效果
CSS里给mama那句加上滤镜和透明度，可以保留水珠，且背景相对清楚
mix-blend-mode: multiply;加滤镜
opacity: .9;加透明度
这个之前跟贴的时候有实验过。。
起个网名好难 发表于 2024-5-25 09:54
-164 有点费解，按说canv是mama的child 定位不应该是left：0 top：0 ， 它究竟依照谁为准定位了。
rainyday在布局上主要基于全视口，在画布定位的偏移计算上算法比较独特，用到帖子里的话需要恰当移位。 背景古风调调，清新得很，小花枝立体感很强，音乐好听。。
构思真是绝妙~~
画布可以变成各种形状，实现局部有雨。这个思路太赞了 南无月 发表于 2024-5-25 10:08
也可以这样：
mama不设左右，left:0px让它靠左边跟大图站齐。
水珠背景图left:164px,
这是无师自通了，厉害！ 愤怒的葡萄 发表于 2024-5-25 08:17
二十几岁的时候第一次听这首钢琴曲，确实是好曲子。
对。本想选一个钢琴版的，音质较好的需要会员，就选这个了 马黑黑 发表于 2024-5-25 10:15
这是无师自通了，厉害！
谁说我无师我可不愿意。。{:4_170:}就是老师教得好。。 南无月 发表于 2024-5-25 10:07
背景一张大图，宽1024，下雨的位置窗户，是个小图，宽696。它们相差328
小图设为left:328px把小图推开到最 ...
蹦恰恰 红影 发表于 2024-5-25 09:14
border-radius要在画布里设置啊，我以为在css里就能设置呢
raindy插件比较霸道，关键时刻直接对它动刀子才比较牢靠 红影 发表于 2024-5-25 09:13
这个定位还得再琢磨一下，比如canv.style.cssText += 'left: -164px; top: 0; border-radius: 50%;';和#mam ...
rainyday插件在算法上按自己的思路去做，它不考虑使用到帖子中的情况，一心一意实现它全视口的布局。我们在非预设场景下使用它，就得了解它的具体情况。 红影 发表于 2024-5-25 09:10
这个好，下雨只下在窗口，而不是全部。有选择的下
这个创意的具体实现需要一些算法