论坛 › 『唯美音画』 › 相思雨 （水中游的雨儿是播放器）

宁静 发表于 2023-4-17 23:21

相思雨 （水中游的雨儿是播放器）

<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: 30px 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>

宁静 发表于 2023-4-17 23:22

下雨是粒子效果

宁静 发表于 2023-4-17 23:23

手机欣赏点击水中游的鱼，鱼儿是播放器

沉默 发表于 2023-4-17 23:23

第一个进来的

宁静 发表于 2023-4-17 23:24

沉默 发表于 2023-4-17 23:23
第一个进来的

谢谢~~每次第一名{:9001:}

沉默 发表于 2023-4-17 23:26

宁静 发表于 2023-4-17 23:24
谢谢~~每次第一名

马上下了，任务去完成一下

墨羽 发表于 2023-4-18 06:40

路边水滩里游泳的鱼儿转呀转，清晨很轻松的音乐。{:10_403:}

非常开心 发表于 2023-4-18 08:31

精彩的播放器制作，画画很美，曲调旋律优美，

楚心兰 发表于 2023-4-18 09:11

真好看

楚心兰 发表于 2023-4-18 09:11

早上好！宁静。

查看完整版本: 相思雨 （水中游的雨儿是播放器）