No Man's Land

马黑黑

马黑黑

帖子代码

1. <style>
   
2.     @import 'https://638183.freep.cn/638183/web/api/audioplayer.css';
   
3.     .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w8/b-c.webp') no-repeat center/cover; color: white; }
   
4.     .player { width: 480px; bottom: 10px; }
   
5.     .btnFs { top: 25px; right: 20px; }
   
6.     .pd-vid { mix-blend-mode: screen; opacity: 0.7; }
   
7.     #msvg { position: absolute; width: 12vw; heighht: 12vw; top: 10%; left: 10%; transition: .75s; opacity: 1; cursor: pointer; }
   
8.     #msvg polygon { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 6s linear forwards; }
   
9.     @keyframes draw { to { stroke-dashoffset: 0; } }
   
10. </style>
    
11. 
    
12. <div id="pa" class="pa">
    
13.     <video class="pd-vid" src="https://img2.tukuppt.com/video_show/2629112/00/08/32/5d1ead7364cfa.mp4" autoplay loop muted></video>
    
14.     <svg id="msvg" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
    
15.         <title>播放/暂停(Alt+X)</title>
    
16.         <defs>
    
17.                 <linearGradient id="grd">
    
18.                 <stop offset="0" stop-color="white" />
    
19.                 <stop offset="0.15" stop-color="cyan" />
    
20.                 <stop offset="1" stop-color="tan" />
    
21.             </linearGradient>
    
22.             </defs>
    
23.         <g id="g1"></g>
    
24.     </svg>
    
25. </div>
    
26. 
    
27. <script>
    
28.     var options = {
    
29.         pa: '.pa',
    
30.         urls: [['https://music.163.com/song/media/outer/url?id=2624172302', 'no man\'s land']],
    
31.         btns: [msvg],
    
32.     };
    
33. 
    
34.   loadJs('https://638183.freep.cn/638183/web/api/audioplayer.min.js', function() {
    
35.       loadJs('https://638183.freep.cn/638183/svgdr/svgdr.min.js', tzRun);
    
36.   });
    
37. 
    
38.     function tzRun() {
    
39.         var aud = new AudPlayer(options);
    
40.         var dr = _dr(msvg);
    
41.         var points = dr.sun(12, 200, 190);
    
42.         dr.polygon(points, 'none', 'purple', 1).set('fill-rule', 'evenodd').addTo('g1');
    
43.         var len = dr.elm.getTotalLength();
    
44.         dr.elm.style.setProperty('--len', len);
    
45.         dr.elm.onanimationend = () => {
    
46.             setTimeout(() => {
    
47.                 dr.elm.setAttribute('fill', 'url(#grd)');
    
48.                 g1.setAttribute('class', 'rotate');
    
49.             }, 1000);
    
50.         };
    
51.     }
    
52. 
    
53.     function loadJs(url, callback) {
    
54.         var script = document.createElement('script');
    
55.         script.charset = 'utf-8';
    
56.         script.src = url;
    
57.         script.onload = function() {
    
58.             if (callback) callback();
    
59.         };
    
60.         document.head.appendChild(script);
    
61.     }
    
62. </script>

复制代码

梦江南

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

马黑黑

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

那倒也是，画那么多，手累

霜染枫丹

马老师晚上好~~

很精致的样式，很旷达的意境，欣赏赞佩！！

杨帆

哇，复杂的绘图也可实现自动化，谢谢马老师精彩示范

小辣椒

黑黑这个秒画的小播用上了，漂亮

梦风雨

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

红影

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