论坛 › 动画音画 › No Man's Land

马黑黑 发表于 2026-6-16 18:18

No Man's Land

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/b-c.webp') no-repeat center/cover; color: white; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    .pd-vid { mix-blend-mode: screen; opacity: 0.7; }
    #msvg { position: absolute; width: 12vw; heighht: 12vw; top: 10%; left: 10%; transition: .75s; opacity: 1; cursor: pointer; }
    #msvg polygon { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 6s linear forwards; }
    @keyframes draw { to { stroke-dashoffset: 0; } }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2629112/00/08/32/5d1ead7364cfa.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="white" />
                <stop offset="0.15" stop-color="cyan" />
                <stop offset="1" stop-color="tan" />
            </linearGradient>
            </defs>
      <g id="g1"></g>
    </svg>
</div>

<script>
    var options = {
      pa: '.pa',
      urls: [['https://music.163.com/song/media/outer/url?id=2624172302', 'no man\'s land']],
      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 points = dr.sun(12, 200, 190);
      dr.polygon(points, 'none', 'purple', 1).set('fill-rule', 'evenodd').addTo('g1');
      var len = dr.elm.getTotalLength();
      dr.elm.style.setProperty('--len', len);
      dr.elm.onanimationend = () => {
            setTimeout(() => {
                dr.elm.setAttribute('fill', 'url(#grd)');
                g1.setAttribute('class', 'rotate');
            }, 1000);
      };
    }

    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-16 18:19

帖子代码

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/b-c.webp') no-repeat center/cover; color: white; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    .pd-vid { mix-blend-mode: screen; opacity: 0.7; }
    #msvg { position: absolute; width: 12vw; heighht: 12vw; top: 10%; left: 10%; transition: .75s; opacity: 1; cursor: pointer; }
    #msvg polygon { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 6s linear forwards; }
    @keyframes draw { to { stroke-dashoffset: 0; } }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2629112/00/08/32/5d1ead7364cfa.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="white" />
                <stop offset="0.15" stop-color="cyan" />
                <stop offset="1" stop-color="tan" />
            </linearGradient>
            </defs>
      <g id="g1"></g>
    </svg>
</div>

<script>
    var options = {
      pa: '.pa',
      urls: [['https://music.163.com/song/media/outer/url?id=2624172302', 'no man\'s land']],
      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 points = dr.sun(12, 200, 190);
      dr.polygon(points, 'none', 'purple', 1).set('fill-rule', 'evenodd').addTo('g1');
      var len = dr.elm.getTotalLength();
      dr.elm.style.setProperty('--len', len);
      dr.elm.onanimationend = () => {
            setTimeout(() => {
                dr.elm.setAttribute('fill', 'url(#grd)');
                g1.setAttribute('class', 'rotate');
            }, 1000);
      };
    }

    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-16 18:49

黑黑老师，这种画法更加有难度了，漂亮是越来越漂亮了。{:4_187:}

马黑黑 发表于 2026-6-16 20:11

梦江南 发表于 2026-6-16 18:49
黑黑老师，这种画法更加有难度了，漂亮是越来越漂亮了。

那倒也是，画那么多，手累{:4_170:}

霜染枫丹 发表于 2026-6-16 20:12

马老师晚上好~~

很精致的样式，很旷达的意境，欣赏赞佩！！{:4_204:}{:4_190:}

杨帆 发表于 2026-6-16 21:36

本帖最后由 杨帆 于 2026-6-17 11:33 编辑

漂亮~复杂的SVG绘图过程实现了自动可视化，谢谢马老师精彩示范{:4_180:}

小辣椒 发表于 2026-6-16 21:56

黑黑这个秒画的小播用上了，漂亮{:4_186:}

梦风雨 发表于 2026-6-16 21:59

马朋友，我空的时间来学习学习，超棒，我喜欢特效代码{:4_178:}

红影 发表于 2026-6-16 22:37

漂亮的当场绘制的太阳花小播，绘制动画漂亮，色彩设计也漂亮{:4_199:}

梦江南 发表于 2026-6-17 09:01

马黑黑 发表于 2026-6-16 20:11
那倒也是，画那么多，手累

早上嚎！黑黑老师辛苦了！{:4_190:}

马黑黑 发表于 2026-6-18 12:07

梦江南 发表于 2026-6-17 09:01
早上嚎！黑黑老师辛苦了！

手掌辛苦！

马黑黑 发表于 2026-6-18 12:07

红影 发表于 2026-6-16 22:37
漂亮的当场绘制的太阳花小播，绘制动画漂亮，色彩设计也漂亮

谢赞！中午嚎！

梦江南 发表于 2026-6-18 14:30

马黑黑 发表于 2026-6-18 12:07
手掌辛苦！

黑黑老师，下午嚎！
刚刚做了这帖，端午节的，看看好像背景色淡了点。马上发上来，请黑黑老师指导。{:4_204:}

马黑黑 发表于 2026-6-18 17:34

梦江南 发表于 2026-6-18 14:30
黑黑老师，下午嚎！
刚刚做了这帖，端午节的，看看好像背景色淡了点。马上发上来，请黑黑老师指导。{:4_ ...

咸淡皆适宜

梦江南 发表于 2026-6-18 18:02

马黑黑 发表于 2026-6-18 17:34
咸淡皆适宜

{:4_172:}

姚云裳 发表于 2026-6-18 18:46

这图有意境，
欣赏并学习 ，问好

梦江南 发表于 2026-6-19 19:40

https://q9.itc.cn/q_70/images03/20250526/8d5c2a512b38403fa049771ee32235df.gif

小咔嚓 发表于 2026-6-19 21:14

斗胆随着大家喊一声“黑黑老师”，欣赏美图佳作，顺祝端午安康{:4_204:}

马黑黑 发表于 2026-6-19 21:35

小咔嚓 发表于 2026-6-19 21:14
斗胆随着大家喊一声“黑黑老师”，欣赏美图佳作，顺祝端午安康

节日好

马黑黑 发表于 2026-6-19 21:35

梦江南 发表于 2026-6-19 19:40


谢谢

查看完整版本: No Man's Land