若战

马黑黑

马黑黑

<帖子代码

<style>
  @import 'https://638183.freep.cn/638183/tzmaker/tz5.css';
  .pa { --bg: url('https://638183.freep.cn/638183/t24/7/rovj.jpg') no-repeat center/cover; --ma-size: 6%; }
  .son { position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; box-shadow: 1px 2px 4px gray; animation: move ease-in-out infinite alternate var(--state); }
  @keyframes move {
    0% { offset-distance: 0%; }
    100% { offset-distance: 100%; }
  }
</style>

<div class="pa"></div>

<script>
  var pa = document.querySelector('.pa');
  var tt = 6, sons = [];
  
  var frg = new DocumentFragment();
  for (var i = 0; i < tt; i++) {
    var son = document.createElement('div');
    var c1 = `#${Math.random().toString(16).substring(2,8)}`;
    var c2 = `#${Math.random().toString(16).substring(2,8)}`;
    son.style.background = `linear-gradient(30deg, ${c1}, ${c2})`;
    son.style.animationDuration = `${6 + Math.random() * 6}s`;
    son.style.animationDelay = `${-12 * Math.random()}s`;
    son.className = 'son';
    sons.push(son);
    frg.appendChild(son);
  }
  pa.appendChild(frg);

  loadJs('https://638183.freep.cn/638183/tzmaker/tz5.js', tzInit);

  function loadJs(url, callback) {
    const script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.defer = true;
    script.onload = callback;
    document.head.appendChild(script);
  }

  function tzInit() {
    var tz = TZ('pa');
    tz.add('audio', '', '', {
      src: 'https://music.163.com/song/media/outer/url?id=1393205387'
    });
    tz.add('img', '', 'ma', {
      src: 'https://638183.freep.cn/638183/small/dcjm.webp'
    }).style('bottom: 80px;').playmp3();
    tz.bgprog().style('bottom: 40px; color: #fefefe; width: 240px;');
    tz.fs().style('right: 20px; top: 20px;');
    tz.autoMid();
  }

  var resizeObserver = new ResizeObserver(entries => {
    entries.forEach(entry => {
      var { width, height } = entry.contentRect;
      sons.forEach((son, idx) => {
        var x0 = 15, y0 = 15 + idx * 45;
        var x1 = Math.floor(width / 2), y1 = Math.floor(height + y0);
        var x2 = Math.floor(width - x0), y2 = y0;
        son.style.offsetPath = `path('M ${x0} ${y0} Q ${x1} ${y1}, ${x2} ${y2}')`;
      });
    });
  });

  resizeObserver.observe(pa);
</script>

马黑黑

小球动画实现原始和方法，请参阅：

        https://www.huachaowang.com/foru ... hread&tid=94750

梦江南

这是黑黑老师的世界。

红影

这六个小球在全屏的时候也能适配父元素尺寸，黑黑讲解之后就有实例，真好

杨帆

效果漂亮~谢谢马老师精彩示范