论坛 › 动画音画 › 干支为列

马黑黑 发表于 2026-6-13 08:07

干支为列

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/gvwl.webp') no-repeat center/cover; color: white; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    #lrc { top: 4%; }
    #msvg { width: 100%; height: 100%; use { fill: none; stroke: url(#grd); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 2; stroke-dashoffset: 0; opacity: .65; animation: move ease-in-out 8s infinite alternate var(--state); } }
    @keyframes move { to { stroke-dashoffset: -180; } }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/13928806/00/41/16/600e82baca629.mp4" autoplay loop muted></video>
    <svg id="msvg" xmlns="http://www.w3.org/2000/svg">
      <defs>
              <linearGradient id="grd">
                <stop offset="0" stop-color="red" />
                <stop offset="0.15" stop-color="green" />
                <stop offset="1" stop-color="yellow" />
            </linearGradient>
            </defs>
            <symbol id="sb" viewBox="0 0 160 90">
              <polyline points="2 2,30 88,150 10" />
            </symbol>
            <use href="#sb" x="0" y="0" />
            <use href="#sb" x="50" y="0" />
            <use href="#sb" x="100" y="0" />
    </svg>
</div>

<script>
    var options = {
      pa: '.pa',
      urls: [['https://music.163.com/song/media/outer/url?id=3374663650', '干支为列']],
    };

    loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
      var aud = new AudPlayer(options);
    });

    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-13 08:07

帖子代码

<style>
    @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
    .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/gvwl.webp') no-repeat center/cover; color: white; }
    .player { width: 480px; bottom: 10px; }
    .btnFs { top: 25px; right: 20px; }
    #lrc { top: 4%; }
    #msvg { width: 100%; height: 100%; use { fill: none; stroke: url(#grd); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 2; stroke-dashoffset: 0; opacity: .65; animation: move ease-in-out 8s infinite alternate var(--state); } }
    @keyframes move { to { stroke-dashoffset: -180; } }
</style>

<div id="pa" class="pa">
    <video class="pd-vid" src="https://img2.tukuppt.com/video_show/13928806/00/41/16/600e82baca629.mp4" autoplay loop muted></video>
    <svg id="msvg" xmlns="http://www.w3.org/2000/svg">
      <defs>
              <linearGradient id="grd">
                <stop offset="0" stop-color="red" />
                <stop offset="0.15" stop-color="green" />
                <stop offset="1" stop-color="yellow" />
            </linearGradient>
            </defs>
            <symbol id="sb" viewBox="0 0 160 90">
              <polyline points="2 2,30 88,150 10" />
            </symbol>
            <use href="#sb" x="0" y="0" />
            <use href="#sb" x="50" y="0" />
            <use href="#sb" x="100" y="0" />
    </svg>
</div>

<script>
    var options = {
      pa: '.pa',
      urls: [['https://music.163.com/song/media/outer/url?id=3374663650', '干支为列']],
    };

    loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
      var aud = new AudPlayer(options);
    });

    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-13 08:10

SVG特效详细说明请查阅：SVG内部图像自适应宽高的实现 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!


可以考虑将动画设置为其它样式，包括构图、动画形态，这需要想象力

梦江南 发表于 2026-6-13 08:14

黑黑老师，这干支是中国古代用来纪年、纪月、纪日、纪时的天干地支组合系统，由十天干和十二地支循环配合形成六十年一周期的纪年法。吗？

梦江南 发表于 2026-6-13 08:16

这也太玄酷了！{:4_187:}

马黑黑 发表于 2026-6-13 09:37

梦江南 发表于 2026-6-13 08:14
黑黑老师，这干支是中国古代用来纪年、纪月、纪日、纪时的天干地支组合系统，由十天干和十二地支循环配合形 ...

音乐等文艺作品的创作思路可以来源于生活、历史、文化等诸多领域，它命名为干支，灵感自然源于中国古代文化。

马黑黑 发表于 2026-6-13 09:39

梦江南 发表于 2026-6-13 08:16
这也太玄酷了！

SVG+视频的特效结合了歌曲寓意，以抽象的方式演绎中华文明的源远流长和对中华儿女的美好指引

梦江南 发表于 2026-6-13 10:18

马黑黑 发表于 2026-6-13 09:37
音乐等文艺作品的创作思路可以来源于生活、历史、文化等诸多领域，它命名为干支，灵感自然源于中国古代文 ...

我是想可能就是这个干支了。

梦江南 发表于 2026-6-13 10:19

马黑黑 发表于 2026-6-13 09:39
SVG+视频的特效结合了歌曲寓意，以抽象的方式演绎中华文明的源远流长和对中华儿女的美好指引

黑黑老师厉害。{:4_178:}

红影 发表于 2026-6-13 10:46

这个动态设计成非匀速的循环往复的方式，这个设计很匠心，让简单的虚线运动那么有韵味，很适应乐曲含义。这样的背景和视频也很起烘托作用。
黑黑的设计付出匠心，太赞了{:4_199:}

马黑黑 发表于 2026-6-13 11:11

红影 发表于 2026-6-13 10:46
这个动态设计成非匀速的循环往复的方式，这个设计很匠心，让简单的虚线运动那么有韵味，很适应乐曲含义。这 ...

匠心谈不上，玩玩而已

马黑黑 发表于 2026-6-13 11:11

梦江南 发表于 2026-6-13 10:19
黑黑老师厉害。

哪里哪里

马黑黑 发表于 2026-6-13 11:11

梦江南 发表于 2026-6-13 10:18
我是想可能就是这个干支了。

挺不错

红影 发表于 2026-6-13 12:26

马黑黑 发表于 2026-6-13 11:11
匠心谈不上，玩玩而已

这么好的构思就是匠心啊，黑黑厉害{:4_187:}

杨帆 发表于 2026-6-13 13:43

漂亮~谢谢马老师精彩示范{:4_190:}

马黑黑 发表于 2026-6-13 13:44

杨帆 发表于 2026-6-13 13:43
漂亮~谢谢马老师精彩示范

{:4_180:}

马黑黑 发表于 2026-6-13 13:44

红影 发表于 2026-6-13 12:26
这么好的构思就是匠心啊，黑黑厉害

这个嘛，首先得是工匠，我不是呢

霜染枫丹 发表于 2026-6-13 18:30

马老师下午好！这个很别致，我的感觉可文可武，有了路径，就有了基础，很漂亮，先收藏。

感谢分享，恭祝夏安~~{:4_204:}{:4_190:}

马黑黑 发表于 2026-6-13 22:01

霜染枫丹 发表于 2026-6-13 18:30
马老师下午好！这个很别致，我的感觉可文可武，有了路径，就有了基础，很漂亮，先收藏。

感谢分享，恭祝 ...

晚上好

红影 发表于 2026-6-13 22:21

马黑黑 发表于 2026-6-13 13:44
这个嘛，首先得是工匠，我不是呢

不不，好的构思就是匠心，不需要是工匠呢。

查看完整版本: 干支为列