冬天的雨 发表于 2023-12-11 16:24

学习马老师 【逃脱引力 】效果


<style>
      #papa { margin: 120px 0 0 calc(50% - 600px); width: 1036px; height: 698px; background: #666 url('https://pic.imgdb.cn/item/6575f7a2c458853aef1d63f1.jpg') no-repeat center/cover; overflow: hidden; display: grid; place-items: center; box-shadow: 3px 6px 12px gray; position: relative; --state: paused; }
      #player { width: 100px; cursor: pointer; animation: rotating 8s linear infinite var(--state); }
      mov-ball { position: absolute; width: 20px; height: 20px; border-radius: 60%; background: tan; animation: imov 6s infinite; }
      @keyframes moving {
                from { opacity: 0; transform: translate(0,0); }
                to { opacity: 1; transform: translate(var(--x0),var(--y0)); }
      }
      @keyframes rotating { to { transform: rotate(360deg); } }
</style>

<div id="papa">
      <img id="player" src="https://pic.imgdb.cn/item/6575f443c458853aef133d55.gif" alt="" title="" />
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1374860954" autoplay loop></audio>
</div>

<script>

(function() {

let all = 100;
for(let i = 0; i < all; i++) {
      let movBall = document.createElement('mov-ball');
      let hudu = Math.PI / 100 * 360 / all * i;
      let xx = 300 * Math.cos(hudu), yy = 200 * Math.sin(hudu);
      movBall.style.cssText += `
                --x0: ${xx}px;
                --y0: ${yy}px;
                background: #${Math.random().toString(16).substr(-6)};
                animation: moving ${Math.random() * 20 + 20}s -${Math.random() * 20}s infinite var(--state);
      `;
      papa.prepend(movBall);
}

let playMusic = () => aud.paused ? (aud.play(), player.title='暂停') : (aud.pause(), player.title='播放');
let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('playing',mState,false);
aud.addEventListener('pause',mState,false);
player.addEventListener('click',playMusic,false);

})();

</script>

冬天的雨 发表于 2023-12-11 16:25

@马黑黑
今天这个作业是简单的，否则冬雨不可能这么快完成{:4_170:}

冬天的雨 发表于 2023-12-11 16:28

刚才看了马老师分享的《逃离引力》的思路分享 一帖，我修改了一下上下范围，缩小了一点，怕离鱼儿太远了{:4_189:}

冬天的雨 发表于 2023-12-11 16:29

感谢马老师分享源码，冬雨去忙了{:4_190:}

世外桃源 发表于 2023-12-11 17:15

老师没来我先欣赏{:4_187:}

世外桃源 发表于 2023-12-11 17:16

漂亮的湖泊，一条金鱼自由的游啊游{:4_173:}

世外桃源 发表于 2023-12-11 17:17

背景音乐男声有点沧桑感，后面的口哨声好听{:4_199:}

世外桃源 发表于 2023-12-11 17:18

欣赏了，感谢分享

醉美水芙蓉 发表于 2023-12-11 17:30

红影 发表于 2023-12-11 17:53

看得笑，冬小雨换成一条鱼儿在转了，粒子的扩散范围也弄小了，好像鱼儿吐了好多的泡泡{:4_173:}

红影 发表于 2023-12-11 17:53

这个虽然是使用黑黑的代码，自己动过脑筋修改了，给冬小雨点赞{:4_199:}

千羽 发表于 2023-12-11 18:54

小金鱼正在努力挣脱引力呢{:4_173:}

马黑黑 发表于 2023-12-11 19:23

冬天的雨 发表于 2023-12-11 16:28
刚才看了马老师分享的《逃离引力》的思路分享 一帖，我修改了一下上下范围，缩小了一点，怕离鱼儿太远了{:4 ...

还可以进一步：播放控制器和粒子压低一点，粒子纯色（比如白色）并始终是一定程度的透明度
页: [1]
查看完整版本: 学习马老师 【逃脱引力 】效果