相思雨---同玩岁月雨粒子（学习黑黑无人区效果）
<style>#papa {
margin: 150px 0 0 calc(50% - 800px);
width: 1411px;
height: 841px;
border: 2px solid tan;
border-image: linear-gradient(to left,tan,red,green) 2;
background: url('https://wj.zp68.com/lxx/yunhua/2023/04/02/02F.gif') center/cover no-repeat;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
}
#mplayer{
position: absolute;
left: 50%;
top:450px;
width: 350px;
height: 350px;
border: 20px solid #a5b7c5;
border-radius: 50%;
display: grid;
place-items: center;
filter:url(#wavy) blur(0.5px);
transform: rotateX(-65deg);
pointer-events: none;
--state: running;
}
#mplayer::before, #mplayer::after {
position: absolute;
content: '';
width: 200px;
height: 200px;
background: url('https://wj.zp68.com/lxx/yunhua/2023/04/02/goldfish.png') center/cover no-repeat;
cursor: pointer;
pointer-events: auto;
animation: rot 8s infinite linear var(--state);
}
#mplayer::after { width: 100px; height: 100px; bottom: 4px; }
.mypic { position: absolute; top: 60px; left: 140px;}
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<div id="mplayer"></div>
<img class="mypic" src="https://wj.zp68.com/lxx/yunhua/2023/04/02/1.png" alt="" />
<svg id="svg" width="0" height="0">
<g><filter id="wavy">
<feTurbulence x="0" y="0" baseFrequency="0.02" numOctaves="5" seed="2">
<animate attributeName="baseFrequency" dur="60s" values="0.02;0.05;0.02" repeatCount="indefinite"></animate>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="30"></feDisplacementMap>
</filter></g>
</svg>
<audio id="aud" src="https://wj.zp68.com/lxx/yunhua/2023/04/02/xsyu2.mp3" loop="loop" autoplay="autoplay"></audio>
</div>
<script>
let mState = () => aud.paused ? (mplayer.style.setProperty('--state','paused'), svg.pauseAnimations()) : (mplayer.style.setProperty('--state','running'), svg.unpauseAnimations());//mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play',mState,false);
aud.addEventListener('pause',mState,false);
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>
<br><br><br><br><br> @马黑黑
黑黑才捣鼓好，，，，{:4_170:}
谢谢黑黑的教程分享 @走过岁月
岁月我是在想这个相思雨效果加什么播放器，今天黑黑分享的水动效果播放器，刚好，我用上了{:4_173:}
谢谢岁月的精美雨粒子效果
小辣椒 发表于 2023-4-2 21:33
@马黑黑
黑黑才捣鼓好，，，，
嗯，设计精巧，漂酿 小辣椒 发表于 2023-4-2 21:35
@走过岁月
岁月我是在想这个相思雨效果加什么播放器，今天黑黑分享的水动效果播放器，刚好，我用上了{: ...
好的 小辣椒的构思不错 落叶蜻蜓小花应有尽有很丰富，小辣椒 厉害，赞 还有个小鸟在躲雨，差点看漏 马黑黑 发表于 2023-4-2 22:22
嗯，设计精巧，漂酿
黑黑我刚在修改，想水花加宽一点，好像没有啥效果 走过岁月 发表于 2023-4-2 22:30
好的
主要这个雨的粒子真的逼真，画面好美，加了水动鱼儿播放器效果还可以的{:4_170:} 走过岁月 发表于 2023-4-2 22:30
小辣椒的构思不错
哈哈~~谢谢岁月的夸奖{:4_179:} 走过岁月 发表于 2023-4-2 22:33
还有个小鸟在躲雨，差点看漏
这个是燕子窝{:4_170:} 小辣椒 发表于 2023-4-2 22:44
主要这个雨的粒子真的逼真，画面好美，加了水动鱼儿播放器效果还可以的
结合起来也不错的 小辣椒 发表于 2023-4-2 22:46
哈哈~~谢谢岁月的夸奖
好就是好 {:4_179:} 小辣椒 发表于 2023-4-2 22:47
这个是燕子窝
嗯，反正就是小鸟 走过岁月 发表于 2023-4-2 22:50
嗯，反正就是小鸟
燕子{:4_173:} 走过岁月 发表于 2023-4-2 22:49
好就是好
得到你的肯定小辣椒开心S 走过岁月 发表于 2023-4-2 22:49
结合起来也不错的
我就喜欢玩这种效果，所以没有你的制作我就做不了了 小辣椒 发表于 2023-4-2 22:55
燕子
嗯，小燕子 小辣椒 发表于 2023-4-2 22:56
得到你的肯定小辣椒开心S
确实做得好