朵拉 发表于 2026-6-21 20:14

春 山 镜（学习马黑黑知为谁效果）

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/6a37d3db886895810ae3dab6.jpg') no-repeat center/cover; color: white; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    .pd-vid { mix-blend-mode: screen; opacity: 1; }
    #msvg { position: absolute; width: 12vw; height: 12vw; top: 10%; transition: .75s; opacity: 1; border-radius: 50%; cursor: pointer; fill: none; stroke: url(#grd); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 var(--shadow-offset) 0 rgba(0,0,0,.75)); --shadow-offset: clamp(340px, 50vh, 800px); }
    .path{ stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw linear 6s forwards; }
    @keyframes draw { to { stroke-dashoffset: 0; } }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/15653652/01/12/35/6193af432daf8.mp4" autoplay loop muted></video>
    <svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
      <title>播放/暂停(Alt+X)</title>
      <defs>
            <linearGradient id="grd">
                <stop offset="0%" stop-color="cyan" />
                <stop offset="70%" stop-color="tan" />
            </linearGradient>
      </defs>
      <g id="g1"></g>
    </svg>
</div>

<script>
    var options = {
      pa: '.pa',
      urls: [['https://upfile.mp3.wf/view.php/9e8a2760d9b6c4b39f5f5849c702117d.mp3', '春山镜']],
      btns: ,
    };

    loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
      loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
    });

    function tzRun() {
      var aud = new AudPlayer(options);
      var dr = _dr(msvg);
      var vertex1 = dr.circlePoints(26, 200, 180);
      var vertex2 = dr.circlePoints(26, 200, 160);
      var path = 'M', p0;
      for (var i = 0; i < vertex1.length; i++) {
            var v1 = vertex1.join(',');
            if (i === 0) p0 = v1;
            const v2 = vertex2.join(',');
            path += i % 2 === 0 ? v1 + ' ' + v2 + ' ' : v2 + ' ' + v1 + ' ';
      };
      path += p0 + 'L120 0 A120 120,0 0 0,-120 0 A120 120, 1 0 0, 120 0';
      dr.path(path).set('class', 'path').addTo(g1);
      dr.elm.style.setProperty('--len', dr.elm.getTotalLength());
      dr.elm.onanimationend = () => {
            dr.elm.setAttribute('fill', 'url(#grd)');
            setTimeout(() => g1.classList.add('rot'), 300);
      };
    }

    function loadJs(url, callback) {
      var script = document.createElement('script');
      script.charset = 'utf-8';
      script.src = url;
      script.onload = function() {
            if (callback) callback();
      };
      document.head.appendChild(script);
    }
</script>

朵拉 发表于 2026-6-21 20:15

@马黑黑
老师 晚上好，学生交作业，请指正{:4_190:}

红影 发表于 2026-6-21 21:24

不是水面可以把倒影拿掉呢。
朵宝真快。欣赏朵宝好帖{:4_187:}

梦江南 发表于 2026-6-22 07:31

欣赏精彩音画，早上问好！{:4_187:}

马黑黑 发表于 2026-6-22 19:17

朵拉 发表于 2026-6-21 20:15
@马黑黑
老师 晚上好，学生交作业，请指正

{:4_199:}

小九 发表于 2026-6-23 17:33

这个效果很有意境呢，欣赏{:4_187:}
页: [1]
查看完整版本: 春 山 镜（学习马黑黑知为谁效果）